TabLayout/TabHost Tutorial For Android (Reusing Layout)

Hi, hope you all are fine. My this tutorial is about using Tab Layout in Android.

 

Here its complete source code.

TabBarExample.java

In this class i take the reference of TabHost and pass it to setMyTabs Function to add Tabs at runtime.

public class TabBarExample extends TabActivity  {

	TabHost tabHost;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab);

        tabHost = (TabHost)findViewById(android.R.id.tabhost);
        AppTabs.setMyTabs(tabHost, this);
    }
}

AppTabs.java
First create the TabSpec objects, setting their ids, setting Display Text and Animation (for pressed and unpressed states), setting their contents then add add them into tabHost.

We can also implement OnTabChangedListener, and set backgrounds of tabs as required whose code is highlighted.

	public static void setMyTabs(TabHost tabHost, Context context){
        TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
        TabSpec secondTabSpec = tabHost.newTabSpec("tid1");

        firstTabSpec.setIndicator("Artists", context.getResources().getDrawable(R.anim.artists));
        secondTabSpec.setIndicator("Search", context.getResources().getDrawable(R.anim.search));

        firstTabSpec.setContent(new Intent(context, FirstTab.class));
        secondTabSpec.setContent(new Intent(context, SecondTab.class));

        tabHost.addTab(firstTabSpec);
        tabHost.addTab(secondTabSpec);

        tabHost.getTabWidget().setCurrentTab(1);
        tabHost.setOnTabChangedListener(MyOnTabChangeListener);

        // Setting BackGround
//      for(int i=0; i<tabHost.getTabWidget().getChildCount(); i++)
//      {
//      	tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.WHITE);
//      }
//
//      tabHost.getTabWidget().setCurrentTab(1);
//      tabHost.getTabWidget().getChildAt(1).setBackgroundColor(Color.GRAY);

	}

	private static OnTabChangeListener MyOnTabChangeListener = new OnTabChangeListener(){
		@Override
		public void onTabChanged(String tabId) {
//			for(int i=0;i<tabHost.getTabWidget().getChildCount();i++)
//	        {
//	        	tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.WHITE);
//	        }
//
//			tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.GRAY);
		}
	};

}

Tab.xml

<TabHost android:layout_width="fill_parent"
	android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@android:id/tabhost">
	<LinearLayout android:id="@+id/LinearLayout01"
		android:orientation="vertical" android:layout_height="fill_parent"
		android:layout_width="fill_parent">
		<TabWidget android:id="@android:id/tabs"
			android:layout_height="wrap_content" android:layout_width="fill_parent"></TabWidget>
		<FrameLayout android:id="@android:id/tabcontent"
			android:layout_height="fill_parent" android:layout_width="fill_parent"></FrameLayout>
	</LinearLayout>
</TabHost>

FirstTab.java

public class FirstTab extends Activity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		TextView textView = new TextView(this);
		textView.setText("First Tab");
		setContentView(textView);
	}
}

Other Links

http://developer.android.com/resources/tutorials/views/hello-tabwidget.html

About these ads
This entry was posted in Android, Tutorials and tagged , , , , . Bookmark the permalink.

7 Responses to TabLayout/TabHost Tutorial For Android (Reusing Layout)

  1. I really liked this tutorial, thank you for the good explanation and put the code. My English is not very good but I wanted to thank =)

  2. Seth says:

    I have searched dozens of sites for working tab examples, and this was the first one I found. Thanks!

  3. Ans says:

    thumbs up for covering this topic in such detail; I like the style you present and organize the things;
    keep writing;

  4. engiguide says:

    amazing…one…more than easy to learn from android.dev…..site

  5. Deepika says:

    This is really very helpful for me and my app.
    Thank a lot. :)

  6. Riadh says:

    toturial thank you for this, I have a question, I want the tabs are
    not square, but a space between the tabs and the tabs should be pointed as the image below into your toturial thnx in advance

  7. Ratan says:

    This was Sweet ;)

Leave a Reply

Fill in your details below or click an icon to log in:

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