Working with multiple layouts when the screen is zoomed on Android (XML Version)

Good day readers, have you ever tried set your device’s zoom level and font size to max? If you have never tried, please try it once and you probably find out that your app will looks unfamilar because some alignment is incorrect. Especially when you have more than one view aligned horizontally.

You probably already know the principle to support the multiple screen size (Using ConstrainLayout, ScrollView, Try not to align views horizontally, etc).

However, IRL, sometimes we have to achieve a total different layout alignment. For example:

There are multiple ways to achieve the above layout:

• Using multiple XML layout (Today’s topic).
• Programmatically set constarints.
• Jetpack Compose — set constraints based on the minimum screen width.

Let’s get started

The tool that will help us to achive the result today is Smallest Screen Width qualifier.

Creating a new layout with Smallest Screen Width qualifier

This will help us to have multiple layouts for a single screen. By using dp to separate between zoom levels.

Before creating the layouts, there’s a reason why I separate it by dp.

Diffrence of Minimum width when the screen is zoomed

As you can see from the above image, minimum width is changed when we set the level of screen zoom. That’s make the smallest screen width became a good choice to use for managing the layouts for multiple zoom levels.

Now let’s Creating a new layout: Right click on res -> layout -> New -> Layout Resource File and Select Smallest Screen Width from Availabe qualifiers -> Name it the same as your existing layout -> Set 340 to Smallest screen width.

Creating a layout with Smallest screen width 340

Why 340? — It just because the layout (of my current project) on my phone starting to looks weird when it set to this exact zoom level. You’re free to come up with your own number 😄

Now we will have 2 layouts like this

How to use it?

• activity_main.xml (sw340dp) — is for the the screen that have minimum width of 340dp, in other word — 340dp or above.
• activity_main.xml — is for the zoomed layout, in other word — the screen that have width less than 340dp

And here is the result! 🎉

Comparison between two zoom levels

Tips: You can also extract the common views on the layout to another file and use <include> to make it easier for maintaing the layout.

Check out the code for this article on GitHub

https://github.com/sittisak-kij/MultipleDpLayoutDemo