Can't align ImageViews to the left in ListView Row (RelativeLayout)

Question

Actual View

This is how I have my view at the moment.

As you can see, the icons are not all aligned all the way to the left. The red line is my objective. If they go all the way to the left, no problem, because I can solve it later with marginLeft.

This is my XML code (layout/listview_style_listview.xml):

<?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="fill_parent"
    android:background="@color/BackGroundColor"
    android:orientation="vertical"
    android:scaleType="center" >

    <LinearLayout
        android:id="@+id/titleLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="7dp"
        android:background="@color/BackGroundColor"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/sectionTitle"
            style="@style/sectionTitle"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="left"
            android:text="(blank)" />

        <Button
            android:id="@+id/sectionInfoButton"
            android:layout_width="33dp"
            android:layout_height="33dp"
            android:layout_gravity="right"
            android:layout_marginLeft="3dp"
            android:layout_weight="0"
            android:background="@drawable/infoicon" />

        <Button
            android:id="@+id/sectionInfoButton"
            android:layout_width="33dp"
            android:layout_height="33dp"
            android:layout_gravity="right"
            android:layout_marginLeft="3dp"
            android:layout_weight="0"
            android:background="@drawable/filtericon" />

        <Button
            android:id="@+id/sectionOptionsButton"
            android:layout_width="33dp"
            android:layout_height="33dp"
            android:layout_gravity="right"
            android:layout_marginLeft="3dp"
            android:layout_weight="0"
            android:background="@drawable/menuicontop2" />

        <Button
            android:id="@+id/addCatButton"
            android:layout_width="33dp"
            android:layout_height="33dp"
            android:layout_gravity="right"
            android:layout_marginLeft="3dp"
            android:layout_weight="0"
            android:background="@drawable/effect_button_add_cat_click" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dip"
        android:layout_marginRight="0dip"
        android:background="@color/blueOceanStroke" />

    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@color/BlueOcean"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/listview_style_list_selector"
        android:paddingBottom="1dp" />

</LinearLayout>

This is my XML code (layout/listview_style_row.xml)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="35dp" >

    <ImageView
        android:id="@+id/catThumbnail"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/bank1" />

    <TextView
        android:id="@+id/sectionTitle"
        style="@style/title"
        android:layout_width="97dp"
        android:layout_height="32dp"
        android:layout_alignBottom="@+id/catThumbnail"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="66dp"
        android:gravity="center_vertical"
        android:text="Title Text"
        android:textColor="@color/listsTextColor"
        android:textSize="15sp"
        android:textStyle="normal"
        android:typeface="normal" />

    <ImageView
        android:layout_width="25dip"
        android:layout_height="32dp"
        android:layout_alignBottom="@+id/sectionTitle"
        android:layout_alignParentRight="true"
        android:gravity="center_vertical"
        android:src="@drawable/arrow" />

</RelativeLayout>

PS: I added an arrow icon to the right after the screenshot and that's why it's not showing on the image but I guess it's not important.

What exactly is the code you just posted? I'm guessing it's for each item in your listview? Could you also post the layout that contains your listview? — mpellegr, Jul 31 '13 at 20:26
hello mpellegr. Yes, what i posted was the "row style". I have updated with the layout in wich the "listview_style_row" is in. If you need anything else, please ask. — Bruno Carvalho, Jul 31 '13 at 22:09
Did you try setting padding to 0 and background to null for the imageview with the id `catThumbnail`? Sometimes views can have default padding values. — ecem, Jul 31 '13 at 22:12
Hi ecem. I've made the changes you suggested and unfortunately it didn't work — Bruno Carvalho, Jul 31 '13 at 23:48

score 0 · Answer 1 · answered Aug 01 '13 at 00:31

From the screenshot the layout is OK because the divider with back color @color/blueOceanStroke goes all the way and so do the separators. The problem must be in the "@+id/catThumbnail", if you measure the distance between your red line and the left edge of the yellow square and compare it with the distance between the right edge of the square and the left edge of letter "B" they are about the same which it shouldn't be.

My guess is that there is some king of padding in the @drawable/bank1. Try to remove it completely and see if the letter "B" left aligns with the title.

Hope this helps...

hi Christos. I checked. @drawable/bank1 is a 48px square .png . Thats not the problem — Bruno Carvalho, Aug 01 '13 at 01:35

score 0 · Answer 2 · answered Aug 01 '13 at 01:48

0

I was able to fix it with android:layout_marginLeft="-10dp" on the "ImageView @+id/catThumbnail" in listview_style_row.xml, but i really dont think this is a valid solution for a final perfectly designed app, yes? For me to put negative values in there, theres something wrong, right?

answered Aug 01 '13 at 01:48

Bruno Carvalho

111
2
16

That might work on some devices, but it's not really a good general approach. If you had views to the left of your image view, it might cause them to move around too. See http://stackoverflow.com/questions/10673503/is-it-a-bad-practice-to-use-negative-margins-in-android. – mpellegr Aug 01 '13 at 13:52

score 0 · Answer 3 · edited May 23 '17 at 10:31

As someone else mentioned, I would try removing the ImageView and seeing if the TextView will be flush against the red line. If it is, the ImageView has some issues, if not it's something else. Also, the ImageView may not have the same height and width and that could cause issues with the scaling you're doing by setting to 32 dp, see: Unwanted padding around an ImageView.

It might be easier to wrap your ImageView in a FrameLayout. Something like this:

<FrameLayout>
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >

    <ImageView
        android:id="@+id/catThumbnail"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:src="@drawable/bank1" />

</FrameLayout>

Or if that doesn't work, try setting the width and height of the image view and/or the frame layout to wrap_content. Also if that image is a 9-patch, there may be other causes.

Can't align ImageViews to the left in ListView Row (RelativeLayout)

3 Answers3