The journey with little green men

Let me intro­duce my cus­tom tabs recipe: cus­tom tabs lay­out with Radi­oGroup wid­get and hid­den Tab­Wid­get view. Lay­out file can looks like this:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost" android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <FrameLayout android:id="@android:id/tabcontent"
      android:layout_width="fill_parent" android:layout_height="0dip"
      android:layout_weight="1" android:padding="20dip" android:background="#fff"/>
    <RadioGroup android:layout_width="fill_parent"
      android:layout_height="wrap_content" android:orientation="horizontal"
      android:checkedButton="@+id/first" android:id="@+id/states">
      <RadioButton android:id="@+id/first" android:background="@drawable/button_radio"
        android:width="80dip" android:height="70dip" />
      <RadioButton android:id="@+id/second" android:background="@drawable/button_radio"
        android:width="80dip" android:height="70dip" />
      <RadioButton android:id="@+id/third" android:background="@drawable/button_radio"
        android:width="80dip" android:height="70dip" />
      <RadioButton android:id="@+id/fourth" android:background="@drawable/button_radio"
        android:width="80dip" android:height="70dip" />
    </RadioGroup>
    <TabWidget android:id="@android:id/tabs"
      android:layout_width="fill_parent" android:layout_height="wrap_content"
      android:layout_weight="0" android:visibility="gone" />
  </LinearLayout>
</TabHost>

There is no way to setup but­ton draw­able of RadioBut­ton wid­get in lay­out XML file, so we should do it at Activ­ity cre­ate event:

    private void setupUI() {
        RadioButton rbFirst = (RadioButton) findViewById(R.id.first);
        RadioButton rbSecond = (RadioButton) findViewById(R.id.second);
        RadioButton rbThird = (RadioButton) findViewById(R.id.third);
        RadioButton rbFourth = (RadioButton) findViewById(R.id.fourth);
        rbFirst.setButtonDrawable(R.drawable.ebay);
        rbSecond.setButtonDrawable(R.drawable.flickr);
        rbThird.setButtonDrawable(R.drawable.skype);
        rbFourth.setButtonDrawable(R.drawable.you_tube);
        RadioGroup rg = (RadioGroup) findViewById(R.id.states);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            public void onCheckedChanged(RadioGroup group, final int checkedId) {
                switch (checkedId) {
                case R.id.first:
                    getTabHost().setCurrentTab(0);
                    break;
                case R.id.second:
                    getTabHost().setCurrentTab(1);
                    break;
                case R.id.third:
                    getTabHost().setCurrentTab(2);
                    break;
                case R.id.fourth:
                    getTabHost().setCurrentTab(3);
                    break;
                }
            }
        });
    }

Final result:

And as usual there are source code and exe­cutable file.

7 Responses so far | Have Your Say!

1. 

   fazevedo
   November 2nd, 2009 at 12:49 #

   Good tech­nique. Well done and keep it up!

2. 

   PhaniJ
   November 18th, 2009 at 03:26 #

   Thanks for the awe­some idea

3. 

   Kyle Kuepker
   December 21st, 2009 at 06:08 #

   Android new­bie here.….could your recipe be mod­i­fied to make ver­ti­cal ori­ented tabs on the left side of the screen?

4. 

   grbrg
   April 13th, 2010 at 14:13 #

   This is a rather nice solu­tion! How­ever, how do you han­dle dif­fer­ent screen res­o­lu­tions? The XML file seems to require con­stant val­ues for each radio but­tons width…

5. 

   theo
   August 9th, 2010 at 16:38 #

   looks great, thanks!

6. 

   dirk
   August 20th, 2010 at 00:18 #

   I scoured the web for solu­tions to cus­tom tabs and this is by far the simplest.

7. 

   Ray
   September 20th, 2010 at 07:44 #

   @grbrg The xml for the radio but­tons height and width uses dip, which means the value scales with the den­sity of the screen, ie, on a nor­mal screen, 1 dip = 1 pixel, but on a high den­sity screen 1 dip = 1.5 pixels.

   See here for more info: