“iPhonish” Tabs

Oct 25, 2009

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:
tabs

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

 

Page optimized by WP Minify WordPress Plugin