Flexible and responsive UI

Mobiles are now available in a variety of sizes, which is why it is so significant to provide a flexible and responsive UI. We need to design the user interface of our app completely flexible so that it is displayed correctly on all devices. This article will show you how to support different screen sizes using the tools available in Android (For other devices such as Android wear, TV,… we have to take more steps).

You can also see Responsive UI code implementation in my GitHub.

GolnazTorabi/ResponsiveUI

The best way to create a responsive UI is to use ConstraintLayout as our base layout file because, in ConstraintLayout, we can specify the position and size for each view according to spatial relationships with other views in the layout. We can convert LinearLayout to Constraint or use the layout_weight option to make the UI flexible(but in nested LinearLayout it slows our UI performance).

convert to ConstraintLayout

So there are ways that we can define our layout responsibly.

1. Dimensions

• Use only match_parent, or wrap_content for the width and height of most view components instead of hard-coded layout sizes (like set image width 60dp, if it is necessary only to use dp for UI components).
• Use only the sp for text size and define it in dimens file.
• Keep dimensions in dimens.xml files (Not on the code).
• Provide dimensions value folder for each type of device sizes.

so what is the difference between dp(dip), sp, and px? based on Android Developer Documentation :

dp

Density-independent Pixels — An abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi (dots per inch) screen, on which 1dp is roughly equal to 1px. When running on a higher density screen, the number of pixels used to draw 1dp is scaled up by a factor appropriate for the screen’s dpi. Likewise, when on a lower density screen, the number of pixels used for 1dp is scaled down. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Using dp units (instead of px units) is a simple solution to making the view dimensions in your layout resize properly for different screen densities. In other words, it provides consistency for the real-world sizes of your UI elements across different devices.

sp

Scale-independent Pixels — This is like the dp unit, but it is also scaled by the user’s font size preference. It is recommended you use this unit when specifying font sizes, so they will be adjusted for both the screen density and the user’s preference.

px

Pixels — Corresponds to actual pixels on the screen. This unit of measure is not recommended because the actual representation can vary across devices; each device may have a different number of pixels per inch and may have more or fewer total pixels available on the screen.

How to create multiple activities or dimens different files :

1. Create a new resource directory: res > New > Android resource directory

2. Select Resource Type as layout

3. Add sw<N>dp in Directory name e.g layout-sw300dp and Hit OK

And for dimens :

1. right-click on dimens file : New > Value Resource file
2. Add name and select screen width or height and set the size for that like this :

And the result looks like this :

value folder sizes for different screen sizes. According to Android developer documentation.

• 320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
• 480dp: a large phone screen ~5" (480x800 mdpi).
• 600dp: a 7” tablet (600x1024 mdpi).
• 720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).

For each layout size, we define a layout folder like layout-w600dp (For 7” tablets or any screen with 600dp width), or layout-h600dp (For height). Because we don’t want to change our layout based on the smallest width or height of our devices, we change our layout based on how much width or height is currently available. For the orientation, we can define the port or land qualifiers to your resource directory names (res/layout-land/main_activity.xml).

When we design multiple screen sizes, we want to make sure we aren’t needlessly duplicating our UI behavior across our activities. So we should use fragments to extract our UI logic into separate components. For example, when the device is a tablet, we show the menu on the left of the screen but in a regular-sized mobile, we don’t want to show that menu.

The sizes that you specify using these qualifiers are not the actual screen sizes. Rather, the sizes are for the width or height in dp units that are available to your activity’s window.

First, we add the code below to the manifest file.

If you want to easily access the size of the user’s phone when the user reports a problem with the UI, the following method is suitable in this case.

Or If the device has a navigation bar, then count its height:

Sometimes, we check if the keyboard is running then increase or decrease the paddings or the margins. so we have to use a listener when it’s running, apply these changes to the layout and when it’s closed, go back to the previous UI.

First, add these codes to a kotlin file

then create a listener class

And in the OnResume method, we have to use it like below :

2.Icons and images

• The first way is to Provide different images and icons in several drawable folders for different screen resolutions. For images please don’t use fixed values and add padding to them.

drawable-ldpi //240x320
drawable-mdpi //320x480
drawable-hdpi //480x800
drawable-xhdpi //720x1280
drawable-xxhdpi //1080X1920
drawable-xxxhdpi //1440X2560

• The second way is to use nine-patch bitmaps that we can use for different screen sizes. For creating the nine-patch file, we right-click on the PNG file and select Create 9-patch file. Then type the file name, Then*.9.png file will be created and we can open the file and change the file’s size and etc. (for more information, see Create resizable bitmaps (9-Patch files)).
• The third way (which I think is the best way) is to use vector for images because it is compatible with different sizes (it’s recommended to use srcCompat to set image instead of src because for SVGs it has a problem when you use src in previous android versions)

Conclusion

So as mentioned in this article, it is so important to have a responsive UI for our app on multiple devices. For more help, you can see materialIO. Thank you for reading my article.