rainylinkb: Using Tabs in Android to switch between Layouts

Using Tabs in Android to switch between Layouts

Tabs are the most exclusive views in android operating system. They help us to define several layouts according to user's choice in our app. This is a must read for android developers out there to enhance their app UIs.

Download Project

For making tabs in android you need to use TabHost and a TabWidget in your app layout file. The tutorial below shows you how to make 3 tabs in your app, you can make as many as you want.

The code below shows how to create your layout file using TabHost and TabWidget as shown in the picture below:-

The code below defines the above layout:

/layout/activity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/tabhost"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="10dp" >

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TabWidget

android:id="@android:id/tabs"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true" >

</TabWidget>

<FrameLayout

android:id="@android:id/tabcontent"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_above="@android:id/tabs" >

<LinearLayout

android:id="@+id/tab1"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</LinearLayout>

<LinearLayout

android:id="@+id/tab2"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</LinearLayout>

<LinearLayout

android:id="@+id/tab3"

android:layout_width="match_parent"

android:layout_height="match_parent" >

</LinearLayout>

</FrameLayout>

</RelativeLayout>

</TabHost>

Now is the time to write some java code. The onCreate() function of your Activity file is defined as follows:-

/src/YourPackage/MainActivity.java

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main); //referring to the layout file with above content...

initialiseTabs();

}

The tabs in the above code are initilised by initialiseTabs() function which is defined as follows:-

/src/YourPackage/MainActivity.java

private void initialiseTabs()

{

TabHost th=(TabHost)findViewById(R.id.tabhost);

th.setup();

TabSpec spec1=th.newTabSpec("First Tag"); // getting a new tab from the tab host

spec1.setContent(R.id.tab1); //Loading the content of tab1 in first tab

spec1.setIndicator("First Tab"); //Setting label for the tab

TabSpec spec2=th.newTabSpec("Second Tag");

spec2.setContent(R.id.tab2); //Loading the content of tab1 in second tab

spec2.setIndicator("Second Tab");

TabSpec spec3=th.newTabSpec("Third Tag");

spec3.setContent(R.id.tab3); //Loading the content of tab1 in third tab

spec3.setIndicator("Third Tab");

//adding tabs to the TabHost.

th.addTab(spec1);

th.addTab(spec2);

th.addTab(spec3);

}

You can also add a image in the tabwidget by using setIndicator(CharSequence label,Drawable image); function instead of setIndicator(CharSequence label); function used above.

Now play the project and click on tabs to change your layouts.