Easy Tutorial
❮ Merge Sort Android Tutorial Fragment Demo2 ❯

2.2.1 LinearLayout (Linear Layout)

Category Android Basic Tutorial

Introduction to This Section

This section begins with the layout in Android. There are six major layouts in Android, namely: LinearLayout (Linear Layout), RelativeLayout (Relative Layout), TableLayout (Table Layout) FrameLayout (Frame Layout), AbsoluteLayout (Absolute Layout), GridLayout (Grid Layout) Today we will explain the first layout, LinearLayout (Linear Layout). The screen adaptation we use more is the weight (weight attribute) of LinearLayout. In this section, we will analyze in detail LinearLayout, including some basic attributes, the use of Weight attributes, and how the ratio is calculated. In addition, we will also talk about a less used attribute: android:divider to draw an underline!


1. Learning Diagram for This Section


2. Detailed Explanation of the weight (Weight) Attribute:

① The Simplest Method of Use:

As shown in the figure:

Implementation code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">   

    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#ADFF2F"     
        android:layout_weight="1"/>    


    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#DA70D6"     
        android:layout_weight="2"/>    

</LinearLayout>

To achieve the 1:1 effect of the first one, just change the weight of the two LinearLayouts to 1 and 1 respectively. Usage summary: Divide the horizontal direction according to the ratio: set the android:width attribute of the involved Views to 0dp, and then set the ratio of the android weight attribute; similarly, for the vertical direction, just set the android:height to 0dp and then set the weight attribute! You can try writing a vertical equal ratio division to experience the simple method yourself!

② Detailed Explanation of the weight Attribute:

Of course, if we do not use the above method of setting to 0dp, and directly use wrap_content and match_parent, then we need to continue to analyze the weight attribute, divided into two situations, wrap_content and match_parent! In addition, we also need to see whether the orientation of LinearLayout is horizontal or vertical, which determines the direction of proportional division.

1) wrap_content is relatively simple, just according to the ratio directly

Implementation code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"  
    android:orientation="horizontal" >    

    <TextView    
        android:layout_weight="1"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="#98FB98"    
     />    
     <TextView    
        android:layout_weight="2"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="two"     
        android:background="#FFFF00"    
     />    
     <TextView    
        android:layout_weight="3"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="three"     
        android:background="#FF00FF"    
     />    

</LinearLayout>

2) matchparent (fillparent): This requires calculation

We write this simple code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    

    <TextView    
        android:layout_weight="1"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="#98FB98"    
     />    
     &lt;TextView    
        android:layout_weight="2"    
        android:layout_width="fill_parent"
```xml
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@drawable/ktv_line_div"
    android:orientation="vertical"
    android:showDividers="middle"
    android:dividerPadding="10dp"
    tools:context="com.jay.example.linearlayoutdemo.MainActivity" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />

</LinearLayout>

4. A Simple Example of LinearLayout:

The implementation code is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Please enter the phone number to save" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="right" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Save" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clear" />
    </LinearLayout>
</LinearLayout>

5. Notes:

An important issue to consider when using Layout_gravity!!! Problem content: Arrange two TextViews horizontally in a LinearLayout, with one on the left and one on the right, how to do it? You might immediately say: "Set gravity to left for one, and right for the other, and it's done!" Is it really that simple? Have you tried it? Write a simple layout and you will find that things don't go as expected: The code is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.jay.example.getscreendemo.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_gravity="left"
        android:background="#FF7878"
        android:gravity="center"
        android:text="O(∩_∩)O haha~" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_gravity="right"
        android:background="#FF7428"
        android:gravity="center"
        android:text="(*^__^*) Hehe..." />

</LinearLayout>

Running result image:

Seeing this, you might say: Oh, it really doesn't work, how about adding a gravity=left attribute to the outer LinearLayout, and then set the layout_gravity of the second TextView to right, let's try it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="left"
    tools:context="com.jay.example.getscreendemo.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:background="#FF7878"
        android:gravity="center"
        android:text="O(∩_∩)O haha~" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_gravity="right"
        android:background="#FF7428"
        android:gravity="center"
        android:text="(*^__^*) Hehe..." />

</LinearLayout>

The result is still the same:

Well, out of options, what to do?

>

**When android:orientation="vertical

❮ Merge Sort Android Tutorial Fragment Demo2 ❯