Skillfully using drawable to achieve the effect of the Android UI element spacing

Source Address: Cleverly use drawable to achieve the effect of Android UI element spacing

Most of the mobile UI or Web UI is designed based on the grid concept. This grid is usually made up of a few blocks of it. Then they are grouped together into a block.

Using the grid design principle can help align UI elements, improve UI consistency, and at the same time make it easier for users to get the content that is included in the UI.

Nutshell. The grid is a fairly powerful design tool.

Developers need to add some extra spacing between UI elements when using grid design principles, such as padding, margin, or spacing (choose which spacing to use depending on your design). These spacing facilitates the readability of the overall UI without having a clear separation band between different blocks at the same time. These pitches are not unfamiliar to our Android developers, and we use the padding and margin of the view to achieve similar results when designing the Android interface. In Android development, in order to separate the UI from the business logic, we use XML to define the UI. This is very useful for a more fixed UI, but it is a bit difficult when these UI elements need to determine the hidden or displayed state based on the business logic. This article presents some Android development tips for dealing with dynamic grid UI based on this scenario.

UI with no spacing

First, let's look at a simple example. We create a simple one LinearLayout .

We then TextView built one under (show "Application Logo") LinearLayout . We placed 3 of them in the horizontal order Button .

The last obtained for example with what is seen:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "vertical" android:padding= "@dimen/spacing_medium" > & Lt TextView android:layout_width= "match_parent" android:layout_height= "128DP" android:background= "@color /light_gray "android:gravity=" center "android:text=" @string/application_logo "android:textappearance=        "@android: Style/textappearance.material.display1"/> <linearlayout android:id= "@+id/buttons_container" Android:layout_width= "Match_parent" android:layout_height= "wrap_content" android:orientation= "Horizontal "> <button android:id=" @+id/btn_first "android:layout_width=" 0DP "Android:la            yout_height= "Wrap_content" android:layout_weight= "1" android:background= "@drawable/purple" Android:text= "@string/bUtton_1 "/> <button android:id=" @+id/btn_second "android:layout_width=" 0DP "             android:layout_height= "Wrap_content" android:layout_weight= "1" android:background= "@drawable/indigo" android:text= "@string/button_2"/> <button android:id= "@+id/btn_third" Android Oid:layout_width= "0DP" android:layout_height= "Wrap_content" android:layout_weight= "1" and roid:background= "@drawable/teal" android:text= "@string/button_3"/> </linearlayout></linearlayou T>

UI after joining the gap

The UI shown is a grid-based design. There was no space between the elements in the UI. In order for users to better differentiate these UI elements. We give the ID @id/buttons_container of the LinearLayout add attribute, add the attribute to the ID of the android:layout_marginTop="@dimen/spacing_medium" two, @id/btn_first and @id/btn_second Button android:layout_marginRight="@dimen/spacing_medium" then the UI effect for example as seen:

After the spacing has been added. The overall UI effect is much better and more readable.

But there are some problems when we hide something dynamically View  .

If we have a third, we Button will decide whether or not Google Play Services is installed on the user's device. If this device does not have Google Play Services, then we will Button set the visibility property of this to View.GONE  the View.GONE， resulting effect such as:

The result is the same as we expected, the third one Button is no longer displayed, but the second Button right side does not align with the right side of the top TextView . The solution to this problem is that the view with the margin attribute will feel that there is an adjacency view in the corresponding direction of the margin. Like what. Each owning right/top margin view will find a neighboring view of its right/top direction, so the corresponding margin will take effect. Even if the adjacency view is hidden.

The tradeoff between setting the spacing--java and GridLayout

A straightforward solution is to manually change the corresponding margin value in the Java code, but honestly this is not a good solution. Another option is to use a layout that can proactively handle the spacing between elements. GridLayout meets this requirement. But this layout makes the egg ache is that the spacing between elements cannot be defined by themselves, only can use the default spacing.

Best practices for setting spacing--linearlayout divider

There is actually LinearLayout a property that handles the spacing between such elements.

This attribute has not been found by anyone. has been very low-key, but its effect is quite fantastic.

So the third scenario we're talking about is using a fixed, high-width Drawable LinearLayout  element Divider (divider):

<?xml version= "1.0" encoding= "Utf-8"? ><shape xmlns:android= "Http://schemas.android.com/apk/res/android"    android:shape= "Rectangle" >    <size        android:width= "@dimen/spacing_medium"        android:height= " @dimen/spacing_medium "/>    <solid android:color=" @android: Color/transparent "/></shape>

Now you are able to set this newly created drawable as the divider of linearlayout. This allows the drawable to create a gap between the elements:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:layout_width= "Match_ Parent "    android:layout_height=" wrap_content "    android:divider=" @drawable/spacer_medium "    android:o rientation= "vertical"    android:padding= "@dimen/spacing_medium" android:showdividers= "Middle"    >    <!--TextView--    <linearlayout        android:id= "@+id/buttons_container"        android:layout_width= " Match_parent "        android:layout_height=" wrap_content "        android:divider=" @drawable/spacer_medium "        android:orientation= "Horizontal"        android:showdividers= "Middle" >        <!--Buttons-    </ Linearlayout></linearlayout>

Summarize

There are many features in the Android framework that can be used to implement some of the less common scenarios, and the final effect is unexpected.

Definition Drawable is one of the ways.

Assuming you can thoroughly understand Android Drawable , your code may be much leaner.

Note: The Divider property setting in article LinearLayout is added after Android API 11, which means that the Android API Before 11 equipment to use this divider need linearlayoutcompat.

This article is translated from: Grid Spacing on Android original Cyril Mottier

Skillfully using drawable to achieve the effect of the Android UI element spacing