why is background overlapping drawable resource in android

Question

I was following a tutorial when I stumbled on something I couldn't quite wrap my head around. This is the drawable resource that I use as the source for an image button.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="2dp"
                android:color="@color/light_silver"/>

            <padding android:bottom="0dp"
                android:left="0dp"
                android:right="0dp"
                android:top="0dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp"
                android:color="@color/light_silver"/>
            <solid android:color="#00000000"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</layer-list>

And this is the ImageButton.

<ImageButton
            android:layout_height="25dp"
            android:layout_width="25dp"
            android:layout_margin="2dp"
            android:src="@drawable/pallet_normal"
            android:background="@color/yellow"
            android:tag="@color/yellow"/>

and this is the result that is created from this.

I don't understand why the background is overlapping the drawable resource. Isn't the middle of the drawable supposed to be black as that's what I set in the solid tag? Please help, I am very confused.

Answer 1

You use a transparent color by setting the alpha channel to 00 which made the color full transparent; to make it full opaque, you can set it to ff >> <solid android:color="#ff000000"/> or remove the alpha channel by only using 6-digit color >> <solid android:color="#000000"/>.

For extra help about using the alpha digits in android, pls check out this question.