Geek Answers Handbook

TabHost UI Layout Issue

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, TextView says “Search,” EditText and the button.

Then under it the tabs - tab 1 have ListView, Tab 2 - some other things. I can get a simple TabHost setup with two tabs working fine, but cannot force the above to lay out correctly.

The problem is that it installs and works fine - only the layout is wrong. I tried weighted representations and so on, but I can't get things to position according to the ASCII diagram above.

I would create a user interface in the Eclipse designer and validate the XML, except that the designer does not 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.");

    }
+5
1

, , " ".

"weight". :

<?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>
+2

More articles:


All Articles