Question: I have this transparent image that I want to fill a specific color inside of the transparent part.

[![image](https://i.stack.imgur.com/jKiiG.png)](https://i.stack.imgur.com/jKiiG.png)

I have been able to fill up this image a specific color I want, but the problem is that the color is also filling up the outside part of the `ImageButton`.

Here is the sample:

[![image](https://i.stack.imgur.com/shRqX.png)](https://i.stack.imgur.com/shRqX.png)

How can I remove the excess red color outside of the drawable?

Here is my current **xml:**

```
<ImageButton
    android:id="@+id/button_scan"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginRight="4dp"
    android:layout_weight="0.25"
    android:src="@drawable/ic_scan"
    android:background="@color/aub_red"
    android:backgroundTintMode="screen"
    android:textColor="@color/edittext_text" />

```

Answer: 
It looks like the parent is a LinearLayout with some 'weightsum', which is why the width of the ImageButton is uncertain.

You could create a framelayout which would contain this imagebutton and another layout (with the same width and height as the imagebutton) underlying the imagebutton. Something like this:

```
    <FrameLayout
        android:layout_width="0dp"
        android:layout_weight="0.25"
        android:layout_height="wrap_content">

    <View
        android:layout_width="match_parent"
        android:background="@color/aub_red"
        android:layout_height="match_parent"/>

    <ImageButton
        android:id="@+id/button_scan"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="4dp"
        android:backgroundTintMode="screen" />
</FrameLayout>

```
try to build by adding theses

```
android:adjustViewBounds="true"
android:scaleType="fitXY"

```

if your image ratio affected by above change you can use

```
android:scaleType="fitCenter"

```