Android TableLayout With Alternative Row Color

By | July 4, 2015

We have seen how to create Table Layout in android , in this tutorial we will see how to set the alternative row color for TableRow inside the TableLayout , when ever are dealing with table layout that fetch data from database and when the table layout grow large ,adding alternative color to the rows makes it looks impressive and also it improves the readability for the end user .

XML Layout

file : activity_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    android:id=”@+id/tablelayout”
    android:layout_width=”match_parent”
    android:layout_height=”wrap_content”
    android:layout_below=”@+id/trainsearchLayout”
    android:layout_marginLeft=”7dp”
    android:layout_marginRight=”7dp”
    android:layout_marginTop=”10dp”
    android:stretchColumns=”*” >

    <!– First Row –>
    <TableRow style=”@style/tablerow_style” >

        <TextView
            style=”@style/textview_style”
            android:text=”R1 C1″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R1 C2″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R1 C3″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R1 C4″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R1 C5″ />
    </TableRow>

    <!– Second Row –>
    <TableRow style=”@style/tablerow_style” >

        <TextView
            style=”@style/textview_style”
            android:text=”R2 C1″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R2 C2″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R2 C3″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R2 C4″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R2 C5″ />
    </TableRow>

    <!– Third Row –>
    <TableRow style=”@style/tablerow_style” >

        <TextView
            style=”@style/textview_style”
            android:text=”R3 C1″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R3 C2″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R3 C3″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R3 C4″ />

        <TextView
            style=”@style/textview_style”
            android:text=”R3 C5″ />
    </TableRow>

</TableLayout>

Drawable

file : row_color.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
    android:shape=”rectangle” >

    <solid android:color=”#ffffff” />

    <stroke
        android:width=”1dp”
        android:color=”#e5e5e5″ />

</shape>

file : alt_row_color.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
    android:shape=”rectangle” >

    <solid android:color=”#ABCCF2″ />

    <stroke
        android:width=”1dp”
        android:color=”#e5e5e5″ />

</shape>

Activity

file : MainActivity.java

package com.tutorialsbuzz.tablealtrow;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;

public class MainActivity extends Activity {

TableLayout tablelayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);
tablelayout = (TableLayout) findViewById(R.id.tablelayout);

altTableRow(2);

}

public void altTableRow(int alt_row) {
int childViewCount = tablelayout.getChildCount();

for (int i = 0; i < childViewCount; i++) {
TableRow row = (TableRow) tablelayout.getChildAt(i);

for (int j = 0; j < row.getChildCount(); j++) {

TextView tv = (TextView) row.getChildAt(j);
if (i % alt_row != 0) {
tv.setBackground(getResources().getDrawable(
R.drawable.alt_row_color));
} else {
tv.setBackground(getResources().getDrawable(
R.drawable.row_color));
}

}

}
}

}

More On Android TableLayout

  1. Android Table Layout 
  2. Android Buidling TableLayout Dynamically At Runtime
  3. Android Loading SQLite Data Into TableLayout
  4. Android TableLayout With Alternative Column Color