Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.
Principles
Use intuitive and predictable layouts with consistent UI regions and spatial organization. Layouts should be consistent in the use of grids, keylines, and padding.
Predictable : Use intuitive and predictable layouts with consistent UI regions and spatial organization.
Consistent : Layouts should be consistent in the use of grids, keylines, and padding.
Responsive : Layouts are adaptive and they react to input from a user, a device, and screen elements.
Material measurements :
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 icons and type, can align to a 4dp grid.
Responsive Layout Grid
The Material Design responsive layout grid is an overarching guide to the placement of components and elements. The responsive layout grid adapts to screen sizes and orientation, ensuring consistency across layouts.
1. Columns
2. Gutters
3. Margins
Pixel density
Screen pixel density and resolution vary depending on the platform.
Screen Density Variations
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.
Calculating pixel density
To calculate screen density, you can use this equation:
Screen density = Screen width (or height) in pixels / Screen width (or height) in inches
Density Independent
Density independence refers to the uniform display of UI elements on screens with different densities.
Density-independent pixels
Density-independent pixels, written as dp (pronounced "dips"), are flexible units that scale to have uniform dimensions on any screen. They provide a flexible way to accommodate a design across platforms.
Material UIs use density-independent pixels to display elements consistently on screens with different densities.