Tips to Design Attractive Android Apps for Different Types of Screens

Android is getting bigger and better with over a quarter of a billion large-screen devices running Android across tablets, foldables, and ChromeOS devices these days. Many developers already build apps that work on more than one type of device. But it’s not always easy to create experiences that scale well across different sizes and across the contexts in which people might be using them. In this post, we’ll go over the latest material design guidance for apps running on tablets and foldables. And with the help of app development experts from Sirinsoftware.com, the company that specializes in IoT and embedded software development, we’ll introduce some canonical layouts as a starting point for your own designs.    

Ergonomics

There is an important piece of advice we’d like to offer from the get-go. As you design and build for different size classes, think about how people are likely to be holding and touching the devices they represent. Being mindful of the device’s shape and size will allow you to build more ergonomic experiences. For example on a tablet, or even on a large phone, the very top area of the screen can be really hard to reach without fully adjusting your grip. So, you want to keep important actions and content in spots where they can be easily reached.  

Canonical Layouts

Canonical layouts are a collection of approaches to common layouts, which should be a big help when designing for big screens.

The first is a simple combination of list detail or list grid views, with or without a navigation container at the leading edge of a screen where the content actually begins.

A supporting panel or sheet can be used on experiences that require focused work like docs. A panel can come in from the trailing edge of the screen or the bottom of the screen to assist with tools or contextual controls.

Feeds are common patterns often found in news or social apps. This template uses tiles to encourage discovery. The UX is the same as on mobile – opening an item opens a new page – but is more immersive and designed for larger screens.

Hero apps prioritize content at the top of the screen and utilize supporting elements around and below it. It’s just fantastic for media-centered applications and widely used in embedded software development now.  

Structuring Your Apps

Now let’s talk about structuring your app to take advantage of these canonical layouts using the principles of responsive UI.

Following the material guidelines, it’s possible to provide alternative layouts according to the width size classes and reposition the navigation where it’s most accessible. It can be a bottom navigation view for smaller screens, a navigation rail for medium screens, and a full navigation view for larger screens.  

List Detail

For a list detail, there is a dedicated widget in AndroidX called SlidingPanelLayout. To use it, you specify the layout width for its two children. And at runtime, SlidingPanelLayout will determine whether there’s enough room to show them both. If there is, both panes will be at least their desired width.

Feed

With a feed, we have an immersive layout showing a collection of items, so RecyclerViewer is a great fit. It’s possible to make a big impact by changing which layout manager the RecycleViewer is using. LinearLayoutManger works great in compact width, but in medium and expanded-width scenarios, the items become overly stretched and distorted. So switching to GridLayoutManager, StaggerGridLayoutManager, or even FlexBoxLayoutManager would be much more appealing.

Hero

In Hero layouts, it’s possible to emphasize one particular element and rearrange the other supporting elements around it. App developers from Sirinsoftware.com note that there are certainly many ways to approach this, but ConstraintLayout provides the most flexibility for that because it offers lots of ways to constraint child elements, both their size and their position relative to other children.

Supporting Panel

For a supporting panel, anything from LinearLayout to ConstraintLayout works as a container to position a panel. One thing to think about is when you transition from a smaller size, where should the panel’s content go? So, there are lots of options like using a side drawer along the trailing edge, or using a bottom sheet that slides up, or using an options menu, or maybe you want that content hidden completely.