Jonas Mohr Pedersen
Jonas Mohr Pedersen

Reputation: 555

ImageButton image scales when adding background attribute, while using scaletype to position image

I am having an issue with a drawable in an ImageButton.

I am trying to align the white arrow (seen in the picture below) in the right side of the imagebutton. I succeed to do so while not using a background color, by using scaleType="fitEnd".

Button - correct arrow, wrong background color

            <ImageButton
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:id="@+id/imageButton7"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/arrowUp"
            android:scaleType="fitEnd" />

However, when trying to add a background color, the arrow image scales up in size, so it doesn't look like intended (seen in picture below).

Button - wrong arrow size, correct background color

            <ImageButton
            android:layout_width="250dp"
            android:layout_height="40dp"
            android:id="@+id/imageButton7"
            android:layout_gravity="center_horizontal"
            android:src="@drawable/arrowUp"
            android:scaleType="fitEnd"
            android:background="#054365" />

Is there a way to get the proper arrow size & positioning while still changing the background color of the ImageButton while using scaleType="fitEnd", or do i have to use another approach?

Upvotes: 0

Views: 102

Answers (2)

Prathap Badavath
Prathap Badavath

Reputation: 1671

<ImageButton
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:src="Your image path"
    android:scaleType="fitEnd"
    android:backgroundTint="#FFFFFF"/>

The "backgroundTint" attribute will work API level 21 and higher. If below API level 21 the application simply ignore the attribute and it is not an error.

Upvotes: 0

Bhargav Thanki
Bhargav Thanki

Reputation: 4954

Try

android:backgroundTint="#054365" 

instead of

android:background="#054365"

To change the button color. This is a simple hack.

For more info refer Material effect on button with background color

Upvotes: 2

Related Questions