Extra left and right padding on scaled ImageView

Question

I have this layout:

    <FrameLayout
        android:id="@+id/artwork_detected_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="20dip"
        android:layout_marginLeft="18dip"
        android:layout_marginTop="20dip"
        android:padding="6dip" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/txt_favourites"
            android:textColor="@color/welcome_textcolor"
            android:textSize="24sp" />
    </FrameLayout>

    <ImageView
        android:id="@+id/btn_detect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/artwork_detected_text"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/artwork_detected_text"
        android:layout_centerVertical="true"
        android:adjustViewBounds="true"
        android:src="@drawable/detect_btn" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/artwork_detected_text"
        android:layout_alignTop="@id/artwork_detected_text"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/btn_detect"
        android:adjustViewBounds="true"
        android:src="@drawable/back_btn" />
</RelativeLayout>

This is what it looks like in the eclipse graphical layout

If you notice there's unwanted padding to the left and right side of the two ImageViews on the right. How do I remove that without

• specifying absolute width/height for the images (I want them to alignTop and alignBottom from the TextView on the left)

• having negative margins/paddings (that will have to be adjusted depending on screen density)

I already set the adjustViewBounds attribute to true as you can see in the code, but apparently it only fixes the unwanted padding on the top and bottom of the ImageViews, so it's basically useless here.

Additional info: The images are large -- like way larger than what is displayed. But they are being scaled correctly as you can see here. And no, they don't have transparent padding in them.

Answer 1

You can use LinerLayout inside RelativeLayot like this for example:

<RelativeLayout
    android:id="@+id/top_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/favorites_top_bar" >

    <FrameLayout
        android:id="@+id/artwork_detected_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="20dip"
        android:layout_marginLeft="18dip"
        android:layout_marginTop="20dip"
        android:padding="6dip" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/txt_artword_detected"
            android:textColor="@color/welcome_textcolor"
            android:textSize="24sp" />
    </FrameLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/artwork_detected_text"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/artwork_detected_text"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/artwork_detected_text"
        android:background="@color/favorites_top_bar"
        android:gravity="center_vertical|right"
        android:orientation="horizontal"
        android:paddingRight="10dip" >

        <ImageView
            android:id="@+id/btn_detect"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/detect_btn" />

        <View
            android:layout_width="6dip"
            android:layout_height="wrap_content" >
        </View>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/back_btn" />
    </LinearLayout>
</RelativeLayout>