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.
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
Now is the time to write some java code. The onCreate() function of your Activity file is defined as follows:-
/src/YourPackage/MainActivity.java
The tabs in the above code are initilised by initialiseTabs() function which is defined as follows:-
/src/YourPackage/MainActivity.java
Now play the project and click on tabs to change your layouts.
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"
>
<!-- your first tab layout
here -->
</LinearLayout>
<LinearLayout
android:id="@+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- your second tab layout
here -->
</LinearLayout>
<LinearLayout
android:id="@+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<!-- your third tab layout
here -->
</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.