Cara Mudah Membuat Table Layout Dan Table Row Untuk Aplikasi Android

0

TableLayout pada Android adalah subkelas ViewGroup yang digunakan untuk menampilkan elemen View child dalam baris dan kolom. Hal  Ini akan mengatur semua elemen child menjadi baris (Row) dan kolom (Column) serta tidak menampilkan garis batas di antara baris, kolom atau cells.

Cara kerja TableLayout hampir mirip dengan tabel HTML dan berisi kolom sebanyak baris dengan cells terbanyak.

Langkah Membuat TableLayout dan TableRow

Kita bisa membuat Table Layout dengan perintah <TableLayout> seperti dibawah ini :

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

    android:layout_width=”match_parent”

    android:layout_height=”match_parent”

    android:layout_marginTop=”10dp”

    android:paddingLeft=”5dp”

    android:paddingRight=”5dp”>

    // tambahkan table row disini

</TableLayout>

Sedangkan untuk TableRow  :

<TableRow android:background=”#51B435″ android:padding=”10dp”>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Rank” />

</TableRow>

Setting File activity_main.xml

Di file ini, kita mendeklarasikan TableLayout dan mulai menambahkan baris tabel dengan bantuan TableRow.

Anggaplah Kita akan membuat sebuat tabel peringkat Pemain suatu game online dengan membuat empat kolom dengan nama Ranking, Name, Team, dan Point.

Kode untuk Tabelnya adalah:

<?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”

    android:paddingLeft=”5dp”

    android:paddingRight=”5dp”>

    <TextView

        android:id=”@+id/txt”

        android:layout_width=”wrap_content”

        android:layout_height=”wrap_content”

        android:text=”ICC Ranking of Players:”

        android:textSize = “20dp”

        android:textStyle=”bold”>

    </TextView>

    <TableRow android:background=”#51B435″ android:padding=”10dp”>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Rank” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Player” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Team” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Points” />

    </TableRow>

    <TableRow android:background=”#F0F7F7″ android:padding=”5dp”>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”1″ />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Virat Kohli” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”IND” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”895″ />

    </TableRow>

    <TableRow android:background=”#F0F7F7″ android:padding=”5dp”>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”2″ />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Rohit Sharma” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”IND” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”863″ />

    </TableRow>

    <TableRow android:background=”#F0F7F7″ android:padding=”5dp”>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”3″ />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Faf du Plessis” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”PAK” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”834″ />

    </TableRow>

    <TableRow android:background=”#F0F7F7″ android:padding=”5dp”>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”4″ />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Steven Smith” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”AUS” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”820″ />

    </TableRow>

    <TableRow android:background=”#F0F7F7″ android:padding=”5dp”>

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”5″ />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”Ross Taylor” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”NZ” />

        <TextView

            android:layout_width=”wrap_content”

            android:layout_height=”wrap_content”

            android:layout_weight=”1″

            android:text=”817″ />

    </TableRow>

</TableLayout>

MainActivity.kt

Jika sudah membuat layout tablenya, kita perlu memuat resource layout  XML nya dari activity kita dengan metode panggilan balik onCreate () dan mengakses elemen UI dari XML menggunakan findViewById.

package com.contohtabellayout.aplikasisaya

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle  

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

    }

}

Jalankan programnya dengan menggunakan Android Virtual Device (AVD) untuk melihat hasil outputnya :

Sumber : geeksforgeeks.org

Share.

About Author

Techfor Id

Leave A Reply