Android layout — stack two TextViews vertically, inside a ListView Row

Question

I started off with Fedor's ListView implementation. Here's the XML for my ListView item:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
      android:id="@+id/image"
      android:layout_width="50dip"
      android:layout_height="50dip" android:src="@drawable/stub" android:scaleType="centerCrop"/>
<TextView
      android:id="@+id/name"
      android:layout_width="0px"
      android:layout_height="0px"
      android:layout_weight="0" android:textSize="20dip" android:layout_marginLeft="10dip"/>
<TextView
      android:id="@+id/address"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"  android:textSize="16dip" android:layout_marginLeft="10dip"/>

</LinearLayout>

What I'm seeing on my device is the ImageView and the two TextViews displayed sequentially from left to right.

What I want is the ImageView all the way on the right (this is already correct), the name TextView to the right of the imageview (this is correct), and the address TextView, BELOW the name TextView. I haven't been able to figure out how to get this laid out properly.

Please note, I know I could just add a new line to the name and include the address text after that, but I want these two elements to have different font sizes, so that is not an option. Thanks so much!

Answer 1

You need to set the orientation of the LinearLayout and to achieve what you want to do, you'll need to use several of those. In pseudo-code, you'll have to do :

<LinearLayout
    android:orientation="horizontal"
    ...>
    <ImageView
        android:id="@+id/image"
        ... />
    <LinearLayout
        android:orientation="vertical"
        ...>
        <TextView
             android:id="@+id/name"
             ...>

        <TextView
             android:id="@+id/address"
             ...>
    </LinearLayout>
</LinearLayout>