While exploring better ways of laying down the UI across multiple device configurations, I came across Responsive Layout Grids on the material.io website. I was intrigued to learn about a systematic way of designing UIs that was responsive and consistent. Having read that article I was excited to get my feet wet by implementing that design principle into a library that could provide a Responsive Layout Grid as a Jetpack Composable.
But before I dive into the ComposeResponsiveLayoutGrid, let me give you a quick recap of the design principle.
What is a Responsive Layout Grid?
A Responsive Layout Grid is a grid that “…adapts to screen size and orientation, ensuring consistency across layouts.”
This means that regardless of the device (e.g. phone, tablet, or laptop), or its configurations (e.g. landscape, portrait, or folded) the UI will look consistent in terms of spacing and content placement.
For example, look at how Slack gracefully handles 3 popular device form factors: phone, tablet, and laptop.
But how does it work?
This design principle bases itself on 3 basic components:
Columns: Placeholders for content
Gutters: Spaces between the columns
Margins: Space at the start and end of the display
While columns are used to set up the content, gutters and margins inherently represent the relationship between the content. For example, bigger gutters could mean that your content is disparate, while smaller gutters show a stronger connection between the content. Margins too could be increased or decreased based on the content that you are displaying.
ComposeResponsiveLayoutGrid: Design Actualization
This is where ComposeResponsiveLayoutGrid comes in, an API for users to easily express their own UIs according to this design philosophy.
The project’s main activity shows the margins, columns, and gutters in a responsive way to recreate material.io’s design spec.
Galaxy Fold Emulator: Unfolded vs Folded
This is accomplished by using a ResponsiveBox. This composable gives you access to the Screen Type (according to the breakpoints in the material.io article) and the actual metrics like the number of columns, column width, gutter width, and margin width.
@Composable
fun Sample() {
ResponsiveBox { responsiveDimensions, screenType ->
// Give different UI options based on the screen
// Laptops may have a more detailed version of the UI
when(screenType) {
ScreenType.PHONE -> TODO()
ScreenType.TABLET_NORMAL -> TODO()
ScreenType.TABLET_LARGE -> TODO()
ScreenType.LAPTOP -> TODO()
ScreenType.DESKTOP -> TODO()
}
// Use responsiveDimensions to place composables in your UI
}
}
Thank you for reading this article. Hopefully, you find this library helpful in implementing responsive layout grids for your own project!
Check out the project at https://github.com/SteadfastInnovation/ComposeResponsiveLayoutGrid