

Height, on the other hand, is less common as a high level element in building a responsive UI, but I wouldn’t count it out entirely. For example, a default layout would be a layout and a layout for width 600dp or higher would be in layout-w600dp. To take advantage of width-based resources, you’d use the w prefix. Think really hard on what elements really truly need a fixed width or which should be aligned with a more flexible grid, using a fixed percentage of the available space. Note: this isn’t to say your layout is completely static and fixed width between each breakpoint.

Similarly, the extremely larger sizes after 1600dp is a good time to set a maximum width for your UI: either center aligning and growing the margins or left aligning your entire UI. Below this point and you have a very real possibility to overwhelm the user. It could be a small difference (slightly larger margins) or a much larger change - see the ‘what to change’ section below for plenty of examples.Ī good example of this is the 600dp line: it is only at this point when you should consider having two levels of content hierarchy (say a master and detail view) on the screen at the same time. A ‘breakpoint’ is a specific width where your UI could differ: respond to the new additional space to better take advantage of it.
