Learn LinearLayout in android using these simple examples.

Contents hide
1 Example 1: Design VIBGYOR using LinearLayout
1.1 Step 1: Create Project
1.2 Step 2: Add Dependencies
1.3 Step 3: Prepare Colors
1.4 Step 3: Design Layouts
1.5 Step : Write Code
1.6 Run
1.7 Reference
2 Example 2: Design Credit Card UI
2.1 Step 1: Create Project
2.2 Step 2: Add Dependencies
2.3 Step 3: Design Layouts
2.4 Step : Write Code
2.5 Run
2.6 Reference

Example 1: Design VIBGYOR using LinearLayout

This example project will teach you the following concepts:

  1. How to use LinearLayout in XML to design a screen.
  2. LinearLayout horizontal and vertical orientation.

Here are the demo screenshots:

LinearLayout Example
LinearLayout Example

Step 1: Create Project

The first step is to create a Android Project in Android Studio.

Step 2: Add Dependencies

No special dependencies are needed.

Step 3: Prepare Colors

Create a color.xml file in in your values.xml folder and add the following colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="violet">#9400D3</color>
    <color name="indigo">#4B0082</color>
    <color name="blue">#0000FF</color>
    <color name="green">#00FF00</color>
    <color name="yellow">#FFFF00</color>
    <color name="orange">#FF7F00</color>
    <color name="red">#FF0000</color>
</resources>

Step 3: Design Layouts

Here is the layout for the MainActivity:

activity_main.xml

Place TextViews with various colors:

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

    <TextView
        android:layout_height="74dp"
        android:layout_width="match_parent"
        android:id="@+id/txtred"
        android:background="@color/red"
        android:text="red"/>

    <TextView
        android:layout_height="74dp"
        android:layout_width="match_parent"
        android:id="@+id/txtorange"
        android:background="@color/orange"
        android:text="orange"/>

    <TextView
        android:layout_height="74dp"
        android:layout_width="match_parent"
        android:id="@+id/txtyellow"
        android:background="@color/yellow"
        android:text="yellow"/>

    <TextView
        android:layout_height="74dp"
        android:layout_width="match_parent"
        android:id="@+id/txtgreen"
        android:background="@color/green"
        android:text="green"/>

    <TextView
        android:layout_height="74dp"
        android:layout_width="match_parent"
        android:id="@+id/txtblue"
        android:background="@color/blue"
        android:text="blue"/>

    <TextView
        android:layout_height="74dp"
        android:layout_width="match_parent"
        android:id="@+id/textindigo"
        android:background="@color/indigo"
        android:text="indigo"/>

    <TextView
        android:layout_height="74dp"
        android:layout_width="match_parent"
        android:id="@+id/textviolet"
        android:background="@color/violet"
        android:text="violet"/>

</LinearLayout>

Step : Write Code

Here is the code for the MainActivity:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number Link
1. Download code
2. Follow code author

Example 2: Design Credit Card UI

This example project will teach you the following concepts:

  1. How to use LinearLayout to design a Credit Card UI with EditTexts and Buttons
  2. Linearlayout horizontal and vertical orientation.

Here is the screenshot of what is created:

LinearLayout example
LinearLayout example

Step 1: Create Project

The first step is to create a Android Project in Android Studio.

Step 2: Add Dependencies

No third party dependencies are needed.

Step 3: Design Layouts

Add EditTexts and buttons organized using a LinearLayout in your MainActivity layout:

activity_main.xml

<?xml version="1.0" encoding="UTF-8"?>

    <LinearLayout
    tools:context=".MainActivity"
    android:background="#000000"
    android:orientation="vertical"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

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

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:textColor="#ffffff"
        android:text="Enter Card Balance($)"/>

    <EditText
        android:background="#D3D3D3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

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

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:textColor="#ffffff"
        android:text="Enter Yearly Interest Rate(%)"/>

    <EditText
        android:background="#D3D3D3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

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

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:textColor="#ffffff"
        android:text="Enter Minimum Payment($)"/>

    <EditText
        android:background="#D3D3D3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

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

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:textColor="#ffffff"
        android:text="Final Card Balance($)"/>

    <EditText
        android:background="#D3D3D3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

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

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:textColor="#ffffff"
        android:text="Months Remaining"/>

    <EditText
        android:background="#D3D3D3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

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

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:textColor="#ffffff"
        android:text="Interest Paid Will Be($)"/>

    <EditText
        android:background="#D3D3D3"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_weight="1"/>

</LinearLayout>

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

    <Button
        android:background="#ffffff"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Compute"
        android:layout_marginBottom="10dp"/>

    <Button
        android:background="#ffffff"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:text="Clear"/>

</LinearLayout>

</LinearLayout>

Step : Write Code

Here is the MainActivity code:


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number Link
1. Download code
2. Follow code author