Problem with TabHost UI layout.

Question

What I'm trying to do is create a layout like this:

       +--------+ 
Search |EditText| [Button]
       +--------+

+---------+
|Tab 1    |---------+
|         |Tab 2    |
|---------+---------+-----------------+
| ListView Item 1                     |
| ListView Item 2                     |
| ListView Item 3                     |
| ListView Item 4                     |
| ListView Item 5                     |
| ListView Item 6                     |
| ListView Item 7                     |
| ListView Item 8                     |
| ListView Item 9                     |
| ListView Item 10                    |
+-------------------------------------+    

So that's a TextView saying 'Search', an EditText and a button.

Then below it the tabs - Tab 1 has a ListView, Tab 2 some other stuff. I can get a simple TabHost setup with two tabs working fine but can't get the above to lay out properly.

The issue is that that it installs and runs fine - just the layout is wrong. I've tried weighted views and so on but I can't get things to position as per the ASCII diagram above.

I'd create the UI in the Eclipse designer and check the XML from that, except the designer doesn't work with TabHost. And DroidDraw doesn't seem to know about TabHost.

Here's the XML:

<?xml version="1.0" encoding="utf-8"?>

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/TabHost"
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent">

        <LinearLayout 
            android:id="@+id/LinearLayout01" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:padding="5dp">

            <TextView android:id="@+id/SearchTextView"
                android:text="Search"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="10">
            </TextView>

            <EditText 
                android:text="@+id/SearchEditText" 
                android:id="@+id/SearchEditText" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"
                android:singleLine="true"
                android:layout_weight="10">
            </EditText>

            <TabWidget android:id="@android:id/tabs" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"
                android:layout_weight="10"/>

            <FrameLayout android:id="@android:id/tabcontent" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"
                android:layout_weight="70">

                <LinearLayout android:id="@+id/Tab1ListLayout" 
                    android:layout_width="fill_parent" 
                    android:layout_height="fill_parent">
                </LinearLayout>     

                <Button android:id="@+id/tab2"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:text="Tab 2 button"/>

            </FrameLayout>      
        </LinearLayout>
</TabHost>

... and here's the Activity:

    public class tabtest extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TabHost tabs = (TabHost)findViewById(R.id.TabHost);
        tabs.setup();
        TabHost.TabSpec spec = tabs.newTabSpec("tag1");
        spec.setContent(R.id.Tab1ListLayout);
        spec.setIndicator("Tab 1");
        tabs.addTab(spec);
        spec=tabs.newTabSpec("tag2");
        spec.setContent(R.id.tab2);
        spec.setIndicator("Tab 2");
        tabs.addTab(spec);

        EditText et = (EditText)findViewById(R.id.SearchEditText);
        et.setText("Some text.");

    }

Answer 1

It seems you need to review basics such "layout resources" and "declaring layout".

See layout tricks for "weight" linear layout trick. Possible solution:

<?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">
        <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal">
            <TextView android:id="@+id/SearchTextView"
                android:text="Search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            </TextView>

            <EditText 
                android:text="@+id/SearchEditText" 
                android:id="@+id/SearchEditText" 
                android:layout_width="wrap_content" 
                android:layout_height="wrap_content"
                android:singleLine="true">
            </EditText>

        </LinearLayout>

        <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="0dip" android:layout_weight="1"/>
             <LinearLayout android:id="@+id/Tab1ListLayout" 
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content">
            </LinearLayout>     

            <Button android:id="@+id/tab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tab 2 button"/>
    </LinearLayout>
</TabHost>