How to create TabLayout in android app

How to create TabLayout  in android app

In this article today learn  table layout in android studio table layout is an android pallete this is display data on the rows and columns.

Tabs are created using a newTab() method of TabLayout class. The title and icon of Tabs are set through setText(int) and setIcon(int) methods of TabListener interface respectively. Tabs of layout are attached over TabLayout using the method addTab(Tab) method.

What is TabLayout?

Android TabLayout provides a horizontal layout to display tabs. We can display more screens in a single screen using tabs. Users can swipe the tabs quickly as you can see in the image below.

 

Follow the example android table layout:

1.MainActivity.java:

package com.akash.tablelayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

}

2.activity_main.xml:

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_marginTop="10dp">

    <TableRow

        android:background="#607D8B"

        android:padding="5dp">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Version" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Version Name" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="API Level" />

    </TableRow>

    <TableRow

        android:background="#ECEFF1"

        android:padding="5dp">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="5.0" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Android Lollipop" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="21" />

    </TableRow>

    <TableRow

        android:background="#ECEFF1"

        android:padding="5dp">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="4.4" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Android Kitkat" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="19" />

    </TableRow>

    <TableRow

        android:background="#ECEFF1"

        android:padding="5dp">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="4.3" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="Android Jelly Bean" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="18" />

    </TableRow>

</TableLayout>

3.dimens.xml:

<resources>

    <!-- Default screen margins, per the Android Design guidelines. -->

    <dimen name="activity_horizontal_margin">16dp</dimen>

    <dimen name="activity_vertical_margin">16dp</dimen>

    <dimen name="fab_margin">16dp</dimen>

</resources>

4.AndroidManifest.xml:

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

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

    xmlns:tools="http://schemas.android.com/tools"

    package="com.akash.tablelayout">

    <application

        android:allowBackup="true"

        android:icon="@mipmap/ic_launcher"

        android:label="@string/app_name"

        android:roundIcon="@mipmap/ic_launcher_round"

        android:supportsRtl="true"

        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

 

5.Output: