CODEWITHSUNDEEP
androidandroid-layout
Lorenzo
Lorenzo

Reputation: 29427

Android list item layout

I have a simple ListActivity implementation which has the following design 

+------+------------------------------------+
|  Z1  |  Z2                                |
|      |                                    |
+------+------------------------------------+

being Z1 an ImageView element and Z2 a TextView element. This is my markup

<?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"
    android:orientation="horizontal">
    <ImageView android:id="@+id/icon" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:src="@drawable/icon" />
    <TextView android:id="@+id/sectionTitle" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textStyle="bold" />
</LinearLayout>

How do I change my markup to obtain a design that adds one further element like in the following sample?

+------+------------------------------------+
|  Z1  |  Z2                                |
+      +------------------------------------+
|      |  Z3 (New TextView)                 |
|      |                                    |
+------+------------------------------------+

Upvotes: 1

Views: 6014

Answers (3)

Samuel
Samuel

Reputation: 9993

i guess you need to get familiar with relative layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content">

    <ImageView android:id="@+id/icon" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="25dip"
    />
    <TextView android:id="@+id/title"
        android:layout_toRightOf="@id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignTop="@+id/icon"     
    />
    <TextView android:id="@+id/description"
        android:layout_toRightOf="@id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_alignBottom="@+id/icon"      
    />
</RelativeLayout>

something like this will work.

Upvotes: 1

hooked82
hooked82

Reputation: 6376

I would use a LinearLayout, but with a nested LinearLayout with TextView's in it. Here is an example XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="horizontal">
    <ImageView android:id="@+id/catch_image"
               android:layout_width="60dip"
               android:layout_height="60dip"/>
    <LinearLayout android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:orientation="vertical"
                  android:layout_weight="1">
        <TextView android:id="@+id/catch_species"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"/>
        <TextView android:id="@+id/catch_datetime"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

Upvotes: 2

Pedro Loureiro
Pedro Loureiro

Reputation: 11514

The best option would be changing your layout into a relative layout.

Make Z1 align parent left top and bottom and specify its gravity to center, and center vertically (within parent).

Z2 should be on the left of Z1 and aligned to parent's top.

Z3 should be left aligned with Z2 and below Z2.

All these "rules" I used are specified in relative layout.

More info: RelativeLayout documentation and sample tutorial.

Upvotes: 1

Related Questions