Develop Reference

One of two Android ListView filling too much space

I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>

It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.

how to design great design's for a Android Activity

What I'm Trying to do
At the moment I'm creating a design for my Activity, which has different kind of "boxes" in it. Every of those "boxes", has diffrent informations in it. I created the design by hand on a piece of paper, but I won't get the idea down in my .xml!!
Question
On the bottom of this post you'll find a copyed "box" which I'd like to create for my app. Please help me to realize this, because I really don't get how to do this in my XML! I'm working with Android 4.0 (ICS).

Something like this should work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/box_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Box Title" />
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/box_content_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hans Max" />
<TextView
android:id="#+id/box_content_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Maxiburger 12" />
<TextView
android:id="#+id/box_content_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8002, Muster" />
</LinearLayout>
<ImageButton
android:id="#+id/box_button"
android:layout_weight="5"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</LinearLayout>

I give you the pseudo layout:
<RelativeLayout>
<TextView
full width
id:infobox/>
<Button
layoutParentRight
below infobox/>
<TextView
layout_below infobox
toLeftOf button/>
// repeat the textView above and always below the previous one
</RelativeLayout>
With LinearLayouts:
<LinearLayout>
<TextView infobox/>
<LinearLayout>
<LinearLayout>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<Button/>
</LinearLayout>
</LinearLayout>
As you see it is much more complex and bloated. As I always get confused by horizontal/vertical orientation I leave this to you to find out :)
Just experiment and if you can't get it to work, update your answer with the layout you tried.

proportional row size with 1 fixed row

In Android, I'm trying to basically create a table with 2 rows, where 1 row is say 10 pixels, and the other takes the rest of the screen. In silverlight, this is equivalent of a table with 2 rows, one on "Auto" and the other set to "*".
Is there any way to do this? I have been playing with the layout weight, but this is always a percentage, and I would like 1 row to be fixed size (wrap_content basically).
Any ideas?
edit:
I tried what was suggested, but it'snot working.. So I want the first row to take up the entire space, except what row 2 took up. Row 2 consists of 2 buttons side by side, Row 1 is just a ListView. Here is what I have:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="0" android:background="#FFFF00">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="50dip" android:stretchColumns="2">
<TableRow>
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
When I view this all I see is the yellow linearlayout (the buttons), no listview at all. The listview has 50 items, and I can confirm it's visible by taking it out of this setup.

Yep, easy actually.
First cell must have the weight of 0. Second cell must have the weight of 1 and fill the parent by width. That way it will take up the remaning space within the container it's in.
Easy! Here's an example for your convenience
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_weight="0" android:background="#FF0000">
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="SomeText" android:id="#+id/theview"/>
</LinearLayout>
<LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="#FFFF00">
</LinearLayout>
</LinearLayout>
=======================================
UPDATE
Mate you overcomplicated it like Crayze!
First. You don't need a table layout for that.
Second the problem is you set both heights of the layout to fill_parrent. So they are both fighting over for the screen size. To fix this you just have to set both the layout sizes to wrap_content. That will work just fine. Here have an example, without the table on your code.
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:background="#FFFF00">
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</LinearLayout>

Use layout weight and set the fixed one to be 0, and the other one to be any number.

Okay so actually I figured this out by reviewing what Taranasus wrote, which was accurate to a degree.
This is the final XML that worked:
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_weight="1" android:background="#FF0000">
<ListView android:id="#+id/edit_group_listView"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:background="#FFFF00">
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="50dip" android:stretchColumns="2">
<TableRow>
<Button android:text="#string/button_save" android:id="#+id/edit_group_save"
android:layout_width="150dip" android:layout_height="50dip"
android:enabled="false" android:layout_column="1"></Button>
<Button android:text="#string/button_cancel" android:id="#+id/edit_group_cancel"
android:layout_width="150dip" android:layout_height="50dip"
android:layout_column="3"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
This site also helped: http://www.curious-creature.org/2009/02/22/android-layout-tricks-1/
The problems were that:
1. The orientation had to be "vertical", which actually doesn't make sense according to the docs.
2. The second row (the fixed one) has to have a height of wrap_content, which also doesn't make sense since Google docs about weight specifically say both elements should be fill_parent.

android tableview issue

the following Android layout is a custom row for my listactivity. The second textview in the tablerow does not stretch to fit the column like I want it to. Note that there is only one tablerow because I took the others out for brevity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="6dip">
<ImageView
android:id="#+id/DocTypeIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="center_vertical" />
<TableLayout
android:id="#+id/tableLayout1"
android:layout_toRightOf="#id/DocTypeIcon"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:stretchColumns="1">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pages"
android:textStyle="bold"
android:layout_marginRight="10dp" />
<TextView
android:id="#+id/DynamicTextHere"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</TableRow>
<!-- Other rows stripped for brevity -->
</TableLayout>
</RelativeLayout>
When I put stretchColumns="1" in, I see nothing but a couple of artifacts on the screen.
When stretchColumns is not there the layout only goes to a fixed width. I believe it might be the RelativeLayout screwing me up. However, that is more of a drastic change than I want. Can I do something small to make this row fit to my screen (both portrait and landscape)?

Can you try: android:stretchColumns="*"

Android layout issue - relative widths in percent using weight

I am trying to assign relative widths to columns in a ListView that is in a TabHost, using layout_weight as suggested here:
<?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">
<TableLayout
android:id="#+id/triplist"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="4px">
<TableRow>
<ListView android:id="#+id/triplistview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</TableRow>
<TableRow>
<Button android:id="#+id/newtripbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Trip"/>
</TableRow>
[other tabs ...]
My row definition has 4 columns that I would like to size as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
android:padding="4px">
<TextView android:id="#+id/rowtripdate"
android:layout_weight=".2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:inputType="date"/>
<TextView android:id="#+id/rowodostart"
android:layout_weight=".2"
android:layout_width="0dip"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/rowodoend"
android:layout_weight=".2"
android:layout_width="0dip"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/rowcomment"
android:layout_weight=".4"
android:layout_width="0dip"
android:layout_height="wrap_content">
Unfortunately, it seems to want to fit all the columns into the space that the button occupies, as opposed to the width of the screen. Or maybe there is another constraint that I do not understand. I'd appreciate your help.
(source: heeroz.com)

I think I forgot this property for the TableLayout element:
android:stretchColumns="0"
It appears to be working now.

I don't see anything obviously wrong in what you are showing there. To get a better picture of what is going on, you might try out the heirarchy viewer. It comes with the SDK. It will visualize for you how much space each of the "hidden" layers is taking, so you can figure out which one decided to only be that big.