Android Tab Layout

TabHost is a layout or container class used for a tab layout view. The tabbed window view allows you navigate from one tab or page to another tab or page in a single activity. The TabHost object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that tab. In this tutorial, the contents of the tabs are in fragments. The fragments are switched from one to another fragment when you select a tab.



Now to have a workable application on using TabHost to create a tab layout view, create a new Android project. Then replace the existing code of the activity_main.xml file with the code below.

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@android:id/tabhost"
   android:layout_width="match_parent"
   android:layout_height="match_parent"    
  
   >
  
<LinearLayout 
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="vertical"
     >
<TabWidget android:id="@android:id/tabs"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  />
<FrameLayout
  android:id="@android:id/tabcontent"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:paddingTop="50dip"
  android:paddingLeft="10dip"
  />
</LinearLayout>


</TabHost>

Then you have to create two fragments: FragmentAccounts and FragmentSettings. They are the contents of the Accounts and Settings tabs respectively.

FragmentAccounts.java

package com.example.layoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentAccounts extends Fragment{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view=inflater.inflate(R.layout.faccountlayout, container, false);
return view;
}
}


faccountlayout.xml file

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You are on the Accounts tab."
/>
</LinearLayout>



FragmentSettings.java

package com.example.layoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentSettings extends Fragment{
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view=inflater.inflate(R.layout.fsettingslayout, container, false);
return view;
}
}


fsettingslayout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You are on the Settings tab."
/>

</LinearLayout>


In the onCreate() method of the MainActivity class, you will write code to create a reference to the TabHost defined in the activity_main.xml file, create child tabs, set labels and icons of each tab, and add those tabs to the TabHost. To display the content of each tab when you select the tab, you need to set OnTabChangeListener to the TabHost. The OnTabChangeListener interface has a method called onTabChanged() that must be overridden to display the contents of the tabs.

  package com.example.layoutexample;

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.Menu;
import android.view.View;
import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TabHost.TabContentFactory;
public class MainActivity extends FragmentActivity {
Activity context;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
context=this;
//reference to TabHost
TabHost th=(TabHost)findViewById(android.R.id.tabhost);
th.setup();
th.setOnTabChangedListener(new OnTabChangeListener(){
public void onTabChanged(String tabId) {

FragmentTransaction transact=getSupportFragmentManager().beginTransaction();

if(tabId.contains("Accounts")){
//show Accounts fragment
FragmentAccounts fa=new FragmentAccounts();
transact.replace(android.R.id.tabcontent, fa,"fa");
transact.addToBackStack(null);
transact.commit();
}
else{
//show Settings fragment
FragmentSettings fs=new FragmentSettings();
transact.replace(android.R.id.tabcontent, fs,"fs");
transact.addToBackStack(null);
transact.commit();
}
}
});
//create child tabs
TabSpec tab1 = th.newTabSpec("Accounts Tab");
TabSpec tab2 = th.newTabSpec("Settings Tab");
//set labels, icons, and activities to open    
tab1.setIndicator("Accounts", getResources().getDrawable(R.drawable.user_con));
tab1.setContent(new TContent());

tab2.setIndicator("Settings", getResources().getDrawable(R.drawable.setting_icon));
tab2.setContent(new TContent());

//add tabs to the TabHost
th.addTab(tab1);
th.addTab(tab2);
th.setCurrentTab(1);

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
//Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
class TContent implements TabContentFactory{
TContent(){

}
public View createTabContent(String tag) {
View tv=new View(context);
return tv;

}
}

}

You need to images in your res/drawable folder. They are user_icon.png and setting_icon.png.

Android-Tab-Layout

Posted by: Dara | post date: 08-19-2014 | Subject: Android Apps Development

write programming tip



This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.