Question

I am trying to create a UI in Android of this maner

Labels: tab1 | tab2 | tab3
==========v===============
Customized        ListView
      ...

But I getting the following mannered UI

Labels: tab1 | tab2 | tab3
==========v===============
       Customized ListView
              ...

i.e. I am not able to utilize the complete width of the screen
the area below labels remain empty.

I want to show the ListView covering the complete width of the screen
How can I achieve this. Please Help

Here is Sample code I am using

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/passesBar" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:paddingLeft="10dip"
android:paddingTop="10dip" android:paddingRight="10dip"
android:paddingBottom="5dip">

<TextView android:id="@+id/passesText" android:text="@string/passes_text"
 android:layout_width="wrap_content" android:layout_height="wrap_content"
 android:textSize = "12dip">
</TextView>


<TabHost android:id="@+id/passesTabHost"
android:layout_toRightOf="@id/passesText"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">

<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content">

<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent" android:layout_height="wrap_content">
    </TabWidget>
<FrameLayout android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="@android:id/tabcontent">
    <ListView android:id="@+id/passesList" android:layout_below="@+id/passesBar"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:footerDividersEnabled="true"
    android:listSelector="@drawable/passes_list_item_custom_selector">
    </ListView>         

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

Thank you
Nikhil

Answer 1

In your layout xml try this:

1. Wrap your Customized tag in a LinearLayout it if isn’t already an LinearLayout itself. Set the android:layout_width=0, android:layout_height=wrap_content, and android:weight=1, and android:gravity=left for the LinearLayout tag.
2. For your ListView tag also wrap it in a LinearLayout if it isn’t already, and set the android:layout_width=0, android:layout_height=wrap_content, and android:weight=3 to the LinearLayout tag.

This will essentially make the width of the ListView proportionally 3 times as wide as what ever Customized is. Also, setting the gravity will make your Customized view cling to the left side of the screen.

Here’s the little gem from the android documentation that tells you about this:

Tip: To create a proportionate size layout on the screen, create a container view group object with the layout_width and layout_height attributes set to fill_parent; assign the children height or width to 0 (zero); then assign relative weight values to each child, depending on what proportion of the screen each should have.

I got from here.