Table Layout Code Snippet for Android Studio
Welcome. In this tutorial you will learn about Table layout in Android Studio.
Android Table Layout Example
A table layout is a type of layout which is divided into rows and columns. The UI elements are arranged accordingly in rows or columns. The TableRow property is used to define a row and you can insert as many cells inside a row as you want. Each cell can hold one or more UI element in it. Cells can even be empty.
The table will have as many columns as the row which has most number of cells. However the border of the cells will not be shown. The width of a cell depends on the widest cell in that row. You can also make certain columns shrinkable or stretchable, after which their width can be changed according to the space available. There are also other types of layouts available such as Linear Layout or Relative Layout.
Inserting a Table Layout in your Android Studio app
For inserting a Table layout in your app the <TableLayout> tag is used, as shown in the example below:-
|
1 2 3 4 5 6 7 8 9 10 11 |
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> </TableRow> </TableLayout> |
Here the TableLayout is used to create the layout and we can see that the TableRow is used to create a row. For creating cells, you will have to insert your UI elements inside the Table Row. As many elements you will insert, that many cells will be created.
Note:- You cannot predefine the width of cells in table layout. The cells will arrange themselves according to the parent width. However you can specify the height of the cells.
An example of Tale Layout is shown in the Image below:-
The Full Java Code along with the XML layout for creating the above UI is shown below:-
JAVA (MainActivity.java)
|
1 2 3 4 5 6 7 8 9 10 11 |
import android.app.Activity; import android.os.Bundle; public class TableLayout extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_table_layout); } } |
XML (activity_main.xml)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="Time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" /> <TextClock android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textClock" android:layout_column="2" /> </TableRow> <TableRow> <TextView android:text="First Name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" /> <EditText android:width="200px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow> <TextView android:text="Last Name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" /> <EditText android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> <RatingBar android:id="@+id/ratingBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="2" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"/> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Submit" android:id="@+id/button" android:layout_column="2" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> <Switch android:id="@+id/button1111" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_column="2" android:text="Switch" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent"> <RadioButton android:id="@+id/button1111" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_column="2" android:text="RadioButton" /> </TableRow> </TableLayout> |
You can directly copy paste these snippets to your android studio, and they should work perfectly. Just save and run your project. You can also try to play with various other layout settings on your own and see the corresponding changes accordingly. There are a variety of properties available which can be changed to make your UI more interesting.
For a more detailed guide, you can also visit android’s official guide below:-
https://developer.android.com/reference/android/widget/TableLayout
Comment down below if you are facing any problems.