How to make button transparent in my app yet visible

Question

I want my buttons to be transparent as I have an image on the activity as a background. If the buttons are not transparent, those buttons are covering the image and image background seems useless.

If I use android:background="@android:color/transparent", it is making my button completely invisible except the text on it. So, I need the button to be transparent provided it should be visible that there is a button. Code snippet would be appreciated.

<Button
android:id="@+id/new_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"  //this line makes the button completely invisible.
android:text="@string/label" />

Solution 1

If you just want white borders, and the text/icons in the button, but the button background transparent create the following drawable (I named it button_border.xml):

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke
                android:color="@android:color/white"
                android:width="1dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</selector>

And use it as a background for the button:

<Button
    .
    .
    .
    android:background="@drawable/button_border"
    />

I'd guess there is a more elegant way to do it with themes, but I'm not that far yet. In the button_border drawable you can add rounded corners and whatnot...

Solution 2

android:background="#A0FFFFFF"

I've hard coded the colour, but you should store it in colors.xml

Modify the first two characters, A0, to adjust how much transparency you want and the last 6 characters the color you want.

Solution 3

Apply selector for button, like this

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"><shape>
        <solid
            android:color="@color/color_1_end" />

        <stroke 
            android:width="1dp"
            android:color="@android:color/transparent" /> // transparent patametr

        <corners 
            android:radius="4dp" />

        <padding 
            android:bottom="10dp" 
            android:left="10dp" 
            android:right="10dp" 
            android:top="10dp" />
    </shape></item>
<item>
    <shape>
        <gradient android:angle="270"
             android:endColor="@color/color_1_start" 
             android:startColor="@color/color_1_end" /> // maybe transparent 

        <stroke 
            android:width="1dp" 
            android:color="@color/color_1_start" /> //maybe transparent 

        <corners android:radius="4dp" />

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

    </item>

Modify this for you =)

Solution 4

Apply border for button

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

        <solid android:color="#FF000000" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="2dp"
            android:left="2dp"
            android:right="2dp"
            android:top="2dp" />

        <gradient
            android:angle="315"
            android:centerColor="#FFFFFFFF"
            android:endColor="#FFB0B0B0"
            android:startColor="#FFB0B0B0" />
    </shape>
</item>

  <Button
        android:id="@+id/btnLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_margin="7dip"
        android:background="@drawable/button_border"
        android:scaleType="centerInside"
 />

View more solutions