Implementing Android Table Layout To Format App Contents Efficiently

Do you remember using <table> tag while creating HTML webpages? Well, the concept of Android Table Layout works similar to the HTML tables. The table layout android is an extension of Linear Layout. And as the name suggests, the Android tablelayout is used to format app elements in columns and rows.

Android Table Layout Example

In today’s Android app tutorial, we’ll be creating a table layout android to display the android versions. Each row in this table will have 3 cells containing the version code, version name, and the API level.

Let’s Get Started

Create a new project under file menu and modify the project details.

Select Mini SDK Version in the next tab.

Next, Add an Empty activity.

Lastly, Customize your activity and click on finish.

Start Code Integration

MainActivity

public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Activity_main.xml

<?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="com.tablelayoutdemo.MainActivity">
<TableRow
android:background="@color/colorAccent"
android:padding="@dimen/dimen_8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Version"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Version Name"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="API Level"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:background="@color/colorPrimaryDark"
android:padding="@dimen/dimen_8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7.0"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Nougat"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="24"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:background="@color/colorPrimaryDark"
android:padding="@dimen/dimen_8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6.0"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Marshmallow"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="23"
android:textColor="@android:color/white" />
</TableRow>
<TableRow
android:background="@color/colorPrimaryDark"
android:padding="@dimen/dimen_8dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5.0"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Android Lollipop"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="21"
android:textColor="@android:color/white" />
</TableRow>
</TableLayout>

Dimens.xml

<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="dimen_8dp">8dp</dimen>
</resources>

And Done!

Simple as that! Now when you run the demo, it will give you output like this:

While developing your Android app, or hiring Android app development company for your project, do remember to add Android table layout in the design plan. Not only it will enhance the app user interface, but it will also contribute in a clean content management of your Android app.

Grab a free copy of Table Layout example demo from Github.