Android List Item: TextView on left, Image on right

Question

I\'m creating a custom list item in and android list view. it\'s very simple, it has a textview on the left and an image on the right. the image should align all the way right,

Answer 1

This worked for me:

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

    <TextView android:id="@+id/date"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:layout_marginRight="10dp"
    android:textSize="16sp"
    android:textColor="@color/text_color"
    android:layout_alignParentLeft="true"
    android:gravity="center_vertical"/>

    <ImageView android:id="@+id/imageBtn"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:contentDescription="@string/delete"
    android:src="@drawable/delete_minus_png"
    android:layout_alignParentRight="true" />

</RelativeLayout>

Line android:layout_marginRight="10dp" did the trick.

Hope it helps!

Answer 2

Looks like there is some layout bug or so. If the TextView has fill_parent flag, the ImageView will be pushed away from the layout, even if the TextView contents are small enough.

Answer 3

Left-align your text with the parent, and set the gravity of the image to right:

<?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="48dp">

  <TextView
  android:id="@+id/team_member_name"
  android:layout_width="wrap_content"
  android:layout_height="fill_parent"
  android:layout_alignParentLeft="true"
  android:gravity="center_vertical"
  android:singleLine="true"/>

  <ImageView
  android:id="@+id/team_member_icon"
  android:layout_alignParentRight="true"
  android:layout_width="wrap_content"
  android:layout_height="fill_parent"
  android:layout_gravity="right"
  android:layout_marginLeft="8dp"
  android:layout_marginRight="8dp"
  android:src="@drawable/circle_green"/>

</RelativeLayout>

Answer 4

You can use bitmap drawable like this (this also adds rounded corners):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <stroke
                android:width="2dp"
                android:color="#adadad"
            />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item android:right="5dp"
        android:top="2dp"
        android:bottom="2dp">
        <bitmap
            android:src="@drawable/image"
            android:gravity="right"
        />
    </item>
</layer-list>

and put this drawable in background property of your TextView:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/right_image"
    android:text="some text"
    />

Answer 5

You can also just add the drawable to the textview directly like this.

<TextView
    android:id="@+id/txtItem"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:drawableRight="@drawable/common_icon_arrow_disclosure"
    android:gravity="center_vertical"
    android:textSize="20px" />

Answer 6

Relative layout is what you want. In your case the fill_parent attribute was causing the text view to push the image off of the screen. If you use Relative layout and set the text view to use the layout_toLeftOf it should work.

Here is a quick example that I think will work (I haven't tested it out and it's from memory but the idea is there)...

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
                android:layout_width="fill_parent" 
                android:layout_height="50px"
                android:layout_gravity="center_vertical">
  <ImageView android:id="@+id/img"
             android:layout_gravity="right|center_vertical"
             android:src="@drawable/common_icon_arrow_disclosure" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content"/>

  <TextView android:id="@+id/txtItem"
            android:gravity="center_vertical"
            android:textSize="20px"
            android:layout_width="wrap_content" 
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@id/img" />
</RelativeLayout>