Set transparent background of an imageview on Android

Question

I am using a web view in which I am adding an image view. How can I set the background of this image view to transparent?

I have tried this:

mImageview.setBackgroundResource(R.color.trans);

Where trans → <color name="trans">#00000000 </color>.

This can help you : http://stackoverflow.com/questions/5445085/understanding-colors-in-android-6-characters/11019879#11019879 — Martin Stanimirov, Aug 31 '15 at 13:38
I set #00000000 and it is transparent totally. Maybe there is some other error in your code? — sucicf1, Sep 17 '22 at 17:52

score 669 · Answer 1 · edited Apr 28 '17 at 21:28

669

You can set the background transparent of any layout, any view, or any component by adding this code in XML:

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

edited Apr 28 '17 at 21:28

Peter Mortensen

30,738
21
105
131

answered Mar 10 '12 at 12:31

Chirag Patel

11,416
3
26
38

5

I had an issue on older versions of Android that didn't handle #ff000000 as pure transparent. Using this fixed it. – loeschg Mar 15 '13 at 15:05
11

Probably because #FF 00 00 00 = 100% black. – Derk-Jan Sep 09 '13 at 20:30
3

@Ioeschg The first 2 letters are for the alpha channel. #00xxxxxx would be transparent, whereas x is any hex value you want. – WSBT Oct 23 '13 at 15:29
11

And the equivalent programatically if somebody is interested is Android.Resource.Color.Transparent :) – leoneboaventura Oct 23 '14 at 09:01
This shows as pure black on my app if i run it on the emulator using API 16 or 4.1.1. Any other workaround? – Alex Mar 05 '15 at 10:42
6

@undroid try `android:background="#00ffffff"` – ban-geoengineering Jun 11 '15 at 14:50
try Color.TRANSPARENT – Vijay Jul 06 '15 at 12:48
I get `No resource found that matches the given name (at 'android:statusBarColor' with value '@color/transparent').` when I try this – Chucky Feb 28 '19 at 09:25

Harshad · Accepted Answer · 2018-10-23T07:20:35.240

620

In your XML set the Background attribute to any colour, White(#FFFFFF) shade or Black(#000000) shade. If you want transparency, just put 80 before the actual hash code:

#80000000

This will change any colour you want to a transparent one.. :)

edited Oct 23 '18 at 07:20

answered Jul 29 '11 at 12:50

Harshad

7,904
3
24
42

3

@Harshad: Is it possible to set, say, a 40% transparency for a background image set with `View.setBackgroundResource(R.drawable.something)`? – Luis A. Florit Jan 14 '13 at 02:21
@LuisA.Florit I found this link where you need to multiply by 0.4(40/100) to your RGB value. Not sure if this is helpful but you can give it a try. http://forums.esri.com/Thread.asp?c=93&f=1730&t=223940 – Harshad Jan 14 '13 at 12:30
3

@Harshad: Sorry, I didn't understand your answer. I don't have any RGB value, but a TextView with a background image that I want to be, say, 50% transparent. But, anyway, I found the answer here in stackoverflow: `View.getBackground().setAlpha(50)`. Couldn't be simpler, right? :o) Anyway, thanks for your help!! – Luis A. Florit Jan 14 '13 at 22:32
24

If you add any number from 01 to 99 before the actual hash code, it will give you the transparency. Eg: Black with more transparency - `#10000000` Black with less transparency - `#99000000` – AnhSirk Dasarp Feb 06 '13 at 07:12
65

@AnhSirkDasarp Not only from 01 to 99, as the rest of the numbers these are also hexadecimal so you can put anything from 00 to ff. For fifty percent transparent you should put 80 instead of 50, and for the others you have some basic calculations to do... – Nemanja Kovacevic Feb 18 '13 at 11:29
I had #4e4747 as the RGB value which used to give me solid brown color. Changing it to #804e4747 is giving me black color with little transparency. why ? – Md. Arafat Al Mahmud Nov 26 '13 at 06:49
try Color.TRANSPARENT – Vijay Jul 06 '15 at 12:48
Thanks! I was trying to apply a gradient to an imageview so I had to set 80 to both the gradient and the background of the imageview. – ShahNewazKhan Sep 23 '15 at 19:25
It is worth noting that this doesn't make it fully transparent. Use #00000000 instead if that's what you're going for. – Luke May 13 '17 at 22:33
@MarcoSalerno May be it is working but it doesn't have anything behind it. Try to overlap the views to see if it is working. – Harshad Oct 23 '18 at 07:23
this should help, what u should choose between "FF" and "00". https://www.tutorialspoint.com/how-to-make-a-background-20-transparent-on-android – subrata sharma Aug 03 '21 at 08:12

score 189 · Answer 3 · edited May 04 '17 at 08:53

In addition to what Harshad mentioned:

Two hexadecimal characters can be appended to any hexadecimal color code. The first two characters in an 8-digit hex color code represents its opacity in Android.

The two hexadecimal characters can range from 00 to FF. For example,

Normal opaque black hex- "#000000"
Fully transparent - "#00000000"
Fully opaque - "#FF000000"
50% transparent - "#7F000000"

This way you can change any color to any level of transparency.

To find the hexadecimal prefix from a percentage:

Divide the percentage number by 100 and multiply by 255 to get the decimal value. Convert the decimal to hexadecimal here.

For example, for 50%, 50/100 * 255 = 127. Using the link we get hexadecimal value 7F.

Source: Android: how to create a transparent or opaque background

actually, perfect 50% transparency is 7F and not 80 ;) – shinyuX Apr 30 '14 at 16:32 — shinyuX, Apr 30 '14 at 16:32

score 184 · Answer 4 · edited Jun 20 '20 at 09:12

If you want to add 20% or 30% transparency, you should pre-pend two more characters to the hexadecimal code, like CC.

Note

android:background="#CCFF0088" in XML

where CC is the alpha value, FF is the red factor, 00 is the green factor, and 88 is the blue factor.

Some opacity code:

Hex Opacity Values

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5%  — 0D
0% —  00

You can also set opacity programmatically like:

yourView.getBackground().setAlpha(127);

Set opacity between 0 (fully transparent) to 255 (completely opaque). The 127.5 is exactly 50%.

You can create any level of transparency using the given formula. If you want half transparent:

 16 |128          Where 128 is the half of 256.
    |8 -0         So it means 80 is half transparent.

And for 25% transparency:

16 |64            Where 64 is the quarter of 256.
   |4 -0          So it means 40 is quarter transparent.

This answer should be mark is the best. Thanks bro <3 – Nghien Nghien May 25 '23 at 03:39 — Nghien Nghien, May 25 '23 at 03:39

score 64 · Answer 5 · edited Jul 02 '20 at 03:52

Use the below code for black:

<color name="black">#000000</color>

Now if you want to use opacity then you can use the below code:

<color name="black">#99000000</color>

And the below for opacity code:

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

score 29 · Answer 6 · edited Apr 28 '17 at 21:35

29

There is already a predefined constant. Use Color.TRANSPARENT.

edited Apr 28 '17 at 21:35

Peter Mortensen

30,738
21
105
131

answered Mar 20 '13 at 09:01

Ahmad Dwaik 'Warlock'

5,953
5
34
56

1

Use of a constant should be the best/cleanest way to go about it! But in this case, the value of `Color.TRANSPARENT` is set to `0x00000000` (not the expected fully opaque `0xFF000000`), so depending on how you go about it, this constant might not really help accomplishing transparency! Still +1 for recommending a constant! – Levite Feb 05 '15 at 10:13

score 25 · Answer 7 · edited Apr 28 '17 at 21:28

25

There is already a transparent built into Android: R.color.transparent. http://developer.android.com/reference/android/R.color.html#transparent

But I think you may want to make the background of the image that you are placing into the WebView transparent, for example, with a transparent PNG, rather than the ImageView background. If the actual image is not at all see-through then the ImageView background can't be seen through it.

edited Apr 28 '17 at 21:28

Peter Mortensen

30,738
21
105
131

answered Sep 30 '09 at 14:52

Intrications

16,782
9
50
50

the image is transparent..it didnt hav any background..i hv also tried setting imageview background as u hv said..but it didnt work...plz help.. – mudit Oct 01 '09 at 10:53
Can you post some more details such as a link to the image you are using and the code and layout you are using? – Intrications Oct 01 '09 at 11:18

score 21 · Answer 8 · answered Apr 11 '18 at 05:14

21

Try this code :)

Its an fully transparent hexa code - "#00000000"

answered Apr 11 '18 at 05:14

Agilanbu

2,747
2
28
33

score 20 · Answer 9 · answered May 31 '12 at 13:07

20

In case you want it in code, just:

mComponentName.setBackgroundColor(Color.parseColor("#80000000"));

answered May 31 '12 at 13:07

Felipe Vasconcelos

2,067
1
22
29

score 15 · Answer 10 · edited Feb 14 '18 at 05:08

15

In your XML file, set an attribute "Alpha"

such as

android:alpha="0.0" // for transparent
android:alpha="1.0" // for opaque

You can give any value between 0.0 to 1.0 in decimal to apply the required transparency. For example, 0.5 transparency is ideal for disabled component

edited Feb 14 '18 at 05:08

Srinivas

176
2
12

answered Jun 11 '17 at 03:43

Jay Ryu

977
8
7

score 12 · Answer 11 · edited Apr 28 '17 at 21:30

12

Or, as an alternate, parse the resource ID with the following code:

  mComponentName.setBackgroundColor(getResources().getColor(android.R.color.transparent));

edited Apr 28 '17 at 21:30

Peter Mortensen

30,738
21
105
131

answered Aug 10 '12 at 06:22

Octoth0rpe

2,267
4
19
21

is there an equivalent for androidX like **androidx**.R.color.transparent? – Erkan Sep 28 '22 at 11:49

Fortran · Answer 12 · 2021-06-25T14:12:20.180

11

In xml

@android:color/transparent

In code

mComponentName.setBackgroundResource(android.R.color.transparent)

edited Jun 25 '21 at 14:12

answered Dec 18 '20 at 14:01

Fortran

2,218
2
27
33

score 6 · Answer 13 · edited Apr 28 '17 at 22:03

6

In Android Studio it is very simple to adjust color and opacity using a built-in tool:

edited Apr 28 '17 at 22:03

Peter Mortensen

30,738
21
105
131

answered Jan 26 '17 at 03:30

Jayakrishnan

4,457
29
29

just click on it. @PeterMortensen – Jayakrishnan May 01 '17 at 05:03

score 5 · Answer 14 · answered Aug 01 '13 at 02:47

5

For those who are still facing this problem, you may try this
element.getBackground().setAlpha(0);

answered Aug 01 '13 at 02:47

SuicideSheep

5,260
19
64
117

I get a `NullPointerException: Attempt to invoke virtual method 'void android.graphics.drawable.Drawable.setAlpha(int)' on a null object reference` – IgorGanapolsky Sep 08 '15 at 17:56
1

@IgorGanapolsky: try to watch your `element` see if it's a null object – SuicideSheep Sep 09 '15 at 02:48

score 5 · Answer 15 · edited Apr 28 '17 at 21:38

5

Use the following for complete transparency:

#00000000

When I tried with #80000000 I got a black transparent overlay which I don't want. Try to change the first two digits; it controls the level of transparency, like

edited Apr 28 '17 at 21:38

Peter Mortensen

30,738
21
105
131

answered Dec 11 '14 at 04:16

Ameen Maheen

2,719
1
28
28

perfect color on transparent dark – Najib.Nj Sep 11 '15 at 10:40

score 5 · Answer 16 · answered Feb 27 '15 at 09:51

5

One more simple way:

mComponentName.setBackgroundResource(android.R.color.transparent);

answered Feb 27 '15 at 09:51

Andrei Aulaska

1,098
14
22

score 4 · Answer 17 · answered Apr 09 '15 at 14:59

4

Another working option I came across is to set android:background="@null"

answered Apr 09 '15 at 14:59

clwhisk

1,805
1
18
17

score 2 · Answer 18 · edited Apr 28 '17 at 21:34

2

You could also use View.setAlpha(float) to change the visibility precisely.

0 would be transparent, 1 fully visible. ;)

edited Apr 28 '17 at 21:34

Peter Mortensen

30,738
21
105
131

answered Mar 18 '13 at 21:29

jns

1,250
1
13
29

1

That changes the View's alpha, NOT its background! – IgorGanapolsky Sep 08 '15 at 17:57
The whole view will then be transparent including the content/picture in it, your setting the alpha which is wrong in this case. The user want's to keep the transparency of an Image not change the Image to be transparent. – Haroun Hajem Jan 17 '20 at 23:10

score 2 · Answer 19 · edited Apr 28 '17 at 21:49

Try to use the following code. It will help you in full or more.

A .xml file designed to use this code to set background color:
```
android:background="#000000"
```
or
```
android:background="#FFFFFF"
```
Or you can set it programmatically as well.

Also you can use this code programmatically:

image.setBackgroundDrawable(getResources().getDrawable(
    R.drawable.llabackground));

Also this code for setting the background color as well programmatically:
```
image.setBackgroundColor(Color.parseColor("#FFFFFF"));
```

This code for the same programmatically:

image.setBackgroundColor(getResources().getColor(Color.WHITE));

The color depends on your choice of which color you want to use for transparent. Mostly use a white or #FFFFFF color.

Regarding R.drawable.llabackground: This line of code is for your style of the background, like something special or different for your purpose. You can also use this.

score 2 · Answer 20 · edited Apr 28 '17 at 22:05

2

If you use a drawable XML image you can make it transparent as shown in the picture below, or you can use a color code:

<color name="black">#99000000</color>

edited Apr 28 '17 at 22:05

Peter Mortensen

30,738
21
105
131

answered Mar 05 '17 at 05:54

Md Tariqul Islam

2,736
1
20
35

score 1 · Answer 21 · answered Jan 31 '20 at 21:00

Color definitions with transparency information may be in the form

#AARRGGBB or #ARGB.

You can use also the shorter value for full transparency: #0000.

Other values are e.g.:

white  grey   black
#FFFF  #F888  #F000 - full color
#EFFF  #E888  #E000
#DFFF  #D888  #D000
#CFFF  #C888  #C000
#BFFF  #B888  #B000
#AFFF  #A888  #A000
#9FFF  #9888  #9000
#8FFF  #8888  #8000
#7FFF  #7888  #7000
#6FFF  #6888  #6000
#5FFF  #5888  #5000
#4FFF  #4888  #4000
#3FFF  #3888  #3000
#2FFF  #2888  #2000
#1FFF  #1888  #1000
#0FFF  #0888  #0000 - full transparency

score 0 · Answer 22 · edited Apr 28 '17 at 21:51

0

Try this:

#aa000000

For transparency 000000 = black, you can change these six numbers for the color you want.

edited Apr 28 '17 at 21:51

Peter Mortensen

30,738
21
105
131

answered Jun 07 '15 at 04:45

Alex Zaraos

6,443
2
26
21

what is your resource to use aa before color hex – Mina Fawzy Nov 12 '15 at 11:26

score 0 · Answer 23 · edited Mar 28 '17 at 12:19

0

ImageView.setBackground(R.drawable.my_background);

ImageView.setBackgroundResource(R.color.colorPrimary);

ImageView.getImageAlpha();

ImageView.setAlpha(125); // transparency

edited Mar 28 '17 at 12:19

Harshad Pansuriya

20,189
8
67
95

answered Nov 03 '16 at 21:57

Ravi Naidu

11
4

1

Although this code may help to solve the problem, it doesn't explain _why_ and/or _how_ it answers the question. Providing this additional context would significantly improve its long-term value. Please [edit] your answer to add explanation, including what limitations and assumptions apply. – Toby Speight Nov 03 '16 at 22:19

score 0 · Answer 24 · answered Jan 04 '21 at 08:27

0

use RelativeLayout which has 2 imageViews in . and set transparency code on the top imageView.

transparency code :

<solid android:color="@color/white"/>
<gradient android:startColor="#40000000"   android:endColor="#FFFFFFFF" android:angle="270"/>

answered Jan 04 '21 at 08:27

Mosayeb Masoumi

481
4
10

score 0 · Answer 25 · answered Jul 28 '21 at 11:45

0

Convert Percentage to hex using any online tool & than simply add it on front of color value

Example: using https://www.joshuamiron.com/percent-to-hex-converter

80% opacity would be

 <color name="opaque_80_percent">#CC000000</color>

answered Jul 28 '21 at 11:45

Hitesh Sahu

41,955
17
205
154

Set transparent background of an imageview on Android

25 Answers25

Note

Some opacity code:

Hex Opacity Values

Convert Percentage to hex using any online tool & than simply add it on front of color value

Linked

Related