Posted :
A
TableLayout
is first of all a
LinearLayout with a vertical
orientation
, so the properties
of LinearLayout ,
such as weight , apply to a TableLayout .
layout_weight is just how the remaining free
space is divided .
Home
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableRow
android:layout_weight="1"
android:background="@color/colorAccent"/>
<Button
android:layout_weight="1"
android:background="@color/colorPrimaryDark" />
<TextView
android:layout_weight="1"
android:background="@android:color/holo_orange_light" />
</TableLayout>
A
TableLayout
can contain
0 or more
table rows , where a row can either be
a View or a
TableRow .
A View
such as
an ImageView , or a
Button will have a width
of MATCH_PARENT , and
a default height of WRAP_CONTENT .
The VIEW height can be changed .
A TableRow is
a class which
extends LinearLayout , and
which has a horizontal orientation .
A TableRow width , is always set
to match its parent , as in MATCH_PARENT ,
and its height , is always set to wrap its content ,
as in WRAP_CONTENT .
A TableRow being
a LinearLayout , the
concept of weight
,
equally applies .
layout_weight
being how the
remaining free space is divided .
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableRow android:layout_weight="1"
android:background="@color/colorAccent">
<Button
android:layout_gravity="center_vertical"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:text="Button 1"
android:textColor="@android:color/white" />
<Button
android:layout_gravity="bottom"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:text="Button 2"
android:textColor="@android:color/white" />
<Button
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@android:color/black"
android:text="Button 3"
android:textColor="@android:color/white" />
</TableRow>
<TableRow android:layout_weight="1"
android:background="@color/colorPrimaryDark" />
<Button
android:layout_weight="1"
android:text="A Button"
android:textColor="@android:color/white"
android:background="@android:color/holo_orange_light" />
</TableLayout>
An added feature
of the Tablelayout
is the concept of cells and columns .
A cell is just a row's child .
A column is formed of cells in the vertical direction . The number of columns , is the max number of cells for all rows . The width of a column , is the largest width of its given cells , and the width of the cells in a column , will match the width of the column , unless weighting is being used .
<!-- Example three -->
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="250dp" />
<Button
android:layout_width="100dp" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp" />
<Button />
</TableRow>
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="1dp"
android:layout_weight="1" />
<Button
android:layout_width="1dp"
android:layout_weight="1" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_weight="1" />
</TableRow>
<TextView android:background="@android:color/holo_orange_light" />
</TableLayout>
In
a TableLayout , the
android:collapseColumns
attribute can be
used to control if one or more columns
are to be collapsible
, hence hidden . This is done
by specifying the index of columns to be collapsed ,
separated by commas , as in android:collapseColumns="0"
or android:collapseColumns="0,3" .
So given the previous
example , if the column
at index 0
is set to be collapsible , as in :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:collapseColumns="0">
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="250dp" />
<Button
android:layout_width="100dp" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp" />
<Button />
</TableRow>
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="1dp"
android:layout_weight="1" />
<Button
android:layout_width="1dp"
android:layout_weight="1" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_weight="1" />
</TableRow>
<TextView android:background="@android:color/holo_orange_light" />
</TableLayout>
Then the new outcome in comparison to the older outcome , is :
A
column can also be
set as being stretchable
,
in its TableLayout , by using the
TableLayout attribute
android:stretchColumns . One
or more indexes can be specified , as in ,
android:stretchColumns="0" , or
android:stretchColumns="1,3" . In
such a case , the specified columns will be stretched to fill
the available empty space .
So if
example three is to be reconsidered
,
the column at index 1 is set to be
stretchable , as follows :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:stretchColumns="1" >
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="250dp" />
<Button
android:layout_width="100dp" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp" />
<Button />
</TableRow>
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="1dp"
android:layout_weight="1" />
<Button
android:layout_width="1dp"
android:layout_weight="1" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_weight="1" />
</TableRow>
<TextView android:background="@android:color/holo_orange_light" />
</TableLayout>
Comparing example three result , with the current result , yields :
A
column can also be
set to be shrinkable
,
in its TableLayout , by using
the TableLayout attribute ,
android:shrinkColumns , where
1 or more columns , separated
by a comma , can be specified , as in
android:shrinkColumns="1,4" .
In this case , the specified columns , will
shrink , to accomodate the TableLayout
width .
So if
example three is to be retaken
, and
if a width of 300dp is specified ,
with the android:shrinkColumns="1"
attribute being set , as follows :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="300dp"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:shrinkColumns="1">
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="250dp" />
<Button
android:layout_width="100dp" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp" />
<Button />
</TableRow>
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="1dp"
android:layout_weight="1" />
<Button
android:layout_width="1dp"
android:layout_weight="1" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_weight="1" />
</TableRow>
<TextView android:background="@android:color/holo_orange_light" />
</TableLayout>
Then
in comparison to not setting
the
shrinkColumns
attribute , the result will be :
Since the number of columns in a row , is specified as being the max number of cells for all rows , what if what is needed , is to have some rows which have fewer cells , or in other words cells which span multiple columns ?
The answer to this question , is to use
the android:layout_span
attribute , as in
android:layout_span="2" ,
to specify the number of columns
a cell will span , which means
the number of columns a cell
will take .
A
cell always follows the natural flow of positioning , and it
can be positioned in a specific
column , using the
layout_column attribute , as
in android:layout_column="1" . So
in this example , it will be positioned in
column 1 .
An example
about the earlier 2
attributes is :
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="250dp" />
<Button
android:layout_width="100dp" />
<Button
android:layout_width="50dp" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp" />
<Button />
</TableRow>
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_width="1dp"
android:layout_weight="1" />
<Button
android:layout_width="1dp"
android:layout_weight="1" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_width="0dp"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_weight="1" />
</TableRow>
<TableRow android:background="@color/colorPrimary">
<Button
android:layout_column="1" />
</TableRow>
<TableRow android:background="@color/colorAccent">
<Button
android:layout_column="1"
android:layout_span="2"
/>
</TableRow>
<TextView android:background="@android:color/holo_orange_light" />
</TableLayout>
The outcome of the previous xml code is as follows :
