MATERIAL DESIG
Applying density
Material Design offers guidance on high-density spacing for
Material System
use cases where increased density improves the user
Introduction experience.
Material studies
BETA Guidance in beta reflects the latest Material Design
insights. It may significantly change to support new
research and code.
Learn more or send us your feedback.
Material Foundation
Foundation overview CONTENTS
Usage
Environment
Layout
Surfaces
Components
Elevation
Accessibility
Light and shadows
Typography
Implementation
Layout
Understanding layout
Pixel density
Usage link
Responsive layout grid
These guidelines describe how and when to apply density.
Spacing methods
Component behavior
Principles keyboard_arrow_up
Applying density
Navigation
Color
Typography
Sound
Iconography
Shape
Motion
Interaction
Communication
Machine learning
Material Guidelines Scannable
Dense UIs improve the ease of viewing and navigating large amounts of
Guidelines overview
content.
Material Theming
Usability
Platform guidance
Prioritized
Dense UIs help users focus by reducing the space between actions.
Visible
Increasing density allows more content and actions to fit on a single
screen.
Density guidelines keyboard_arrow_up
How to apply
Material density guidelines are a resource for understanding when and
why applying density can improve user experiences. Supported by code,
Material Component density can be adjusted cohesively on a scale.
Guidance on using the density scale is explained in component density
and platform support can be found in implementation.
When to apply
How users interact with a component should determine whether or not
you increase the density in a UI. When users view and interact with large
amounts of information, high density components can improve the
experience.
By making more content available on-screen, increasing the density of
lists, tables, and long forms makes information easier to scan, view, and
compare.
1. Increasing the density of a data table
2. Increasing the density of a form
The latest version of Material Design is now
available for Android
Learn about Material 3's new features and support for modern
Start exploring Material 3 arrow_right_alt
design & developer workflows When not to apply density keyboard_arrow_up
Tasks and alert-based components should not increase density.
DesignComponentsDevelopResourcesBlog
menu search
Focused tasks
Don’t increase the density of components that involve focused tasks,
such as interacting with a dropdown menu or picker. Increasing density
on components such as date pickers reduces usability by limiting
tappable space.
Don't
Don’t increase the density in components for focused tasks, such as
date pickers.
Alerts and messaging
Don't increase the density in components that alert the user of changes,
such as snackbars or dialogs. Increasing the density of alerts makes
them less effective at attracting user attention. In the example of dialogs,
readability and prominence of a message are compromised when density
increases.
Don't
Don’t increase the density of alert and message components, such
as dialogs.
Layout link
Grid and component density keyboard_arrow_up
Maintain balance between component density and the grid layout.
To create scannable groups of content, use a less-dense grid layout in
combination with high-density components. The denser your components
become, the larger the margins and gutter widths should be. Combining a
dense layout grid with dense components can make differentiating
groups of content harder for users.
Do
Components with greater density should have lower density margins
and gutters.
Don't
Don’t use a dense layout grid with dense components.
Components link
Applying density to components keyboard_arrow_up
Component density should not be adjusted in isolation. Instead, apply
density consistently to create a cohesive component set. When you
adjust one component’s density, consider how that change will affect
other components in your app.
The tool below illustrates Material Components changing in coordination
with three density settings: default, comfortable, and compact.
Interactive demo
Different densities across a set of Material Components.
Density scale keyboard_arrow_up
The density scale allows you to control the density of individual
components when needed.
The density scale is numbered, starting at 0 for a component’s default
density. The scale moves to negative numbers (-1, -2, -3) as space
decreases, creating higher density. Each increment represents a decrease
in the height of a component by 4dps.
The density scale applied to a button
Don’t select a number from the density scale that breaks your
component.
Don't
Don’t break components by increasing density too much. The density
of a chip at -4 breaks the component.
Spacing methods keyboard_arrow_up
When a component’s density increases, the padding and alignment
remains consistent, but the dimension changes.
Padding
Do not change the padding of a component when increasing its density.
Component padding affects height and reducing padding can affect user
interactions negatively.
Dimensions
Change dimensions when increasing the density of components.
Component dimensions affect the length and height of the component or
element.
Alignment
Use a center specification to align elements within component
containers. Center aligning elements allows component heights to be
adjusted without additional alignment of elements.
Spacing multiple elements
When multiple elements are stacked vertically within a component, use
4dp increments to separate them. Center the grouped element within the
component container.
1. Elements separated by 20dp.
2. Element group centered within the component container vertically.
Accessibility link
Touch targets keyboard_arrow_up
Touch targets apply to any device that receives both touch and non-touch
input. To balance information density and usability, the touch target for
default density components should be at least 48 x 48 dp, with at least
8dp of space between each target. Note: on iOS, 44 x 44 dp is the
recommended touch target.
Touch target minimum of 48 x 48 dp
1. 40dp element, 48dp touch target
2. 24dp element, 48dp touch target
3. 36dp element, 48dp touch target
48 x 48 dp minimum touch targets should be the default experience in
your product, with the exception of iOS products. Users must opt in to
high density component experiences because higher density components
do not meet accessibility requirements.
A pattern for users to opt in to a denser component experience
Typography link
Line height keyboard_arrow_up
Line height is the space between lines of text. Line height can be used as
a way to create density in typographic layouts.
1. Larger line height: 44dp, 40dp, 44dp, 32dp
2. Smaller line height: 36dp, 32dp, 40dp, 20dp
Implementation link
Density support for each platform is indicated below.
Platform Status
Android Planned
iOS Planned
Web Available
Flutter Planned
Up next
Material is an adaptable system of guidelines, components, and tools that
support the best practices of user interface design. Backed by open-
source code, Material streamlines collaboration between designers and
developers, and helps teams quickly build beautiful products.
GitHub / Twitter / YouTube / Blog RSS
Privacy Policy
Terms of Service
License
Feedback