Android Linear Layout In XML and Code

In a linear layout, as the name suggests, all the elements or Views (like TextView , button ,…) inside this layout are displayed in a linear fashion, either Horizontally or Vertically and this behavior is set in android: orientation which is an attribute of the node Linear Layout.


LinearLayout Horizontal Orientation


In case of horizontal placement of elements in linear layout set the property to attribute android:setOrientation="horizontal" inside Linear Layout node .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textSize="22sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textSize="22sp" />
    
</LinearLayout>

LinearLayout Vertical Orientation


In case of vertical placement of elements in linear layout set the property to android: setOrientation ="vertical" inside Linear Layout node .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textSize="22sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textSize="22sp" />

</LinearLayout>

If you want to specify or equally space views inside LinearLayout use android:weightSum property .
android:weightSum : defines the maximum weight sum, and is calculated as the sum of the layout_weight of all the children if not specified explicitly.

LinearLayout Horizontal WeightSum


Let's consider an example with a LinearLayout with horizontal orientation and 3 TextView inside it. Now we want these TextView always to take equal space. To acheive this, you can set the layout_weight of each ImageView to 1 and the weightSum will be calculated to be equal to 3 .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:weightSum="3"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/red"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textColor="@color/white"
        android:textSize="22sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/green"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textColor="@color/white"
        android:textSize="22sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/blue"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textColor="@color/white"
        android:textSize="22sp" />

</LinearLayout>


LinearLayout Vertical WeightSum


Let's consider an example with a LinearLayout with vertical orientation and 3 TextView inside it. Now we want these TextView always to take equal space. To acheive this, you can set the layout_weight of each ImageView to 1 and the weightSum will be calculated to be equal to 3 .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="3"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/red"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textColor="@color/white"
        android:textSize="22sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/green"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textColor="@color/white"
        android:textSize="22sp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/blue"
        android:padding="16dp"
        android:text="@string/text_label"
        android:textColor="@color/white"
        android:textSize="22sp" />

</LinearLayout>

Linear Layout In Code 


package com.tutorialsbuzz.linearlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.view.ContextThemeWrapper;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    FrameLayout mRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRootView = findViewById(R.id.rootView);

        LinearLayout parent = new LinearLayout(MainActivity.this);
        parent.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
        parent.setOrientation(LinearLayout.HORIZONTAL);

        LinearLayout.LayoutParams textViewLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);

        TextView tv1 = new TextView(new ContextThemeWrapper(MainActivity.this, R.style.TextStyle));
        tv1.setLayoutParams(textViewLayoutParams);

        TextView tv2 = new TextView(new ContextThemeWrapper(MainActivity.this, R.style.TextStyle));
        tv1.setLayoutParams(textViewLayoutParams);

        parent.addView(tv1);
        parent.addView(tv2);

        mRootView.addView(parent);

    }
}

No comments:

Post a Comment