Layouts in Android

Linear Layout

LinearLayout is one of the simplest layout types in Android. It is used to arrange user interface components in a single line. The components can be arranged either from top to bottom or from left to right depending on the orientation we choose. It is commonly used when we want to place elements in a simple sequence.

In a vertical orientation, the views are arranged from top to bottom. Each component is placed below the previous component. For example, if we place a TextView, an EditText, and a Button in a vertical LinearLayout, they will appear one below the other on the screen. This orientation is commonly used in forms such as login or registration screens.

In a horizontal orientation, the views are arranged from left to right. Each component is placed next to the previous component. For example, if we place two buttons inside a horizontal LinearLayout, they will appear side by side. This orientation is useful when we want to place items like buttons or images in a single row.

LinearLayout also supports a property called weight, which allows us to divide the available space among views. By using weights, developers can control how much space each view occupies inside the layout.

Overall, LinearLayout is easy to understand and is very useful for designing simple layouts in Android applications.

Table Layout

TableLayout is a layout that organizes user interface components in rows and columns, similar to a table in a spreadsheet. It is useful when we want to display data in a structured format.

In TableLayout, each row is created using a component called TableRow. Inside each TableRow, we can place views such as TextView, EditText, or Button. These views will automatically appear in columns within that row.

For example, if we want to create a simple form with labels and input fields, we can use a TableLayout where the first column contains labels and the second column contains EditText fields. This makes the layout look organized and aligned.

TableLayout automatically adjusts the width of columns based on the content inside them. It also allows developers to stretch or shrink columns if needed.

This layout is often used for data entry forms, schedules, and tabular information because it keeps the information neatly aligned.

Frame Layout

FrameLayout is the simplest layout in Android. It is designed to display a single view or to stack multiple views on top of each other.

In FrameLayout, all the views are placed in the top-left corner by default. If more than one view is added, the views will overlap each other like layers. The last view added will appear on top of the previous views.

FrameLayout is commonly used as a container for fragments or for displaying a single element such as an image or video. For example, if we want to display an image and place a text label on top of that image, we can use FrameLayout to stack them.

It is also frequently used in Android applications to manage dynamic content, such as replacing fragments in an activity.

FrameLayout is simple and flexible, but it is not suitable for complex layouts where many views need to be arranged in rows or columns.

Different types of layout demo

Step 1: Start an android project.

Step 2: In the strings.xml file write the following code.

<resources>
    <string name="app_name">Layouts Demo</string>

    <string name="Linear_Layout">Linear Layout Demo</string>
    <string name="Linear_Layout_Horizontal">Linear Layout (Horizontal)</string>
    <string name="Linear_Layout_Vertical">Linear Layout (Vertical)</string>

    <string-array name="array_layouts">
        <item>Select a layout</item>
        <item>Linear Layout Demo</item>
        <item>Table Layout</item>
        <item>Frame Layout</item>
    </string-array>

</resources>

Step 3: Design the first page as shown in the video.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="269dp"
        android:layout_height="79dp"
        android:layout_marginTop="150dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Create three pages namely linear_layout_demo, table_layout_demo, and frame_layout_demo and to do this, Right-click on layout folder and select New –> Activity –> Empty activity and then give a name to the activity. This will add new pages to the app.

Step 5: Design the newly added pages (linear_layout_demo, table_layout_demo, and frame_layout_demo) as shown in the video.

Step 6: Open MainActivity.java and write the following code.

package com.example.part_b2_layouts_demo;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Adapter;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity
        implements AdapterView.OnItemSelectedListener {

    String[] arr_layouts;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Spinner spin=(Spinner)findViewById(R.id.spinner);
        spin.setOnItemSelectedListener(this);

        arr_layouts=getResources().getStringArray(R.array.array_layouts);

        //Creating the ArrayAdapter instance having the layout list
        ArrayAdapter aa = new
                ArrayAdapter(this,android.R.layout.simple_spinner_item,arr_layouts);
        aa.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        //Setting the ArrayAdapter data on the Spinner
        spin.setAdapter(aa);
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        String s=((TextView)view).getText().toString();
        if(s.equals(arr_layouts[1].toString()))
            startActivity(new Intent(view.getContext(), Linear_Layout.class));
        if(s.equals(arr_layouts[2].toString()))
            startActivity(new Intent(view.getContext(), Table_Layout.class));
        if(s.equals(arr_layouts[3].toString()))
            startActivity(new Intent(view.getContext(), Frame_Layout.class));
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {

    }
}

Step 7: Run the project.