Runtah: Android beginner tutorial Part 7 LinearLayout container

Wednesday, February 4, 2015

Android beginner tutorial Part 7 LinearLayout container

Today well take a look at the LinearLayout container.

The LinearLayout container stacks its children either horizontally or vertically, one after another. To set the orientation, you need to use the android:orientation attribute of the tag.

Lets edit the code from our previous tutorial to create an Activity layout which consists of a LinearLayout with horizontal orientation and 3 children. Set the width and height of the layout tag to match_parent, and set each buttons width and height to wrap_content:

<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=".MainActivity" >

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

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

The results:

Lets see what happens if we set orientation to vertical:

<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="vertical"
    tools:context=".MainActivity" >

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

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

Results:

You can also use a very useful attribute called layout_weight for children of a LinearLayout.

This attribute basically sets the priority level for this child. The values for this attribute are numbers. The whole weight system is comparable to a cooking recipe, for example: 3 parts of milk and 2 parts of ice cream. This means that in the final product there will be 60% milk and 40% ice cream.

If we use a horizontal linear layout, we can use the layout_weight attribute to make interface elements flex depending on the device screen size. Heres an example, which gives the first button 1/6 of the total width, the second button 1/3 (2/6) of the width and the third button 1/2 (3/6) of the whole row width.

<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=".MainActivity" >

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test 2"
        android:layout_weight="2"/>
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test 3"
        android:layout_weight="3"/>
    
</LinearLayout>

The results:

You can also use LinearLayouts inside other LinearLayouts. Heres an example:

<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="vertical"
    tools:context=".MainActivity" >
    
<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test 2"
        android:layout_weight="2"/>
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test 3"
        android:layout_weight="3"/>
    
</LinearLayout>

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

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

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

Results:

Thats all for today!

Thanks for reading!

Runtah

Wednesday, February 4, 2015

Android beginner tutorial Part 7 LinearLayout container

No comments:

Post a Comment