Android Studio and its UI performance measuring features

Introduction

While starting an app development,the first and foremost thing to be taken care of is UI/UX (User Experience).In past three years,while developing apps I've noticed so many times that layouts and UI performance are not being paid attention as equal as we do for code.But a well written layout simply adds to your app performance and easy to maintain as well.In this article,I am gonna cover some tools of android studio provided for layout  efficiency and performance we'll also get to know few tips regarding android Layouts and Views.

Layouts and Views

Layout is basically a container that wraps all the elements that we see on screen.It also handles the arrangement of elements encapsulated.One can also create a custom layout by extending ViewGroup class.Most commonly used layouts are:

1.Linear Layout
2.Relative Layout
Relative layout is considered simple and easy to use.But Relative Layout is slow, and Constraint Layout(recently launched by android community) is Beta-ish(in beta version) at the moment.

In a talk at Google I/O 2013 (Writing Custom Views for Android), Romain Guy clarified the misunderstanding that caused everyone to start using Relative Layouts for everything. A Relative Layout always has to do two measure passes. Overall it is negligible as long as your view hierarchy is simple. But if your hierarchy is complex, doing an extra measure pass could potentially be fairly costly. Also if you nest Relative Layouts, you get an exponential measurement algorithm.

Linear layout is preferred over Relative Layout in terms of preference.For detailed description,please check Relative Layout vs Linear Layout

Android Studio Tools for view hierarchy

We have some awesome tools in android studio,to enhance UI/UX performance of an app in android device monitor.Android Device Monitor is a standalone tool that provides a UI for several Android application debugging and analysis tools. Android Device Monitor doesn't require installation of an integrated development environment to work.Following are the tools available in android studio and android device monitor:

• Layout Editor
• Component Tree
• Palette
• Toolbar
• Design Editor
• DDMS( Dalvik Debug Monitor Server)
• Traceview
• Systrace
• Tracer for OpenGL ES
• Hierarchy Viewer

Layout Editor

Layout Editor is a window that appears when we switch into design mode of layout XML file.

Component Tree

User interfaces are constructed using a hierarchical structure.The component tree provides a visual overview of the hierarchy of the user interface design. Selecting an element from the component tree will cause the corresponding view in the layout to be selected. Similarly, selecting a view from the device screen layout will select that view in the component tree hierarchy.

Palette

The palette library is a support library that extracts prominent colors from images to help you create visually engaging apps.Palette library can be used to design layout themes and apply custom colors to visual elements in your app.The Palette object gives you access to the colors in a Bitmap image while also providing six main color profiles from the bitmap to help inform your design choices.

Add following line to gradle file of your app module:

dependencies {
  compile 'com.android.support:palette-v7:24.2.1'
}

Toolbar

The Designer toolbar provides quick access to a wide range of options including, amongst other options, the ability to zoom in and out of the device screen layout, change the device model currently displayed, rotate the layout between portrait and landscape and switch to a different Android SDK API level. The toolbar also has a set of context sensitive buttons which will appear when relevant view types are selected in the device screen layout.

Design Editor

Design editor is the default tool window layout.When you open a layout definition file for editing, the pane appears in the editor tab by default. If you are editing the layout definition file manually and then switch to the visual mode by clicking the Design tab, the pane opens in the tab where the edited layout definition file is opened.

DDMS

DDMS (Dalvik Debug Monitor Server) is a debugging tool that provides port-forwarding services, screen capture on the device, thread and heap information on the device, logcat, process, and radio state information, incoming call and SMS spoofing, location data spoofing, and more. DDMS can help you with following:

• Viewing Heap usage by app
• Memory allocation to objects
• Working with Android Emulator/Device's File System
•  Thread information
• LogCat
• Network traffic tool
• Starting method Profiling

click here for more details

TraceView

Traceview is a graphical viewer for execution logs saved by your application. Traceview can help you debug your application and profile its performance.

Work with traceview using following steps:

1. Connect your mobile device to your computer.
2. Open your application in Android Studio, build the source, and run it on your device.
3. Start the Android Device Monitor from Android Studio: Tools -> Android -> Android Device Monitor.
4. Make sure your device and the package for your application are showing in the Devices (DDMS mode) or Windows (Hierarchy Viewer mode) tab.
   If necessary choose Window > Reset Perspective to get back to the default pane arrangement.
5. Click the DDMS button, because Traceview is one of the DDMS tools.
6. Select the app you want to profile.
7. In the Profiling Options popup:
• Choose Sample based profiling
• Keep the default sampling rate of 1000 microseconds.
• Click OK.

Systrace

Systrace is a performance measuring tool to check how our application fits into many running systems on an android device.The systrace tool is particularly useful in analyzing application display slowness, or pauses in animations, because it shows you the execution of your application across multiple system processes. With display execution, drawing screen frames with a regular rhythm is essential for good performance. Having a regular rhythm for display ensures that animations and motion are smooth on screen. If an application drops out of this rhythm, the display can become jerky or slow from the users perspective.It puts together system and application thread execution on a common timeline.The generated trace allows you to view highly detailed, interactive reports showing everything happening in the system for the traced duration.Its good to get detailed information of following:

• Container Performance
• Detecting performance bottlenecks in the execution of your code

You can zoom into the graphic view to get more details. 

Tracer for OpenGL ES

Tracer is a tool for analyzing OpenGL for Embedded Systems (ES) code in your Android application. The tool allows you to capture OpenGL ES commands and frame by frame images to help you understand how your graphics commands are being executed.

Hierarchy Viewer

Hierarchy Viewer is a visual tool that can be used to inspect your Android user interfaces and help you improve your layout designs and performance.The Hierarchy Viewer application allows you to debug and optimize your user interface. It provides a visual representation of the layout's View hierarchy (the Layout View) and a magnified inspector of the display (the Pixel Perfect View).It’s packaged with the Android SDK, and lives in the <android-sdk>/tools folder.

General points regarding Android app performance:

• Do not complicate layouts unnecessary. Reduce nesting.
• Do not just initiate new objects for sport.
• Do not make IO operations on the main thread. Move everything with any kind of delay into a separate thread.
• Do use ProGuard as part of your release build to optimize the app.
• Do give the user feedback on everything e.g. clicks and long running processes.
• Do run code inspection regularly and do not just ignore Lint warnings.
• Do test your apps for responsiveness. If something is bothering you, it will for sure be bothering your users.
  
  I hope you like the above article,I’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter or Facebook. Thank you!