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);


2 comments :

Blazin said...

really helpful great tutorial nice thanks !!!!!

Anonymous said...

Currently it sounds like BlogEngine is the best blogging platform out there right
now. (from what I've read) Is that what you are using on your blog?

My page - http://robinonlocation.com