How to create a table by using TableLayout in Android Studio?

89,341

Solution 1

enter image description here

layout xml file for you just copy paste it and edit according to your choice:

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

android:layout_width="fill_parent"
android:layout_height="match_parent"
    android:stretchColumns="0,1,2"
    android:gravity="center">

    <TableRow
        android:background="#FFFFFF"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_margin="1dp"
        android:layout_weight="1"
        >
        <TableRow
            android:background="#000000"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_margin="1dp"
            android:layout_weight="1"
            >



        </TableRow>
    </TableRow>
<TableRow
    android:background="#000000"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_margin="1dp"
    android:layout_weight="1"

    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text=" Date "
        android:layout_margin="1dp"
        android:layout_column="0"
        android:background="#FFFFFF"
        android:textStyle="bold"
        android:gravity="center"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Miles "
        android:layout_margin="1dp"
        android:layout_column="1"
        android:background="#FFFFFF"
        android:gravity="center"
        android:textStyle="bold"
      />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Calories"
        android:layout_margin="1dp"
        android:background="#FFFFFF"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_column="2"
       />
</TableRow>

    <TableRow
        android:background="#000000"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_margin="1dp"
        android:layout_weight="1"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:layout_column="0"
            android:background="#FFFFFF"
            android:gravity="center"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:layout_column="1"
            android:background="#FFFFFF"
            android:gravity="center"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:layout_column="2" />
    </TableRow>



    <TableRow
        android:background="#000000"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_margin="1dp"
        android:layout_weight="1"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:layout_column="0"
            android:background="#FFFFFF"
            android:gravity="center"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:layout_column="1"
            android:background="#FFFFFF"
            android:gravity="center"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:layout_column="2" />
    </TableRow>

    <TableRow
        android:background="#000000"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_margin="1dp"
        android:layout_weight="1"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:layout_column="0"
            android:background="#FFFFFF"
            android:gravity="center"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:layout_column="1"
            android:background="#FFFFFF"
            android:gravity="center"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text=" Text"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:gravity="center"
            android:layout_column="2" />
    </TableRow>


</TableLayout>

Solution 2

A layout that arranges its children into rows and columns. A TableLayout consists of a number of TableRow objects, each defining a row (actually, you can have other children, which will be explained below). TableLayout containers do not display border lines for their rows, columns, or cells.

<TableLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff">


                        <!-- Row 1 with single column -->
                        <TableRow
                            android:layout_height="wrap_content"
                            android:layout_width="fill_parent"
                            android:gravity="center_horizontal">





                       </TableRow>

                        <!-- Row 2 with 3 columns -->


                        <TableRow
                            android:id="@+id/tableRow1"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">

                            <TextView
                                android:id="@+id/TextView04" android:text="DATE"
                                android:layout_weight="1" android:background="#dcdcdc"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                            <TextView
                                android:id="@+id/TextView04" android:text="Miles"
                                android:layout_weight="1" android:background="#d3d3d3"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                            <TextView
                                android:id="@+id/TextView04" android:text="Calories"
                                android:layout_weight="1" android:background="#cac9c9"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                        </TableRow>

<!-- Row 3 with 3 columns -->


                        <TableRow
                            android:id="@+id/tableRow2"
                            android:layout_height="wrap_content"
                            android:layout_width="match_parent">

                            <TextView
                                android:text=""
                                android:layout_weight="1" android:background="#dcdcdc"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                            <TextView
                                android:text=""
                                android:layout_weight="1" android:background="#d3d3d3"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                            <TextView

                                android:layout_weight="1" android:background="#cac9c9"
                                android:textColor="#000000"
                                android:padding="20dip" android:gravity="center"/>

                        </TableRow>



      </TableLayout>

Solution 3

try this code it will help you

simple_tablelayout.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TableLayout
    android:id="@+id/tabla_cuerpo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/id_cad_details_dialog_key"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/cell_shape"
            android:padding="5dp"
            android:textColor="#000"
            android:text="TextView">
        </TextView>
        <TextView
            android:id="@+id/id_cad_details_dialog_value"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/cell_shape"
            android:padding="5dp"
            android:text="TextView"
            android:textAppearance="?android:attr/textAppearanceMedium">
        </TextView>
    </TableRow>
</TableLayout>

cell_shape.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape= "rectangle"  >
    <solid android:color="#fff"/>
    <stroke android:width="1dp"
        android:color="#000"/>
</shape>
Share:
89,341

Related videos on Youtube

Ka Chun Yim
Author by

Ka Chun Yim

Updated on July 09, 2022

Comments

  • Ka Chun Yim
    Ka Chun Yim almost 2 years

    Can some one provides a sample code for me to reference? I want to create the table which likes the photo below.

    TABLE:

    enter image description here

    • vipin agrahari
      vipin agrahari over 8 years
    • Androider
      Androider over 8 years
      did you find solution, check below with screenshot made in android studio
    • Ka Chun Yim
      Ka Chun Yim over 8 years
      I had seen the solutions. Thanks for all.
  • cesargastonec
    cesargastonec almost 7 years
    Concisely, simply and efficiently. If I could give more than one point I would.