How to Create Table In Android Studio ।। TableLayout In Android।। - RSM Developer

 

Table Layout in android

Step 1: Creating a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code:

In this step we open an XML file and add the code :-

<?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:background="@color/white"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--
    * Created by RSM Developer on 18-01-2023.
    * Follow Facebook : https://www.facebook.com/RSMDeveloper
    * Subscribe Youtube : https://www.youtube.com/@RSMDeveloper
    * Visit Website : https://rsmdeveloper.blogspot.com/
    * Developed Your Creativity With RSM Developer
    -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="Sura List"
        android:gravity="center"
        android:background="#009688"
        android:textColor="@color/black"
        android:textSize="40sp" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">

        <!-- Table Heading -->

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="#E91E63"
            android:weightSum="3">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="Sl"
                android:textColor="@android:color/white"
                android:textSize="30sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="Name"
                android:textColor="@android:color/white"
                android:textSize="30sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="Ayat"
                android:textColor="@android:color/white"
                android:textSize="30sp" />


        </TableRow>

        <!-- Table Data 1-->

        <TableRow
            android:id="@+id/sf"
            android:clickable="true"
            android:foreground="?attr/selectableItemBackground"
            android:background="#03A9F4"
            android:weightSum="3">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="01"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="Al-Faatiha"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="07"
                android:textColor="@color/black"
                android:textSize="20sp" />

        </TableRow>
        <!-- Table Data 2-->
        <TableRow
            android:background="#00BCD4"
            android:weightSum="3">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="02"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="Al-Baqara"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="286"
                android:textColor="@color/black"
                android:textSize="20sp" />

        </TableRow>

        <!-- Table Data 3-->
        <TableRow
            android:background="#4CAF50"
            android:weightSum="3">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="03"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="Aal-i-Imraan"
                android:textColor="@color/black"
                android:textSize="20sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:padding="10sp"
                android:text="200"
                android:textColor="@color/black"
                android:textSize="20sp" />

        </TableRow>

    </TableLayout>


</LinearLayout>

Step 3: Open Java -> package – > MainActivity.Java and add following code:

In this step we open an Java file and add the code :-

package com.rsmdeveloper.tableproject;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TableRow;
    /**------------------------------------------------------------
        * Created by RSM Developer on 18-01-2023.
        * Follow Facebook : https://www.facebook.com/RSMDeveloper
        * Subscribe Youtube : https://www.youtube.com/@RSMDeveloper
        * Visit Website : https://rsmdeveloper.blogspot.com/
        * Developed Your Creativity With RSM Developer
        -------------------------------------------------------------**/
public class MainActivity extends AppCompatActivity {
    TableRow sf;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sf = findViewById(R.id.sf);

        sf.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, Faatiha.class);
                startActivity(intent);
            }
        });
    }
}

Step 4: Create your New Empty Activity 

Output:
Now run the App and you will see main topics and sub-topics listed.....

Watch this video