Responsive UI

Responsive UI centers on the principles of flexibility and continuity.

Flexibility refers to layouts making optimal use of the available space and adjusting when the available space changes.

Continuity refers to a smooth user experience when switching from one window size to another. Whatever experience the user is currently having should be uninterrupted. Because a change in size may result in the destruction and reconstruction of the entire view hierarchy, it is critical that the user does not lose their place or their data.

Things to avoid

Avoid making layout decisions based on physical, hardware variables. It may be tempting to base judgments on set quantities, but in many cases, these figures aren’t relevant for estimating the amount of space your UI can work with. For the same reason, avoid locking your app to a specific orientation or aspect ratio. And also, avoid trying to determine whether the device is a phone or tablet.

Window sizes can differ from the physical device or display size.

So finally we have to avoid these few things.

• Avoid making layout decisions based on physical, hardware variables.
• Avoid locking your app to a specific orientation or aspect ratio.
• Avoid trying to determine whether the device is a phone or tablet.

Window size classes

Window size classes categorize the display area available to your app as compact, medium, or expanded. Available width and height are classified separately, so at any point in time, your app has two window size classes — one for width, one for height.

Note: Most apps can build a responsive UI by considering only the width window size class.

Representations of width-based window size classes.

Representations of height-based window size classes.