2

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.

houbysoft
  • 32,532
  • 24
  • 103
  • 156
  • Are you trying to specify the individual tabs in the layout XML and avoid using `tabHost.addTab(...);`? If so, I don't think that can be done with the existing tab widget. – Farray Mar 06 '11 at 00:55
  • Yes, pretty much. My main concern is to reuse the XML I already have for one of the tabs, since from the tutorial it looks like I'd have to create each of the tabs' layout in code (i.e. they declare the TextView in the code, not in the XML). – houbysoft Mar 06 '11 at 01:00
  • Figured that was the case -- I went through this in one of my apps and discovered that I hate the built-in TabHost/TabWidget implementation. I left an answer below detailing the basics of implementing your own tabs. You can stay DRY with 1 XML layout and 1 Java class. If you intend to reuse them on many activities, you can create your own `TabActivity` that extends `Activity` and automatically initializes your custom tab layout. – Farray Mar 06 '11 at 01:06
  • this tutorial might help you http://learnncode.wordpress.com/2013/12/18/how-to-use-tabwidget-with-fragments/ – Prachi Dec 23 '13 at 11:37

3 Answers3

4

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.

CommonsWare
  • 986,068
  • 189
  • 2,389
  • 2,491
  • Yes, but that's only for the tab interface, not the content of the tabs themselves. The TextViews, are created in the java code, for instance : `TextView textview = new TextView(this);`.. – houbysoft Mar 06 '11 at 00:55
  • @houbysoft: There is no `new TextView` in the tutorial you linked to. If you are referring to calls to `setIndicator()`, you cannot define those in the XML file that has the `TabHost`. – CommonsWare Mar 06 '11 at 01:03
  • 1
    @houbysoft: That's odd...I had even searched the page for it... My apologies. Regardless, I don't recommend the approach taken by this sample. This sample uses activities as the contents of tabs, which wastes CPU time and heap space, plus it increases your risk of running out of stack space. Just put the contents of the tabs in the layout file like is shown in this sample project: https://github.com/commonsguy/cw-android/tree/master/Fancy/Tab – CommonsWare Mar 06 '11 at 01:18
  • @CommonsWare : thanks, will try that shortly, looks like that's what I want. – houbysoft Mar 06 '11 at 01:41
  • @CommonsWare : excellent, that works very well with my existing XML layout, thanks again. – houbysoft Mar 06 '11 at 01:57
  • The URL is redirecting me to Common Layouts. What happened? http://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts – princepiero Aug 14 '13 at 09:02
  • 1
    @princepiero: This answer is about 2.5 years old, and Google got rid of that tutorial in the interim. I have updated the answer to point to a current sample of mine. – CommonsWare Aug 14 '13 at 11:38
  • Thanks! Yeah, I noticed that this was long time ago so I asked the question because today it is still relevant. – princepiero Aug 15 '13 at 08:07
  • @CommonsWare i wanted to create tab based application where there is 12 activities having common logo and autosuggestion textview and at the bottom there is a tab host with 4 tab widgets. how can i do it pls guide .. since i don't want to do same code on every page for searching and clickevents of tabwidgets – Maveňツ Mar 07 '14 at 05:06
3

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;
        }
    }
};
E.Z. Hart
  • 5,717
  • 1
  • 30
  • 24
1

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.

Farray
  • 8,290
  • 3
  • 33
  • 37