androidxmldrawableimagebuttonscaletype

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?


Solution

  • 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