How to align ImageView in Listview (Android)

Question

quick one I think:

I am failing to get my listView to align the embedded ImageView properly.

As you can see below, the images don't line up correctly (they are being affected by the amount of text in the neighbouring TextView):

Here is the offending xml file for the row item:

<?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="?android:attr/listPreferredItemHeight"
android:orientation="horizontal" 
android:gravity="left">


<ImageView
    android:id="@+id/flagIcon"
    android:layout_width="60sp"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"
    android:layout_weight="0.05"
    android:src="@drawable/orange_flag"/>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center_vertical"
    android:orientation="vertical" 
    >

    <TextView
        android:id="@+id/location_row_item_main_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"/>

    <TextView
        android:id="@+id/location_row_item_secondary_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" 
        android:textSize="12sp"/>

</LinearLayout>

<Button
    android:id="@+id/add_spec_button"
    android:layout_width="60sp"
    android:layout_height="60sp"
    android:layout_gravity="center_vertical"
    android:focusable="false"
    android:text="@string/location_add_spec"
    android:onClick="myClickHandler"/>

</LinearLayout>

Any ideas? Thanks.

Answer 1

Layout view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_play_live" />


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_play_live" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_toRightOf="@+id/imageView1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Large Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </LinearLayout>

</RelativeLayout>

Answer 2

Try something like this:

<?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="?android:attr/listPreferredItemHeight"
    android:orientation="horizontal" 
    android:gravity="left">


    <ImageView
        android:id="@+id/flagIcon"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/orange_flag"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_vertical|left"
        android:orientation="vertical" 
        >

        <TextView
            android:id="@+id/location_row_item_main_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/location_row_item_secondary_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" 
            android:textSize="12sp"/>

    </LinearLayout>

    <Button
        android:id="@+id/add_spec_button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:focusable="false"
        android:text="@string/location_add_spec"
        android:onClick="myClickHandler"/>

</LinearLayout>

The main problem was caused by the width of the center vertical LinearLayout. Also weight of the ImageView was useless and it has some attributes used in RelativeLayout.

Note 1: Mind the difference between android:gravity and android:layout_gravity.

Note 2: sp size unit is used for text sizes. From the docs:

A dp is a density-independent pixel that corresponds to the physical size of a pixel at 160 dpi.
An sp is the same base unit, but is scaled by the user's preferred text size (it’s a scale-independent pixel), so you should use this measurement unit when defining text size (but never for layout sizes).