Add an image button with transparent background

I want to add image buttons on my main app screen that have a transparent background. I have created the images in GIMP and saved them with transparent backgrounds in png format but when I add them to my android app in Eclipse they appear with a white background. How do I remove this in my code?

Upvotes: 6

Answers (5)

afe

Reputation: 606

Answering here 5 years later for compatibility with Android L+.

In order to use a PNG (transparent) image as background on an ImageButton, you should use the property background instead of src

     <ImageButton
        android:id="@+id/imageProg"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:onClick="doStuff"
        android:background="@drawable/ic_stuff"

Upvotes: 0

RussER

Reputation: 1

I had the same issue on my .aspx page - adding an that did an add to and remove from favorite functionality. I know the image was a .gif image format having a transparent background - but as mentioned here it showed in the browser in IE9 and Chrome, as a white squared background.

I added this and it solved the issue - but you must ensure the .gif or image indeed has a transparent background too:

<asp:ImageButton runat="server" ID="lnkFavorite" BackColor="Transparent" AlternateText="Add Favorite" CommandName="Favorite"
ImageUrl="Images/MakeFavorite_30.png" ToolTip="Click to add to the My Favorite Threads grid."
    CommandArgument='<%# DataBinder.Eval(Container, "RowIndex") + ";" + Eval("FavoriteUserID")%>' />

The BackColor="Transparent" attribute did it for me! I hope that helps too!

Russ

Upvotes: 0

Akhil

Reputation: 14058

A transparent background generally works when used in photoshop, if it is not, you have to set the alpha bits of the pixels around the border of your image

use alpha-masking( subset of alpha blending, google them to know more).

A little theory: depending on the alpha bits for each pixel in your Bitmap (the translucency bits), the extent of blending of that pixel with over-written pixel is determined. Considering extremes, if alpha is 255, overwriting pixel is used instead of the over-written one (fully opaque, in regular terms); if alpha is 0, overwriting pixel is just ignored (transparent). For other alphas in between: there is blending.

In your case you would have to make the alpha of the border zero, to achieve complete blend. Outlining all the steps in geral:.

The drawable to be used can't be a JPEG( JPEG doesn't store alpha values per pixel). Go for PNGs
2.You will need to create and keep your bitmap drawable in that way beforehand(use google for alpha blending PNGs) such that the borders have zero alpha value ( use softwares like Paint.NET for ex).
If images are being created dynamically, you would need to use a blending equation ( for details read materials by Porter and Duff).
For ex, this is PNG image with transparent pixels having alpha 0 other than the alphabet itself
.