{"id":1002,"date":"2016-05-31T06:21:27","date_gmt":"2016-05-31T06:21:27","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1002"},"modified":"2019-06-12T11:15:34","modified_gmt":"2019-06-12T11:15:34","slug":"tablelayout","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/tablelayout","title":{"rendered":"Table Layout Tutorial With Example In Android"},"content":{"rendered":"<p>In Android, Table Layout is used to arrange the group of views into rows and columns. Table Layout containers do not display a border line for their columns, rows or cells. A Table will have as many columns as the row with the most cells.<\/p>\n<figure id=\"attachment_1979\" aria-describedby=\"caption-attachment-1979\" style=\"width: 374px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1979\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/Row-and-Column-in-Table-Layout-Android.jpg\" alt=\"Row and Column in Table Layout Android\" width=\"374\" height=\"271\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/05\/Row-and-Column-in-Table-Layout-Android.jpg 374w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/05\/Row-and-Column-in-Table-Layout-Android-300x217.jpg 300w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><figcaption id=\"caption-attachment-1979\" class=\"wp-caption-text\">Row and Column in Table Layout Android<\/figcaption><\/figure>\n<p>A table can also leave the cells empty but cells can\u2019t span the columns as they can in HTML(Hypertext markup language).<\/p>\n<hr \/>\n<h4><strong>Important Points About Table Layout In Android:<\/strong><\/h4>\n<ul>\n<li>For building a row in a table we will use the <code>&lt;TableRow&gt;<\/code> element. Table row objects are the child views of a table layout.<\/li>\n<li>Each row of the table has zero or more cells and each cell can hold only one view object like ImageView, TextView or any other view.<\/li>\n<li>Total width of a table is defined by its parent container<\/li>\n<li>Column can be both stretchable and shrinkable. If shrinkable then the width of column can be shrunk to fit the table into its parent object and if stretchable then it can expand in width to fit any extra space available.<\/li>\n<\/ul>\n<p><span style=\"color: #ff0000;\"><strong>Important Note:<\/strong><\/span>\u00a0We cannot specify the width of the children&#8217;s of the Table layout. Here, width always match parent width. However, the height attribute can be defined by a child; default value of height attribute is wrap content.<\/p>\n<hr \/>\n<h4><strong>Basic Table Layout code in XML:<\/strong><\/h4>\n<pre>&lt;TableLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:collapseColumns=\"0\"&gt; &lt;!-- collapse the first column of the table row--&gt;\r\n\r\n\r\n    &lt;!-- first row of the table layout--&gt;\r\n    &lt;TableRow\r\n        android:id=\"@+id\/row1\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"&gt;\r\n\r\n        &lt;!-- Add elements\/columns in the first row--&gt;\r\n        \r\n    &lt;\/TableRow&gt;\r\n&lt;\/TableLayout&gt;<\/pre>\n<hr \/>\n<h4><strong>Attributes of TableLayout in Android:<\/strong><\/h4>\n<p>Now let\u2019s we discuss some important\u00a0attributes that help us to configure a table layout in\u00a0XML\u00a0file (layout).<\/p>\n<p><strong><span style=\"color: #008000;\">1. id:<\/span>\u00a0<\/strong>id attribute is used to uniquely identify a Table Layout.<\/p>\n<pre>&lt;TableLayout\r\nandroid:id=\"@+id\/simpleTableLayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\/&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>2. stretchColumns: <\/strong><\/span>Stretch column attribute is used in Table Layout to change the default width of a column which is set equal to the width of the widest column but we can also stretch the columns to take up available free space by using this attribute. The value that assigned to this attribute can be a single column number or a comma delimited list of column numbers (1, 2, 3&#8230;n).<\/p>\n<p>If the value is 1 then the second column is stretched to take up any available space in the row, because of the column numbers are started from 0.<\/p>\n<p>If the value is 0,1 then both the first and second columns of table are stretched to take up the available space in the row.<\/p>\n<p>If the value is \u2018*\u2019 then all the columns are stretched to take up the available space.<\/p>\n<p>Below is the example code of stretch column attribute of table layout with explanation included in which we stretch the first column of layout.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n\r\n    &lt;TableLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n        android:id=\"@+id\/simpleTableLayout\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:stretchColumns=\"1\"&gt; &lt;!-- stretch the second column of the layout--&gt;\r\n\r\n        &lt;!-- first row of the table layout--&gt;\r\n        &lt;TableRow\r\n\r\n            android:id=\"@+id\/firstRow\"\r\n            android:layout_width=\"fill_parent\"\r\n            android:layout_height=\"wrap_content\"&gt;\r\n\r\n            &lt;!-- first element of the row--&gt;\r\n            &lt;TextView\r\n\r\n                android:id=\"@+id\/simpleTextView\"\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:background=\"#b0b0b0\"\r\n                android:padding=\"18dip\"\r\n                android:text=\"Text 1\"\r\n                android:textColor=\"#000\"\r\n                android:textSize=\"12dp\" \/&gt;\r\n\r\n            &lt;TextView\r\n\r\n                android:id=\"@+id\/simpleTextView\"\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:background=\"#FF0000\"\r\n                android:padding=\"18dip\"\r\n                android:text=\"Text 2\"\r\n                android:textColor=\"#000\"\r\n                android:textSize=\"14dp\" \/&gt;\r\n\r\n        &lt;\/TableRow&gt;\r\n    &lt;\/TableLayout&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1989\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/stretchColumns-in-Table-Layout-Android.jpg\" alt=\"stretchColumns in Table Layout Android\" width=\"705\" height=\"173\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/05\/stretchColumns-in-Table-Layout-Android.jpg 705w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/05\/stretchColumns-in-Table-Layout-Android-300x74.jpg 300w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>3. shrinkColumns: <\/strong><\/span>Shrink column attribute is used to shrink or reduce the width of the column\u2018s. We can specify either a single column or a comma delimited list of column numbers for this attribute. The content in the specified columns word-wraps to reduce their width.<\/p>\n<p>If the value is 0 then the first column\u2019s width shrinks or reduces by word wrapping its content.<\/p>\n<p>If the value is 0,1 then both first and second columns are shrinks or reduced by word wrapping its content.<\/p>\n<p>If the value is \u2018*\u2019 then the content of all columns is word wrapped to shrink their widths.<\/p>\n<p>Below is the example code of shrink column attribute of table layout with explanation included in which we shrink the first column of layout.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;TableLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:shrinkColumns=\"0\"&gt; &lt;!-- shrink the first column of the layout--&gt;\r\n\r\n\r\n    &lt;!-- first row of the table layout--&gt;\r\n    &lt;TableRow\r\n        android:id=\"@+id\/firstRow\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"&gt;\r\n\r\n        &lt;!-- first element of the first row--&gt;\r\n        &lt;TextView\r\n            android:layout_width=\"wrap_content\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:background=\"#b0b0b0\"\r\n            android:padding=\"18dip\"\r\n            android:text=\"Shrink Column Example\"\r\n            android:textColor=\"#000\"\r\n            android:textSize=\"18dp\" \/&gt;\r\n\r\n    &lt;\/TableRow&gt;\r\n&lt;\/TableLayout&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1990\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/shrinkColumns-in-Table-Layout-Android.jpg\" alt=\"shrinkColumns in Table Layout Android\" width=\"234\" height=\"169\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>4. collapseColumns: <\/strong><\/span>collapse columns attribute is used to collapse or invisible the column\u2019s of a table layout. These columns are the part of the table information but are invisible.<\/p>\n<p>If the values is 0 then the first column appears collapsed, i.e it is the part of table but it is invisible.<\/p>\n<p>Below is the example code of collapse columns with explanation included in which we collapse the first column of table means first column is an part of table but it is invisible so you can see only the second column in screenshot.<\/p>\n<pre>&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;\r\n&lt;TableLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:collapseColumns=\"0\"&gt; &lt;!-- collapse the first column of the table row--&gt;\r\n\r\n\r\n    &lt;!-- first row of the table layout--&gt;\r\n    &lt;TableRow\r\n        android:id=\"@+id\/simpleTableLayout\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"&gt;\r\n\r\n        &lt;!-- first element of the row that is the part of table but it is invisible--&gt;\r\n        &lt;TextView\r\n            android:layout_width=\"wrap_content\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:background=\"#b0b0b0\"\r\n            android:padding=\"18dip\"\r\n            android:text=\"Columns 1\"\r\n            android:textColor=\"#000\"\r\n            android:textSize=\"18dp\" \/&gt;\r\n\r\n        &lt;!-- second element of the row that is shown in the screenshot--&gt;\r\n        &lt;TextView\r\n            android:layout_width=\"wrap_content\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:background=\"#b0b0b0\"\r\n            android:padding=\"18dip\"\r\n            android:text=\"Columns 2\"\r\n            android:textColor=\"#000\"\r\n            android:textSize=\"18dp\" \/&gt;\r\n    &lt;\/TableRow&gt;\r\n&lt;\/TableLayout&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1991\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/collapseColumns-in-Table-Layout-Android.jpg\" alt=\"collapseColumns in Table Layout Android\" width=\"239\" height=\"218\" \/><\/p>\n<hr \/>\n<h4><strong>TableLayout Example In Android Studio:<\/strong><\/h4>\n<p>Below is an example of Table layout in Android\u00a0where\u00a0we display a login form with two fields user name and password and one login button and whenever a user click on that button a message will be displayed by using a Toast.<\/p>\n<p>Below you can download project code, see final output and step by step explanation of the example:<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"https:\/\/github.com\/abhisheksaini4\/TableLayoutExample\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a><a class=\"help\" title=\"Learn How To Download Code And Import In Android Studio\" href=\"\/androidstudio\/download-code-abhiandroid\" target=\"_blank\" rel=\"nofollow\"> ?<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1993\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/TableLayout-Example-In-Android-Studio.jpg\" alt=\"TableLayout Example In Android Studio\" width=\"238\" height=\"455\" srcset=\"https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/05\/TableLayout-Example-In-Android-Studio.jpg 238w, https:\/\/abhiandroid.com\/ui\/wp-content\/uploads\/2016\/05\/TableLayout-Example-In-Android-Studio-157x300.jpg 157w\" sizes=\"auto, (max-width: 238px) 100vw, 238px\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 1:<\/strong><\/span> Create a new project and name it TableLayoutExample<\/p>\n<p><span style=\"color: #008000;\"><strong>Step 2:<\/strong><\/span> Open res -&gt; layout -&gt;<strong>activity_main.<\/strong><strong>xml (or) main.xml<\/strong>\u00a0and add following code:<\/p>\n<p>In this step we open an xml file ( activity_main.xml ) and add the code for displaying username and password fields by using textview and edittext with one login button.<\/p>\n<pre>&lt;TableLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:background=\"#000\"\r\n    android:orientation=\"vertical\"\r\n    android:stretchColumns=\"1\"&gt;\r\n\r\n    &lt;TableRow android:padding=\"5dip\"&gt;\r\n\r\n        &lt;TextView\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_marginBottom=\"20dp\"\r\n            android:layout_span=\"2\"\r\n            android:gravity=\"center_horizontal\"\r\n            android:text=\"@string\/loginForm\"\r\n            android:textColor=\"#0ff\"\r\n            android:textSize=\"25sp\"\r\n            android:textStyle=\"bold\" \/&gt;\r\n    &lt;\/TableRow&gt;\r\n\r\n    &lt;TableRow&gt;\r\n\r\n        &lt;TextView\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_column=\"0\"\r\n            android:layout_marginLeft=\"10dp\"\r\n            android:text=\"@string\/userName\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"16sp\" \/&gt;\r\n\r\n        &lt;EditText\r\n            android:id=\"@+id\/userName\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_column=\"1\"\r\n            android:layout_marginLeft=\"10dp\"\r\n            android:background=\"#fff\"\r\n            android:hint=\"@string\/userName\"\r\n            android:padding=\"5dp\"\r\n            android:textColor=\"#000\" \/&gt;\r\n    &lt;\/TableRow&gt;\r\n\r\n    &lt;TableRow&gt;\r\n\r\n        &lt;TextView\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_column=\"0\"\r\n            android:layout_marginLeft=\"10dp\"\r\n            android:layout_marginTop=\"20dp\"\r\n            android:text=\"@string\/password\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"16sp\" \/&gt;\r\n\r\n        &lt;EditText\r\n            android:id=\"@+id\/password\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_column=\"1\"\r\n            android:layout_marginLeft=\"10dp\"\r\n            android:layout_marginTop=\"20dp\"\r\n            android:background=\"#fff\"\r\n            android:hint=\"@string\/password\"\r\n            android:padding=\"5dp\"\r\n            android:textColor=\"#000\" \/&gt;\r\n    &lt;\/TableRow&gt;\r\n\r\n\r\n    &lt;TableRow android:layout_marginTop=\"20dp\"&gt;\r\n\r\n        &lt;Button\r\n            android:id=\"@+id\/loginBtn\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_gravity=\"center\"\r\n            android:layout_span=\"2\"\r\n            android:background=\"#0ff\"\r\n            android:text=\"@string\/login\"\r\n            android:textColor=\"#000\"\r\n            android:textSize=\"20sp\"\r\n            android:textStyle=\"bold\" \/&gt;\r\n    &lt;\/TableRow&gt;\r\n&lt;\/TableLayout&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span> Open src -&gt; package -&gt;\u00a0<strong>MainActivity.<\/strong><strong>java<\/strong><\/p>\n<p>In this step we open\u00a0MainActivity\u00a0and\u00a0add the code to\u00a0initiate the edittext and button and then perform click event on button and display the message by using a Toast.<\/p>\n<pre>package example.abhiandriod.tablelayoutexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.widget.Button;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        \/\/ initiate a button\r\n        Button loginButton = (Button) findViewById(R.id.loginBtn);\r\n        \/\/ perform click event on the button\r\n        loginButton.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                Toast.makeText(getApplicationContext(), \"Hello AbhiAndroid..!!!\", Toast.LENGTH_LONG).show();  \/\/ display a toast message\r\n            }\r\n        });\r\n    }\r\n\r\n    \r\n}<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 4:<\/strong><\/span> Open res -&gt; values -&gt;\u00a0<strong>strings.<\/strong><strong>xml<\/strong><\/p>\n<p>In this step we open\u00a0string file which is used to store string data of the app.<strong>\u00a0<\/strong><\/p>\n<pre>&lt;resources&gt;\r\n    &lt;string name=\"app_name\"&gt;TableLayoutExample&lt;\/string&gt;\r\n    &lt;string name=\"hello_world\"&gt;Hello world!&lt;\/string&gt;\r\n    &lt;string name=\"action_settings\"&gt;Settings&lt;\/string&gt;\r\n    &lt;string name=\"loginForm\"&gt;Login Form&lt;\/string&gt;\r\n    &lt;string name=\"userName\"&gt;UserName&lt;\/string&gt;\r\n    &lt;string name=\"password\"&gt;Password&lt;\/string&gt;\r\n    &lt;string name=\"login\"&gt;LogIn&lt;\/string&gt;\r\n&lt;\/resources&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Output:<\/strong><\/span><\/p>\n<p>Now run the App and you will see the Login form UI which we designed in Table Layout.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Android, Table Layout is used to arrange the group of views into rows and columns. Table Layout containers do not display a border line for their columns, rows or cells. A Table will have as many columns as the row with the most cells. A table can also leave the cells empty but cells &hellip; <a href=\"https:\/\/abhiandroid.com\/ui\/tablelayout\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Table Layout Tutorial With Example In Android<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1002","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"<title>Table Layout Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on Table Layout with Example In Android Studio. In Android, Table Layout is used to arrange the group of views into rows and columns.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/tablelayout\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=1002"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1002\/revisions"}],"predecessor-version":[{"id":2801,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1002\/revisions\/2801"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=1002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}