Search code examples
androidcssandroid-layoutandroid-selector

Custom background of button is not setting properly

Hello I am designing this page in android (style only) enter image description here. First 3 buttons has been designed by taking the reference from this.

But DONATE NOW button which I have designed is become transparent like this enter image description here

as well as click event (statepreseed = "true")is also transparent like enter image description here.

and here is my code of background for DONATE NOW button

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle" >
            <corners
                android:radius="0dp" />
           <solid android:color="#33e7d283"></solid>
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp"
                />
            <stroke
                android:width="4dp"
                android:color="#00e9ca30"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <corners
                android:radius="0dp"
                />

            <gradient
                android:angle="225"
                android:centerX="23%"
                android:centerColor="#33f4c40e"
                android:startColor="#ffdab605"
                android:endColor="#ffdab605"
                android:type="linear"
                />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp"
                />
        </shape>
    </item>

</selector>

If any one is having the solution.please help

Solution

  • You are using ARGB instead of RGB. Because of this you are creating image with transparent background. 

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="0dp" />

    <gradient
        android:angle="225"
        android:centerColor="#e7d283"
        android:centerX="23%"
        android:endColor="#ffdab605"
        android:startColor="#ffdab605"
        android:type="linear" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />
</shape>

    Using e7d283 or ffe7d283 color-code instead of 33e7d283 might solve your problem for yellow image background.

    Using 33 as alpha means you are giving only 20% opacity to your center color. That is the reason you can see background color in middle of your image.