Android layout container, common controls and properties, I believe that every developer can recite the flow, layout development can also be appropriate choice. However, the two common design scenarios described in this article have specific implementation techniques that you probably haven’t used before.

RelativeLayout horizontally centered and evenly divided

Design scene:

Seeing this effect, you might automatically select the LinearLayout container and assign the children weight attribute. Yes, this is really easy to implement. However, there are usually other elements on the interface, and the parent container is usually a RelativeLayout. If you wrap the two buttons with a LinearLayout, you will add an additional View Hierarchy and add performance rendering pressure. Actually, you don’t have to do that. RelativeLayout also centers the width of two children horizontally.

The implementation is as follows:

<?xml version="1.0" encoding="utf-8"? >
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/hello"
        android:layout_toRightOf="@+id/view"
        android:text="First" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/hello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/view"
        android:text="Second" />

</RelativeLayout>Copy the code

ScrollView content adaptation techniques

Design scene:

Just to be brief, this type of screen, or similar screens, is common, with varying lengths of content in the middle, or different proportions of the same content on different devices, resulting in different locations of the bottom buttons. For example, the product focus of this interface is to expect the user to read the agreement before making the next move. In other words, you can’t do this:

Compare this to the previous image, where the product wants action buttons to appear at the bottom of the screen when there is enough screen space (or less content in the middle); When the screen space is insufficient (or there are many contents in the middle), the content is mainly displayed, and the operation button is located outside the screen. Scroll up to enter the visible range of the screen, and then proceed to the next step.

Now that we understand the requirements, let’s look at the implementation:

<?xml version="1.0" encoding="utf-8"? >
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="8dp"
            android:text=User Agreement
            android:textAppearance="? android:attr/textAppearanceMedium" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_marginTop="8dp"
            android:background="@color/colorPrimary" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="16dp"
            android:text="@string/content" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:drawable/bottom_bar"
            android:gravity="center_vertical">

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Agree" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Reject" />
        </LinearLayout>

    </LinearLayout>

</ScrollView>Copy the code

Set the android:fillViewport=”true” property of the ScrollView to ensure that the content takes up the entire screen space. The second area is that the middle section, the TextView in this example, uses the Android :layout_weight property to be highly adaptive, ensuring that the action button section behind it is displayed as expected.

Have a good understanding, I believe we will be able to harvest. And you’ll find that there are plenty of places to apply these two layout techniques in actual development. Of course, after reading this article, feel free to comment on any other special techniques you’ve used.

Welcome to follow my wechat official account

Android Note-taker: Focuses on original note-taking in Android development.

Independent blog: Yifeng.studio /