RapidValue Solutions

As smartphone usage continues to grow, Android mobile OS continues to be the leader. According to a report by Strategy Analytics global market share of Google’s Android is over 79%. The primary reason for this growth is the variety of devices available in the market with Android OS. Devices with different configurations, display densities, customization options and different vendors are available exclusively for Android. Many enterprise mobile application developers look forward to Android as a cost effective platform.

The challenging stage in application development process is the UI, since the app needs to be optimized to fit various devices with different screen sizes and OS versions.

This article explains the best practices for Android XML Layouts.

1. Use Hierarchy Viewer

Optimize your Layouts by using the powerful tool that comes with SDK. Hierarchy Viewer allows you to inspect your layout component that helps you to debug the layout problems and can increase your layout performance by calculating the inflating time for your layout.

You can open the hierarchy viewer by selecting your SDK folder->tools->hierarchyviewer

 

2. Avoid Weight

It is pretty easy to play with LinearLayout and weight, but it makes your layout expensive. Sometimes you might need weight to achieve something, but dividing two components equally in a screen can achieve without applying weight.

Place the divider first on the center by applying the property centerHorizontal=”true” on a RelativeLayout as shown in the figure, and then insert another two buttons on the left and right respectively by applying the property alignParentLeft and alignParentRight. Then you can give the attributes toLeftOf and toRightOf as shown in the figure to equally divide without using weight.

3. Avoid Nested Layouts

Nesting layouts to deeper level decreases your layout performance. Avoid nested layouts and nested weights. Many developers use nested structure with Linear Layout for setting the visibility dynamically. In LinearLayout, the components are arranged in a linear way, so hiding one component will not affect alignment of rest of the components.

In RelativeLayout, user defines the position of one component in relative to other component’s position such as below, alignLeft etc. Therefore, while changing the visibility in such a scenario the component does not know where to align it. You can apply the property alignWithParentIfMissing=”true”

4. Use less Images and Draw vectors shapes

Make your project light weight by drawing basic shapes with XML instead of using images. Almost all basic shapes can be drawn with Shape Drawables. The best part is its vector and renders neatly in various display densities.

And for small icons that need to be shown in different colors in your project screens, there is no need to duplicate images in all quality, you can use the same image and can apply the property android:tint=”@color/primary_color” This will change the color of image as similar to ColorOverlay property in Photoshop.

5. Reusable XML

Write XML Layouts as reusable layouts, which will avoid duplicating the same layout with different names. Use the <include>, <fragment> and <merge> tags for achieving this.

6. Use Styles

Defining styles in Android XML is similar to defining class in CSS. You can define a set of properties under one name and can apply it to any component. Also you can inherit from one style as in CSS.

6. Apply Nine-Patch Image for Stretchable backgrounds

Sometimes you might need to give background as image for content where the length of the content is dynamic. Example – Chat Bubble, Custom Pop Up. In this scenario, you need to create a Nine-Patch image so that you can define the stretchable region inside that image. The Nine-Patch can be created with any photo editing tool or the SDK itself has a Nine-Patch generator.

7. Use Toolbar, ActionBar or support library equivalent

If your app contains ActionBar type design pattern/navigation, use Toolbar or ActionBar itself. Do not try to reinvent the wheel. With support library v7, you can achieve compatibility from Android 2.1 (API level 7 and above). And if you are using ActionBar the ActionBar Style Generator made the customization is easy.

8. Separate Layout and Styling Elements

Separate the layout and its styling elements, such as dimens, strings, colors. With this you can have the flexibility in your layout to work seamlessly in large screens. So that you can specify a new set of dimens for tablets by applying qualifiers and it reflects exclusively for large screens.

9. ldpi is deprecated

As of now, there is no need of ldpi resources in your project, you can avoid ldpi images and provide xxhdpi images for higher display density devices. And for AppIcon xxxhdpi is needed.

10. Support for Small Screens

Since there are wide range of devices running different OS versions and different screen sizes, you need to consider all types of devices. You can give a separate layout for a small screen by using layout-small or similar qualifiers.

11. Naming Conventions for ID and Resources

It is better to follow naming conventions for ID and resource names, so that while writing the java classes you do not need to look back to your layout to check the ID you had mentioned.

For IDs you can follow this format

login_ed_username

login_ed_password

login_btn_submit

login_txv_forgot_pass

Login stands for ‘which page’, followed by ‘which component’ and then ‘what it is for’

In general layoutname_component_name

This will help you to get a clear idea about the ID and can avoid looking into layout each time.

For resources you can follow this format

ic_action_add, ic_action_location (ActionBar Icons)

ic_play, ic_save (General Icons)

ic_tab_music, ic_tab_more (Tab Icons)

12. Reuse Code in Different Projects by Generic Naming

Defining styles.xml and dimens.xml as shown in this figure will allow you to reuse the code in different projects. The colors and text sizes here are defined in a generic manner.

colors.xml

 

 

 

 

 

 

 

 

 

 

 

 

 

dimens.xml

 

 

 

 

 

 

 

 

 

To know more details about the best practices and what’s new in Android Lollipop, checkout our presentation

How has your experience been on Android development? Will be good to know your thoughts.

By,

Alen Sunny Stephen

Android Front End Developer, RapidValue Solutions