Support multiple screens — Android

Photo by The Average Tech Guy on Unsplash

Recently, I was tasked with analysing the impact of supporting multiple screens and different orientations in our application. Currently, our app supports only portrait mode and is designed to run only on mobile phones.

Let us first understand the problem statement — What would be the changes in our existing codebase to support both portrait and landscape mode and also have our app run on phones, tablets and TVs.

Now that we understand the problem, I will split this problem into 2 parts.
1. Supporting an application on phones and tablets
2. Supporting an application on TV.

Phones and Tablets

We can further divide this into layouts, images and dimensions for multiple screen sizes and retaining data on configuration changes. Here, I will be talking only about the layouts (XML Layouts and not Compose) for multiple screens.

When you think of a layout for multiple screen sizes there is only thing that first comes to your mind. Yes! You guessed it — ConstraintLayout.
From the android developers website — A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

Using a ConstraintLayout would definitely help make your UI flexible to support multiple screens but what about the following case?

In order to handle this you can use alternate layout resources.

You can create a layout named main_activity that's optimised for handsets and tablets by creating different versions of the file in directories.

Using smallest width (sw) qualifier

The smallest width qualifier lets you provide alternative layouts in your app for screens with certain minimum width (dp or dip).

res/layout/main_activity.xml          # default
res/layout-sw600dp/main_activity.xml  # For 7” screens with 600dp
                                      #   wide and bigger
res/layout-sw720dp/main_activity.xml  # For 10” screens with 720dp
                                      #   wide and bigger

Using available width (w) qualifier

The available width qualifier lets you provide alternative layouts in your app based on how much width is currently available on the screen.

res/layout/main_activity.xml         # default
res/layout-w600dp/main_activity.xml  # For 7” screens with 600dp
                                     #   available width
res/layout-w720dp/main_activity.xml  # For 10” screens with 720dp
                                     #   available width

Using orientation (port and land) qualifiers

Orientation qualifiers let you provide alternative layouts when the user switches between portrait and landscape modes.

res/layout/main_activity.xml               # portrait mode
res/layout-land/main_activity.xml          # landscape mode
res/layout-sw600dp/main_activity.xml       # For 7” screens
res/layout-sw600dp-land/main_activity.xml  # For 7” screens in
                                           #   lanscape

Android TV

Applications for TV are a whole different thing. TV screens are typically viewed from afar and in a leanback position. The screen is bigger but it doesn’t provide the same level of detail and colour as a phone or a tablet.
Another point to keep in mind here is that the user won’t be interacting with your app through touch but through a remote.

You will have to keep these factors in mind while creating your layouts.
Layouts apart, directly using your existing app for TV wouldn’t be ideal and here are a few reasons why.

• You will have to declare an activity that is intended to run on TV in your application manifest.
• It is recommended to use leanback libraries which provide APIs and user interface widgets for TV.
• There might be possibility of hardware limitation — all phones and tablets have microphone, GPS, camera etc. but not all TVs have them.

Hence, in my opinion it is better to have your TV app in a separate codebase.

Further Reading
1. Android Developers website to learn more about supporting multiple screens.
2. Android Developers website to dive deeper into ConstraintLayout.
3. Android Developers website to learn about alternative resource layouts.
4. Android Developers website to learn about developing Android TV applications.