Can you have a custom image for a button with a transparent background in android?

Question

I'm making custom buttons for an android application, but I want the buttons to look like an overlay over a video being played.

At the moment the buttons get displayed over the video, but instead of having a transparent background the background is white. It looks like this:

Buttons over video

I'm setting the background for the button with an xml file in the drawable folder, so I can set different images for the different states. Therefore I can't just set android:background="color/transparent" because my line is android:background="@drawable/custom_button". Where I am setting the images like this: item android:drawable="@drawable/left_default_small".

Is there a line that can fix this or do I have to change a styles file or something?

btw I'm using API 21 so that's why the shadow is default, but I don't know how to fix it other than changing the API

Answer 1

Try to use ImageButton

<ImageButton android:id="@+id/previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/media_skip_backward"
android:background="@null"></ImageButton>

OR

android:background="@android:color/transparent"

If you want to create a StateListDrawable like this one in res/drawable directory.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/my_bluish_color" android:state_pressed="true"/>
    <item android:drawable="@android:color/transparent"/>
</selector>

This way the default background is transparent. When pressed the background has the color you specified (instead of color you can use any drawable here).

Answer 2

use this for global backgroud store this in your res/drawable and call this drawable for transperent image

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="100dp"
        />
    <gradient
        android:angle="45"
        android:centerX="35%"
        android:centerColor="#00000000"
        android:startColor="#00000000"
        android:endColor="#00000000"
        android:type="linear"
        />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"
        />
    <size
        android:width="100dp"
        android:height="100dp"
        />
    <stroke
        android:width="1dp"
        android:color="#99000000"
        />
</shape>

or simply use

android:background="#00000000"