Add Tabs to Android Application using the layout/main.xml file

Question

I am beginning with Android and I'd like to add tabs to my existing application.

Right now I just have one activity with the layout defined in the XML file. I would now like to add other tabs.

I have looked it up and found http://developer.android.com/resources/tutorials/views/hello-tabwidget.html on the Android developer site; however, that doesn't use XML for defining the layout of the tabs.

So, how can I easily add tabs using the XML file only for the layout?

Thanks in advance.

Answer 1

I have looked it up and found http://developer.android.com/resources/tutorials/views/hello-tabwidget.html on the Android developer site; however, that doesn't use XML for defining the layout of the tabs.

Yes, it does. See step #4.

---

UPDATE

Google reorganized their documentation and got rid of this tutorial. You can see the use of XML for defining the tabs in TabWidget in this sample project.

Answer 2

I've run into a situation where the TabWidget layout didn't do what I needed, so I faked it up with a ViewFlipper and a RadioGroup. That way, I could define the content of the tabs (each view in the ViewFlipper) using includes (like in Farray's answer).

The tabs themselves were the RadioButtons in the RadioGroup - you just have an OnCheckedChangeListener in your code and set the ViewFlipper's displayed child accordingly. You can define the RadioButton layout in XML (with text or images or whatever).

Here's a pseudo-layout where the tabs use images:

<LinearLayout>
    <ViewFlipper android:id="@+id/viewFlipper">
        <include android:id="@+id/tab1Content" layout="@layout/tab1Layout" />
        <include android:id="@+id/tab2Content" layout="@layout/tab2Layout" />
        <include android:id="@+id/tab3Content" layout="@layout/tab3Layout" />
    </ViewFlipper>
    <LinearLayout>
        <RadioGroup android:id="@+id/radgroup1" android:orientation="horizontal">
          <RadioButton android:id="@+id/rad1" android:button="@drawable/tab1" />
          <RadioButton android:id="@+id/rad2" android:button="@drawable/tab2" />
          <RadioButton android:id="@+id/rad3" android:button="@drawable/tab3" />
        </RadioGroup>
    </LinearLayout>
</LinearLayout>

And here's the listener:

    private OnCheckedChangeListener onRadioButtonCheckedChanged = new OnCheckedChangeListener(){
    public void onCheckedChanged(RadioGroup group, int checkedId)
    {
        switch(checkedId)
        {
            case(R.id.rad2):
                viewFlipper.setDisplayedChild(1);
            break;
            case(R.id.rad3):
                viewFlipper.setDisplayedChild(2);
            break;
            default:
                viewFlipper.setDisplayedChild(0);
            break;
        }
    }
};

Answer 3

The TabWidget implementation is pretty rigid -- you don't have much control over layout.

If you want to create your own custom tabs, your best bet is to create a custom layout and call it from the activities that you want to have these "tabs". You can call reusable layouts in XML with <include layout="@layout/my_tab_layout" /> and then write your own initialization code in a reusable class.