Understanding layout

Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.


Usage

Principles

UIs should use intuitive and predictable layouts, with consistent UI regions and spatial organization. Layouts should use a consistent grid, keylines, and padding. Layouts are...

Read More

Predictable

UIs should use intuitive and predictable layouts, with consistent UI regions and spatial organization.

Consistent

Layouts should use a consistent grid, keylines, and padding.

Responsive

Layouts are adaptive and react to input from the user, device, and screen elements.

Structure

Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout. Smaller components, such...

Read More

Material Design layouts are visually balanced. Most measurements align to an 8dp grid applied, which aligns both spacing and the overall layout.

Smaller components, such as iconography and typography, can align to a 4dp grid.

8dp and 4dp units


Pixel density

Screen pixel density and resolution vary depending on the platform. Device-independent pixels and scalable pixels are units that provide a flexible way to accommodate a design across platforms.

Calculating pixel density

The number of pixels that fit into an inch is referred to as pixel density. High-density screens have more pixels per inch than low-density ones....

Read More

The number of pixels that fit into an inch is referred to as pixel density. High-density screens have more pixels per inch than low-density ones. As a result, UI elements of the same pixel dimensions appear larger on low-density screens, and smaller on high-density screens.

To calculate screen density, you can use this equation:

Screen density = Screen width (or height) in pixels / Screen width (or height) in inches

High-density display

Lower density display

Density independence

Density independence refers to the uniform display of UI elements on screens with different densities. Density-independent pixels, written as dp (pronounced “dips”), are flexible units...

Read More

Density independence refers to the uniform display of UI elements on screens with different densities.

Density-independent pixels, written as dp (pronounced “dips”), are flexible units that scale to have uniform dimensions on any screen. Material UIs use density-independent pixels to display elements consistently on screens with different densities.

  1. Low-density screen displayed with density independence
  2. High-density screen displayed with density independence

Pixel density on Android

When developing an Android app, use dp to display elements uniformly on screens with different densities. A dp is equal to one physical pixel on...

Read More

When developing an Android app, use dp to display elements uniformly on screens with different densities. A dp is equal to one physical pixel on a screen with a density of 160.

To calculate dp:

dp = (width in pixels * 160) / screen density

Screen physical width

Screen density

Screen width in pixels

Screen width in dps

1.5 in

120

180 px

240 dp

1.5 in

160

240 px

1.5 in

240

360 px

Scalable pixels (sp)

Scalable pixels (sp) serve the same function as density-independent pixels (dp), but for fonts. The default value of an sp is the same as the default value for a dp.

The primary difference between an sp and a dp is that sp’s preserve a user's font settings. Users who have larger text settings for accessibility will see font sizes match their text size preferences.

Pixel density on iOS

iOS determines density using logical resolution, which measures its units in points. Points are scaled using a Native Scale factor, which map to a device's...

Read More

Logical resolution

iOS determines density using logical resolution, which measures its units in points. Points are scaled using a Native Scale factor, which map to a device's native resolution (in pixels).

For example, when designing for the iPhone X, you would design for a logical resolution of 375 x 812 points. When rendered, elements are processed by the graphics hardware to fill the iPhone X's 1125 x 2436 pixel screen.

Units for iOS

When designing for iOS, use points (pts).

Learn more:

Pixel density on the web

Use the device's logical resolution, which scales to the device's screen resolution. When designing for the web, replace dp with px (for pixel).

Read More

Logical resolution

Use the device's logical resolution, which scales to the device's screen resolution.

Units for the web

When designing for the web, replace dp with px (for pixel).