Share:
Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, break-point details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.
The New Breakpoints
For optimal user experience, material design user interfaces should adapt layouts for the following break-point widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.
1. Summary and detail view content in layouts
- Layouts under 600dp wide may fill the screen with a single level of content hierarchy (either summary or detail content, but not both).
- Layouts over 600dp wide may place two levels of content hierarchy on the screen (both summary and detail content).
2. Max screen widths
Layouts over 1600dp wide may let the layout grow until it hits a max width. At this point, the grid may do one of the following:
- Become center aligned with increased margins
- Remain left aligned while the right margin grows
- Continue to grow while revealing additional content