How to add controls to a Tab Layout in Android?

I am following this tutorial https://deve开发者_Go百科loper.android.com/guide/tutorials/views/hello-tabwidget.html and have completed it. Now I would actually like to add you know some controls to these tabs like textboxes(text edit).

How do I do this? I go to my mail.xml using eclipse as my ide and go to layout view and I now get a NullPointerException so I can't even drag stuff onto the layout anymore.

Edit

This is what I have

<?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">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">            
                <TextView 
                android:id="@+id/textview1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" 
                android:text="this is a tab" />
                <EditText android:text="" android:id="@+id/EditText01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:password="true"></EditText>

            </LinearLayout>

            <TextView 
                android:id="@+id/textview2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" 
                android:text="this is another tab" />
            <TextView 
                android:id="@+id/textview3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" 
                android:text="this is a third tab" />
        </FrameLayout>
    </LinearLayout>
</TabHost>

---

Tabs are a bit funny to get working initially since there's a lot of code overhead, but once you've worked your way through that they aren't too bad. To get tabs to work, let's start by improving your XML file and then we can make sure your code to actually load them is correct.

First off, your XML file. Instead of including everything directly in your main.xml, you should use the include feature. As the name would suggest, this lets you work on a separate xml file and then include it in your main with one line. This makes the main.xml file much easier to read. So we'd modify your file above to make it look like this:

//No need to change anything above this
<FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <include layout="@layout/tab1"/>
    <include layout="@layout/tab2"/>
    //and however many other tabs you want to include

</FrameLayout>

You then need to create tab1.xml, tab2.xml and so forth. These are normal xml files in that they start with a ViewGroup (i.e. LinearLayout, RelativeLayout) which contains any number of other widgets. These widgets can be things like EditTexts, buttons, custom views, whatever you want. The only rule is that the parent ViewGroup (the one at the top) must have a unique ID in it, in the manner of android:id="@+id/someUniqueName". You will use that to refer to that specific layout/tab in your code. So for example, this would be:

tab1.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:id="@+id/tab1Layout"
    android:orientation="vertical">

    <TextView ... />
    <EditText ... />
</LinearLayout>

With that done, we can look at your code. I assume you've probably already got this, but just in case here's what you want:

public class YourProject extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources res = getResources();
        TabHost tabHost = getTabHost();

        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab1 title",
                res.getDrawable(R.drawable.logo1)).setContent(R.id.tab1Layout));

        (...)

        //You can also fill tabs with a separate activity like so:
        Intent intent = new Intent(this, YourClass.class);
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Another title",
                res.getDrawable(R.drawable.logo2)).setContent(intent));

        tabHost.setCurrentTab(0);
    }
}

As shown above you can set the content of one of the tabs to be a separate activity. In that case, the activity is defined just as any other one with its own Class, layout, etc. Usually you shouldn't do this and instead just use a different View (with setContent(R.id.tabXLayout), but sometimes it's needed. For example if you want one of your tabs to have a list, then you need to start an activity in there that extends ListView, and include all the boilerplate code for ListViews.

I hope that helps!

---

The layout view in Eclipse can be a bit flaky, particularly with complex layouts. A bit of trial and error might find the View node it is choking on.

As regards developing the tab-based layout further, you have two options, the 'quick' way or the 'right' way. First is to adapt the existing layout xml by replacing one of the TextViews with a LinearLayout (or some other layout) which contains the content you want.

http://google.com/codesearch/p?hl=en#HQNWZ1u2Pig/trunk/HelloLayoutAndroid/res/layout/tab_widget.xml

However Tabs are generally used where there is complex content. For scalability it may be better to locate the TabHost in the layout, call newTabSpec() and then use setContent() to supply an Intent that identifies an internal Activity, which supplies its own Layout.

---

the include often makes problems while parsing XML, I tried it and got :cannot resolve @layout/mylayout.. my code was correct 100%, but it's common problem spicialy if you need Id for the layout and other attributes. samply: I solve it by the disign mode, when you drop tabhost to your layout, place it wherever you want, it creates 3 Linear layouts (tab1,tab2,tab3)... on XML editor, in each tab (leanearlayout) insert your markup of the control you need to use as content of the tab. and in java file do the next:

  TabHost tabHost = (TabHost)findViewById(R.id.tabHost);
    tabHost.setup();
    TabHost.TabSpec tab1 = tabHost.newTabSpec("smil1");
    TabHost.TabSpec tab2 = tabHost.newTabSpec("smil2");
    TabHost.TabSpec tab3 = tabHost.newTabSpec("smil3");
    tab1.setIndicator("#1");//the name will apear on the first tab
    tab1.setContent(R.id.smiles1); // the Id of the control you put in the first LeanerLayout

    tab2.setIndicator("#2"); // the same as abouv but for the second tab
    tab2.setContent(R.id.smiles2);
    tab3.setIndicator("#3"); // the thierd tab
    tab3.setContent(R.id.smiles3);
    // add the tabs
    tabHost.addTab(tab1);
    tabHost.addTab(tab2);
    tabHost.addTab(tab3);

this is the way solving your problem if include makes problem in parsing your XML.

---

The NullPointerException in the layout editor is a known bug in the Android Development Tools.