UI Optimization in Android

1. RelativeLayout is better than LinearLayout
The most commonly used LinearLayout in Android represents the UI framework and is also the most intuitive and convenient method. For example, you can create a UI to display the basic content of an Item ,:

Wireframes:

Use LinearLayout to implement the above UI code:
Xml Code
<LinearLayout xmlns:
Android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "? Android: attr/listPreferredItemHeight"
Android: padding = "6dip">
 
<ImageView
Android: id = "@ + id/icon"
Android: layout_width = "wrap_content"
Android: layout_height = "fill_parent"
Android: layout_marginRight = "6dip"
Android: src = "@ drawable/icon"/>
 
<LinearLayout
Android: orientation = "vertical"
Android: layout_width = "0dip"
Android: layout_weight = "1"
Android: layout_height = "fill_parent">
 
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "0dip"
Android: layout_weight = "1"
Android: gravity = "center_vertical"
Android: text = "My Application"/>
 
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "0dip"
Android: layout_weight = "1"
Android: singleLine = "true"
Android: ellipsize = "marquee"
Android: text = "Simple application that shows how to use RelativeLayout"/>
</LinearLayout>
</LinearLayout>
 
Although we can implement the expected results through Linearlayout, there is an optimization problem here, especially for a large number of Items. Compared with RelativeLayout and LinearLayout, they use less resources to achieve the same effect. The following code uses RelativeLayout to implement the same UI:
Xml Code
<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "? Android: attr/listPreferredItemHeight"
Android: padding = "6dip">
<ImageView
Android: id = "@ + id/icon"
Android: layout_width = "wrap_content"
Android: layout_height = "fill_parent"
Android: layout_alignParentTop = "true"
Android: layout_alignParentBottom = "true"
Android: layout_marginRight = "6dip"
Android: src = "@ drawable/icon"/>
 
<TextView
Android: id = "@ + id/secondLine"
Android: layout_width = "fill_parent"
Android: layout_height = "26dip"
Android: layout_toRightOf = "@ id/icon"
Android: layout_alignParentBottom = "true"
Android: layout_alignParentRight = "true"
Android: singleLine = "true"
Android: ellipsize = "marquee"
Android: text = "Simple application that shows how to use RelativeLayout"/>
 
<TextView
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: layout_toRightOf = "@ id/icon"
Android: layout_alignParentRight = "true"
Android: layout_alignParentTop = "true"
Android: layout_above = "@ id/secondLine"
Android: layout_alignWithParentIfMissing = "true"
Android: gravity = "center_vertical"
Android: text = "My Application"/>
</RelativeLayout>
When you use RelativeLayout, you need to pay attention to it because it determines the UI framework based on the relationship between multiple views. When a View needs to be completely hidden by calling GONE, affects the associated Views. Android provides an attribute alignWithParentIfMissing to solve similar problems. When a View cannot find its associated Views, it determines whether it is aligned with the parent View based on the alignWithParentIfMissing setting.
You can use Hierarchy Viewer to View the View Hierarchy of the two layout schemes. RelativeLayout is superior to LinearLayout.
2. Reuse of UI Resources
When defining Android Layout (XML), it is very important to have four special labels, three of which are related to resource reuse, respectively: <viewStub/>, <merge/> and <include/>, but the examples in previous cases or official documents do not focus on the importance of these tags.
<Include/>: You can use this label to directly load external xml into the current structure, which is a common tag for reusing UI resources. Usage: Assign the xml file path that needs to be reused to the Layout attribute of the include tag, for example:
Xml Code
<Include android: id = "@ + id/cell1" layout = "@ layout/ar01"/>
<Include android: layout_width = "fill_parent" layout = "@ layout/ar02"/>
<ViewStub/>: this label allows the UI to visually display the effect similar to setting the visibility of the View in special circumstances, however, the greater significance is that the Views wrapped by this label do not occupy any memory space by default. ViewStub imports the Views element from the outside through include. Usage: android: layout is used to specify the contained content. By default, all labels contained in ViewStub belong to visibility = GONE. ViewStub calls the system to load its internal Views through the inflate () method.
Example:
Java code
<ViewStub android: id = "@ + id/stub"
Android: inflatedId = "@ + id/subTree"
Android: layout = "@ layout/mySubTree"
Android: layout_width = "120dip"
Android: layout_height = "40dip"/>
<Merge/>: this label plays an important role in optimizing the UI structure. It aims to delete redundant or additional layers to optimize the structure of the entire UI Layout. The following is an example to learn about the actual functions of this tag, so that you can learn more about the usage of & lt; merge/& gt.
Create a simple Layout with two Views elements: ImageView and TextView. By default, these two elements are placed in FrameLayout. The effect is to display an image in full screen in the main view, and then display the title on the image, which is located below the view. The following is the xml code:
Xml Code
<FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<ImageView
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: scaleType = "center"
Android: src = "@ drawable/golden_gate"/>
 
<TextView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_marginBottom = "20dip"
Android: layout_gravity = "center_horizontal | bottom"
Android: padding = "12dip"
Android: background = "# AA000000"
Android: textColor = "# ffffffff"
Android: text = "Golden Gate"/>
</FrameLayout>
The preceding layout is as follows:

Start tools> hierarchyviewer. bat to view the current UI Structure View:

We can see that two framelayout nodes appear in the structure contained by the red box, obviously, these two nodes with the same meaning cause a waste of resources (here we can remind you that you can habitually view the current UI resource allocation through hierarchyViewer in the Development Project ), how can this problem be solved? (In the current example, we will use the & lt; merge/& gt; label to remove redundant frameLayout nodes. We will replace framLayout in the above xml code with merge:
Xml Code
<Merge xmlns: android = "http://schemas.android.com/apk/res/android">
<ImageView
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: scaleType = "center"
Android: src = "@ drawable/golden_gate"/>
<TextView
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_marginBottom = "20dip"
Android: layout_gravity = "center_horizontal | bottom"
Android: padding = "12dip"
Android: background = "# AA000000"
Android: textColor = "# ffffffff"
Android: text = "Golden Gate"/>
</Merge>
After running the program, the Emulator displays the same effect. However, the UI structure viewed through hierarchyviewer has changed. The redundant FrameLayout nodes were merged, you can also add a subset of the merge tag to the FrameLayout root node of the Activity. (Note: the root nodes of all Activity views are FrameLayout ). If the created Layout does not use FramLayout as the root node (but uses LinerLayout to define root labels), you cannot use the preceding example to optimize the UI structure through merge.
In addition to the preceding example, meger also has another usage: When the Include or ViewStub label is used to import the xml structure from outside, merge can be used as the root node for the imported xml, in this way, after being embedded into the parent structure, the subset it contains can be well integrated into the parent structure without redundant nodes.
Pay special attention to the following two points:
A. <merge/> can only be used as the root node of xml layout;
B. If the xml layout to be expanded is based on merge as the root node, You need to place the imported xml layout in the viewGroup, and set attachToRoot to True. (For more information, see inflate)
3. Use tools hierarchyViewer and Layout Opt.
The front section describes how to optimize system resources through Layout to reduce unnecessary resource usage. Based on how to make rational use of resources, we can further improve the visual performance. The visual expressiveness mentioned here does not refer to the visual effects intuitively seen, but the performance improvement.
There are two main contents:
Drawing)
Startup Time (the Time when Activities is started)
The above two performance optimizations depend on the Window backGround drawable function settings.
The Window backGround identification may cause some misunderstandings to some people. In fact, every time setContentView () is used to display the pre-configured interface, android only adds the Views you created to the Window of Activiy. In addition, this Window not only contains the Views you have created, but also contains the elements preset by Android for Activity. Run your program through Emulator, and then view the current program UI architecture Root node DecorView through Hierarchy Viewer. This is the top-level node added by Android.

In fact, Window background drawable is determined by DecorView. You can call getWindow (). setBackgroundDrawable () in the Activity to set the background drawable of DecorView. Note that this method is applicable to the current Android platform and may be changed due to version updates or different hardware devices in the future. (Currently, we only target G1. If testing in other environments requires careful verification)
If you are currently using the android standard Themes, after you call the getWindow (). setBackgroundDrawable () method, this background drawable will affect your activities. An example is provided to intuitively compare the performance improvement results:

In the redraw mode where the activity is maintained, the current FPS is 39 frames/second, which is about 25 ms/frame. In this example, the ImageView is set to full-screen display and completely overwrites the background of the activity. Therefore, the background drawable occupies unnecessary computing resources. Create a new Theme and apply it to the Activity. Create res/values/theme. xml and XML content:
Xml Code
<Resources>
<Style name = "Theme. NoBackground" parent = "android: Theme">
<Item name = "android: windowBackground"> @ null </item>
</Style>
</Resources>
You also need to modify the AndroidMainfest. xml file and apply the Theme created above to the Activity. The format is:
Xml Code
<Application android: icon = "@ drawable/icon" android: label = "@ string/app_name">
<Activity android: name = ". EggImageViewer"
Android: label = "@ string/app_name"
Android: theme = "@ style/Theme. NoBackground">
<Intent-filter>
<Action android: name = "android. intent. action. MAIN"/>
<Category android: name = "android. intent. category. LAUNCHER"/>
</Intent-filter>
</Activity>
</Application>
(You can also apply Theme to the <Application/> label.) After completing the preceding modification, let's see what has changed in the current FPS:
 

The FPS can be increased to 60 +, and the performance has been greatly improved. Isn't it incredible? It can be understood that when the application MapView or WebView is displayed in full screen, this simple setting method can be used to improve the overall performance.
Through the above example, we can intuitively understand the optimization method of window background drawable, And we can clearly see the performance comparison before and after the settings, I hope this simple technique can help your application.
In addition, the application based on this technique can extend the display of another optimization function. For some applications that require full-screen display, you can use Theme to define the image of Window's background to increase the Activity startup speed. After all, you do not need to create an ImageView as the custom background, but overlay it in the Activity window background.
Implementation Method:
Create res/drawable/background_res.xml
Xml Code
<Bitmap xmlns: android = "http://schemas.android.com/apk/res/android"
Android: src = "@ drawable/shelf_panel"
Android: tileMode = "repeat"/>
Create res/values/theme. xml
Xml Code
<Resources>
<Style name = "Theme. Shelves" parent = "android: Theme">
<Item name = "android: windowBackground"> @ drawable/background_res </item>
<Item name = "android: windowNoTitle"> true </item>
</Style>
</Resources>
Usually some seemingly simple methods can play a very big role. I also hope that you can constantly explore practical skills in practice, share your findings with people around you, and improve your ideas with everyone's witness!