Make button background transparent using selector

Fobos13 picture Fobos13 · Jul 15, 2013 · Viewed 21.5k times · Source

Here we go. I have a button that has a non-pressed state background as transparent. As soon as the button is pressed, the background is no longer transparent (see the pics). I use nine patch for all my images.

This is my selector:

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

And here is the layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<ImageView
    android:id="@+id/mainMenuImage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY"
    android:src="@drawable/starfighter" >

</ImageView>

<RelativeLayout
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="20dp"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/btnStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="@android:color/transparent"
        android:clickable="true"
        android:hapticFeedbackEnabled="true"
        android:src="@drawable/startselector" >

    </ImageButton>

    <ImageButton
        android:id="@+id/btnExit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:clickable="true"
        android:src="@drawable/exitselector"
        android:background="@android:color/transparent"
        android:hapticFeedbackEnabled="true" >
    </ImageButton>

</RelativeLayout>

Not Clicked:

Not Clicked

Clicked:

Clicked

I have also tried the following methods with no luck

button.getBackground().setAlpha(0);
button.setBackgroundColor(Color.TRANSPARENT);

Also tried the following inside the onClickListener()

view.getBackground().setAlpha(0);
view.setBackgroundColor(Color.TRANSPARENT);
button.getBackground().setAlpha(0);
button.setBackgroundColor(Color.TRANSPARENT);

Still no luck. Good luck :)

Answer

Houcine picture Houcine · Jul 15, 2013

to make your button's background transparent in non pressed state , your selector should be like this :

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

And in your imageButton's declaration in xml should use the selector as a background and dont make anything as a source of your imageButton:

<ImageButton
        android:id="@+id/btnStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:src="@drawable/startselector"
        android:background="@android:color/transparent"
        android:clickable="true"
        android:hapticFeedbackEnabled="true" />