How can I align a ImageView to the right edge of a Button?

Question

I've created a simple Layout with a Button, a TextView and a ImageView(with a questionmark in it).

<Button
        android:background="#f00"
        android:textSize="25dp"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Button"
        android:id="@+id/button" />


    <TextView
        android:id="@+id/textViewmas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:text="title "
        android:textSize="18dp" />

    <ImageView
        android:id="@+id/questionmark"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/textViewmas"
        android:layout_alignTop="@+id/textViewmas"
        android:layout_alignRight="@+id/button"
        android:layout_alignEnd="@+id/button"
        app:srcCompat="@drawable/questionmark"/>

The question mark should be a bit more right

I want the image's right edge(questionmark) to align at the right edge of the button. Additional the top and bottom should align at the top and bottom of the title's textView(same height).

Why don't the image align at the right edge, but but a bit more left? I noticed that if I increase the title textsize(eg 30dp) the problem dissapears, but I need a small textsize.

------EDIT: Is there perhaps a minimum size for images, under which the statements doesn't work well?

Answer 1

Add android:scaleType="fitEnd" to your ImageView

<Button
    android:id="@+id/button"
    android:layout_height="wrap_content"
    android:layout_width="200dp"
    android:textSize="25dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="#f00"
    android:text="Button"/>

<TextView
    android:id="@+id/textViewmas"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/button"
    android:layout_alignLeft="@+id/button"
    android:text="title "
    android:textSize="18dp" />

<ImageView
    android:id="@+id/questionmark"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/textViewmas"
    android:layout_alignTop="@+id/textViewmas"
    android:layout_alignRight="@+id/button"
    android:layout_alignEnd="@+id/button"
    android:scaleType="fitEnd"
    app:srcCompat="@mipmap/ic_launcher"/>

Explanation

This is how the ImageView would appear without the android:layout_alignTop="@+id/textViewmas" attribute

When you add the layout_alignTop attribute to the ImageView , it is squeezed down to the height of the TextView and the image it contains is scaled down. By default, the scaleType property of the ImageView appears to be centerInside ; which scales down the image and aligns it to the center of the image view, thereby adding some space to the left and right.

The solution would be to use android:scaleType="fitEnd" to move the scaled down image to the end of the image view

The output

Answer 2

You can use:

android:layout_alignRight="@+id/button"

or:

android:layout_alignEnd="@+id/button"

and then you can add some margin from left.