Android TableLayout in Kotlin
Android TableLayout is a ViewGroup subclass that is used to display the child View elements in rows and columns. It will arrange all the children’s elements into rows and columns and does not display any border lines between rows, columns or cells. The working of Android Table Layout is almost similar to an HTML table and it contains as many columns as a row with the most cells. So, in this article, you will learn about Table Layout in Android.
How to declare TableLayout and TableRow?
The TableLayout can be defined using <TableLayout> like below:
<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">
// Add Table rows here
</TableLayout>
and TableRow can be defined using
<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>
activity_main.xml file
In this file, we declare the TableLayout and start adding table rows with the help of TableRow. We are creating ranking table of players where we define four columns Rank, Name, Country and Points. The code for the Table is:
<?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
When we have created layout, we need to load the XML layout resource from our activity onCreate() callback method and access the UI element form the XML using findViewById.
package com.w3wiki.myfirstKotlinapp
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)
// finding the UI elements
}
}
TableLayout Output:
We need to run using Android Virtual Device(AVD) to see the output.
Conclusion
Android Table Layout in Kotlin is a useful tool for creating structured and responsive user interface. Table Layout in Android allows us for efficient organisation of UI elements in rows and columns that will increase the experience of users. You will learn about Android Table Layout in Kotlin by referring to this article.
Contact Us