LinearLayout in android with example codes

367

What is LinearLayout:

LinearLayout, also known as linear layout, is a very commonly used layout. As its name describes, this layout will arrange the controls it contains in a linear direction. Since it is a linear arrangement, there must be more than one direction. This is because we have specified that the arrangement direction is vertical through the android:orientation attribute. If you specify it is horizontal, the controls will be arranged in the horizontal direction. Let’s experience it through actual combat and modify the code in activity_main.xml is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2" />

<Button

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 3" />

</LinearLayout>

We have added three Buttons in LinearLayout, the length and width of each Button are wrap_content, and Specifies that the arrangement direction is vertical. Now run the program, the effect is shown in Figure 1.

Then we modify the arrangement direction of LinearLayout as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
……
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal" >

……

</LinearLayout>

Change the value of the android:orientation attribute to horizontal, which means to let the control in LinearLayout The pieces are arranged in order in the horizontal direction. Of course, if the value of the android:orientation attribute is not specified, the default arrangement direction is It is horizontal. Re-run the program, the effect is shown in Figure 2.

It should be noted here that if the arrangement direction of LinearLayout is horizontal, the internal controls must not be The width is specified as match_parent, because a single control will fill the entire horizontal direction, and other controls There is no place to put the pieces. In the same way, if the arrangement direction of LinearLayout is vertical, the internal control File cannot specify the height as match_parent. Knowing the arrangement rules of LinearLayout, let’s learn the usage of several key attributes. First look at the android:layout_gravity attribute, which is similar to the android:gravity attribute.

They look similar. What is the difference between these two attributes? In fact, it can be seen from the name that android:gravity is used To specify the alignment of the text in the control, and android:layout_gravity is used to specify the alignment of the control in the layout the way. The optional value of android:layout_gravity is similar to android:gravity, but it needs to be noted that when When the arrangement direction of LinearLayout is horizontal, only the alignment in the vertical direction will take effect. The length in the square direction is not fixed, each time a control is added, the length in the horizontal direction will change, so it cannot be specified The alignment in this direction. In the same way, when the arrangement direction of LinearLayout is vertical, only horizontal The upward alignment will take effect. Modify the code in activity_main.xml as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button 2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button 3" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal" >

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="top"

android:text="Button 1" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:text="Button 2" />

<Button

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:text="Button 3" />

</LinearLayout>

Since the current arrangement direction of LinearLayout is horizontal, we can only specify the arrangement in the vertical direction Direction, specify the alignment of the first Button as top, and the alignment of the second Button as center_vertical, The alignment of the third Button is specified as bottom. Re-run the program, the effect is shown in Figure 3.

Next we learn another important attribute in LinearLayout, android:layout_weight. This attribute allows us to use the proportional method to specify the size of the control, it can play a very important role in the adaptability of the mobile phone screen The role of. For example, we are writing a message sending interface, we need a text edit box and a send button, modify The code in activity_main.xml is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type something"
/>
<Button
android:id="@+id/send"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Send"
/>
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal" >

<EditText

android:id="@+id/input_message"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:hint="Type something"

<Button

android:id="@+id/send"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:text="Send"

</LinearLayout>

You will find that the width of EditText and Button are both specified as 0, so that the text edit box and button Can it still be displayed? Don’t worry, because we use the android:layout_weight attribute, the width of the control at this time It should not be determined by android:layout_width anymore. Specifying 0 here is a more standard way of writing. Then we specify the value of the android:layout_weight attribute as 1 in both EditText and Button, which means EditText and Button will halve the width in the horizontal direction. Re-run the program and you will see the effect shown in Figure 4.

Why does the android:layout_weight attribute value being specified as 1 at the same time, the screen width will be divided equally? Actually the principle It is also very simple. The system will first add up the layout_weight values specified by all controls under LinearLayout to get a total value. Then the ratio of the size of each control is divided by the layout_weight value of the control by the total value just calculated. So as If you want EditText to occupy 3/5 of the screen width and Button to occupy 2/5 of the screen width, you only need to Change the layout_weight to 3 and the layout_weight of the Button to 2. We can also achieve better results by specifying the layout_weight value of some controls. Modify The code in activity_main.xml is as follows:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="@+id/input_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Type something"
/>
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
/>
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal" >

<EditText

android:id="@+id/input_message"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1"

android:hint="Type something"

<Button

android:id="@+id/send"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Send"

</LinearLayout>

Here we only specify the android:layout_weight attribute of EditText and change the width of the Button back to wrap_content. This means that the width of the Button is still calculated according to wrap_content, while the EditText will fill the screen All the remaining space on the screen. The interface written in this way will not only be very good in adapting to various screens, but also It also looks more comfortable, re-run the program, the effect is shown in Figure 5.

Amazon Purchase Links:

Best High Quality PC Mic

Computer Accessories

*Please Note: These are affiliate links. I may make a commission if you buy the components through these links. I would appreciate your support in this way!