Android Tech

The more we share, the more we get

TabView (Part 5) – Tab control at bottom of app


I use the example in previous post to demonstrate.

You just take several simple steps to make you tab control at the bottom of application like this:

The idea is you put all of the controls in a relative layout and align them in this layout.

Modify the main.xml like this:

<?xml version=”1.0″ encoding=”utf-8″?>

<TabHost android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@+id/tabHost”
xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<RelativeLayout android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:padding=”3dp”>

<TabWidget android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:id=”@android:id/tabs”
android:layout_alignParentBottom=”true” />

<FrameLayout android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:id=”@android:id/tabcontent”
android:layout_alignParentTop=”true”>

<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:id=”@+id/tab1″
android:orientation=”vertical”>

<TextView android:layout_width=”fill_parent”
android:layout_height=”100px”
android:text=”This is tab1″
android:id=”@+id/txt1″/>

</LinearLayout>

<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:id=”@+id/tab2″
android:orientation=”vertical”>

<TextView android:layout_width=”fill_parent”
android:layout_height=”100px”
android:text=”This is tab2″
android:id=”@+id/txt2″/>

</LinearLayout>

<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:id=”@+id/tab3″
android:orientation=”vertical”>

<TextView android:layout_width=”fill_parent”
android:layout_height=”100px”
android:text=”This is tab3″
android:id=”@+id/txt3″/>

</LinearLayout>

</FrameLayout>

</RelativeLayout>

</TabHost>

You can download the source code here

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: