How to make Tabs UI with icons

Your class has to extend TabActivity:

  1. public class YourClass extends TabActivity {
  2. ...
  3. ...
  4. }



    After that, here's how to configure a Tab:
     
    1. Create a LinearLayout in your main.xml, with the  id: "TabOne"  

    2. Paste these lines after onCreate() :


    1. /* TAB  #1 */
    2. TabSpec tsTabOne = mTabHost.newTabSpec("TabOne");
    3. tsBrand.setIndicator("Tab One"), getResources().getDrawable(R.drawable.tab_one));          
    4. tsTabOne.setContent(R.id.TabOne);
        


      3. You have to create tab_one.xml in /res/drawable folder, with the following:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <!-- When selected, use this -->
  4.     <item android:drawable="@drawable/tab_one_icon&quot;
  5.           android:state_selected="true" />
  6.     <!-- When not selected, use that-->
  7.     <item android:drawable="@drawable/tab_one_iconfaded" />
  8. </selector>


    As you can see, you'll need 2 icons/tab, a normal, and a faded one.
    Copy those images to "/res/drawables/" folder too, with a name like "tab_one_icon.png", or "tab_one_iconfaded.png".

    4. Ok, now repeat these 3 steps above, as manytimes, as many Tabs you would like to have.
    5. Final Step, paste the following:



    1. /* Create TabHost */
    2. TabHost mTabHost;
    3. mTabHost = getTabHost();
    4. /* Add Tabs to TabHost */
    5. mTabHost.addTab(tsTabOne);
    6. ... /* If you have more ... */
    7. mTabHost.setCurrentTab(0);


Post a Comment