51

Simply, how to make a TextView transparent? (Not full transparency)

I searched the docs and the StackNetwork and couldn't find it? I guess there is something like this.

Thanks.

UPDATE

This is the XML code:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:background="@drawable/background">

    <ImageView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/header"
    android:src="@drawable/logo1"
    />
    <ListView android:id="@android:id/list"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:paddingRight="5dp"
    android:scrollbarStyle="outsideOverlay"
    android:cacheColorHint="#00000000" />


    <TextView
    android:id="@+id/footer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="25sp"
    android:singleLine="true"
    android:background="#07000000"
    android:textColor="#FFFFFF"
    android:text="rrrrr" />

 </LinearLayout>

I want the footer TextView to be transparent so that the ListView items can be seen while scrolling

iTurki
  • 16,292
  • 20
  • 87
  • 132
  • I have a ListView and I added a TextView at the very buttom. I want this TextView to be transparent so that the ListView items can be seen while scrolling. – iTurki Jul 07 '11 at 10:21
  • @ChiragRaval: This is the most unconstructive comment someone could make. This is obviously a valid question. Please refrain from commenting something like that ever again. – sleeplessnerd Jun 08 '12 at 17:21

15 Answers15

114

See the Android Color resource documentation for reference.

Basically you have the option to set the transparency (opacity) and the color either directly in the layout or using resources references.

The hex value that you set it to is composed of 3 to 4 parts:

  • Alpha (opacity), i'll refer to that as aa

  • Red, i'll refer to it as rr

  • Green, i'll refer to it as gg

  • Blue, i'll refer to it as bb

Without an alpha (transparency) value:

android:background="#rrggbb"

or as resource:

<color name="my_color">#rrggbb</color>

With an alpha (transparency) value:

android:background="#aarrggbb"

or as resource:

<color name="my_color">#aarrggbb</color>

The alpha value for full transparency is 00 and the alpha value for no transparency is FF.

See full range of hex values below:

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 experiment with values in between those.

Marmoy
  • 8,009
  • 7
  • 46
  • 74
  • Really great. I understand it now. However, I can't make `ListView`'s items appear behind the `TextView` ! The whole purpose of making the `TextView` transparent is to make list items appear behind it. Please take a look at the XML code and tell me what's wrong ? – iTurki Jul 07 '11 at 11:02
  • @Videre Thank you very much for provide a great answer – Krishna Prasad Apr 21 '13 at 12:39
49

Below code for black:-

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

Now if i want to use opacity than you can use below code :-

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

and below for 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

refer Understanding colors on Android (six characters)

Community
  • 1
  • 1
duggu
  • 37,851
  • 12
  • 116
  • 113
44

Please try this piece of code..

<TextView 
   android:id="@+id/txtview1"
   android:layout_width="wrap_content" 
   android:background="@drawable/bg_task" 
   android:layout_height="wrap_content" 
   android:textSize="14sp" 
   android:singleLine="true"
   android:textColor="#FFFFFF" />

Used background image as transparent so may be solved that.

OR

android:background="#07000000"

OR

Please try below ...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:gravity="center_horizontal" android:orientation="vertical"
    android:background="@drawable/main_bg">
    <ImageView android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:id="@+id/header"
        android:src="@drawable/btn_complete" />
    <RelativeLayout android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ListView android:id="@+id/list" android:layout_width="fill_parent"
            android:layout_height="fill_parent" android:layout_weight="1"
            android:paddingRight="5dp" android:scrollbarStyle="outsideOverlay"
            android:cacheColorHint="#00000000" />
        <TextView android:id="@+id/footer" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:textSize="25sp"
            android:singleLine="true" android:background="#07000000"
            android:textColor="#FFFFFF" android:text="rrrrr"
            android:layout_centerInParent="true"
            android:layout_alignParentBottom="true" />
    </RelativeLayout>
</LinearLayout>
zzlalani
  • 22,960
  • 16
  • 44
  • 73
Nikhil
  • 16,194
  • 20
  • 64
  • 81
  • Doesn't work! I updated the question with my XML code `including yours also`. Check it plz – iTurki Jul 07 '11 at 10:32
  • The `#07000000` works now. But still I can't make `ListView`'s items appear behind it ! Any Idea ? – iTurki Jul 07 '11 at 10:58
  • 1
    REALLY GREAT. You solve it dude :D . You just need to add this to the `TextView` tag: `android:layout_alignParentBottom="true"` to align it to the buttom. Thanks @Nik – iTurki Jul 07 '11 at 11:10
30

Use this:

android:background="@android:color/transparent"
Justin
  • 84,773
  • 49
  • 224
  • 367
darvinda
  • 359
  • 3
  • 2
  • This one is the best since it's so easy to know what the code "color/transparent" does when reading it again later. – Ola Ström Feb 02 '22 at 09:30
12

<TextView android:alpha="0.3" ..., for example.

P Varga
  • 19,174
  • 12
  • 70
  • 108
7

To set programmatically:

setBackgroundColor(Color.TRANSPARENT);

For me, I also had to set it to Color.TRANSPARENT on the parent layout.

Aaron
  • 1,024
  • 11
  • 11
7

Although this answer is very late but might help other developer so I'm posting it here.

Answers above showing only how to set transparent background of TextView. We can achieve transparent Textview backcgorund in two way:

  1. By setting opacity code such as #88000000 in android:background attribute
  2. By setting android:alpha="0.5" attribute to TextView

Second approach is better because it gives flexibility to set background with different color and then setting setting opacity to widget using android:alpha="0.2"

Example

<TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:alpha="0.3"
        android:textColor="@color/white"
        android:textStyle="bold"/>
Geek
  • 1,510
  • 14
  • 17
3

If you are looking for something like the text view on the image on the pulse app do this

 android:background="#88000000"
android:textColor="#ffffff"
Vrashabh Irde
  • 14,129
  • 6
  • 51
  • 103
2

This question has many answers, but only a few are easy to understand.

Just to sum it up and make it clear:


The best solution to set a color transparent in XML would be to use:
(by @darvinda)

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

And easiest solution to set it with Java code would be:
(by @Aaron)

setBackgroundColor(Color.TRANSPARENT);

And to explain what the alpha channel ("the transparency of the color") is:

  • Alpha is the transparency of the color
  • Set the Alpha value to 00 (hex) to make any color fully opaque
  • Set the Alpha value to ff (hex) to make it transparent (the color doesn't matter anymore).

So the alpha channel represents the degree of transparency in an alpha-rgb color space. To make something transparent it doesn't matter with rgb-color you use, as long as the "alpha"-color is set to 00.

The values (hex) in an alpha-rgb color space are:
"#aarrggbb" (a=alpha, r=red, g=green b=blue)

Snostorp
  • 544
  • 1
  • 8
  • 14
1

Everyone is answering correctly about the transparency but not listening to what the guy needs in regards to the list scrolling behind the footer.

You need to make the footer part of your ListView. At the moment the list won't scroll behind because the layout of the ListView does not go behind the footer view with the transparency. Make a RelativeLayout and position the transparency at the bottom.

1

In case someone wants to do this in the programming way! Do the following: Update the color file in your values folder with this.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="transparent">#00ffffff</color> <!--This is the transparency line-->
</resources>

then call the transparency programitically

your_textview.setBackgroundResource(R.color.transparent);
The Billionaire Guy
  • 3,382
  • 28
  • 31
1

try to set the transparency with the android-studio designer in activity_main.xml. If you want it to be transparent, write it for example like this for white: White: #FFFFFF, with 50% transparency: #80FFFFFF This is for Kotlin tho, not sure if that will work the same way for basic android (java).

Aaron
  • 21
  • 2
1

Try setting android:background="#00000000" in TextView. Setting alpha of colour 00 will make the background transparent.

I haven't tried this, but it should work.

Udayan
  • 1,374
  • 1
  • 11
  • 20
  • 2
    what do you mean by: `Setting alpha of colour 00` ? – iTurki Jul 07 '11 at 10:24
  • 1
    The alpha (or transparent) color is set by the first to hex-digits after the # in an "aarrggbb" (a=alpha, r=red, g=green b=blue) color space. So any color starting with #00 would be completely transparent. – Ola Ström Feb 02 '22 at 09:28
0
setBackgroundColor(Color.TRANSPARENT);

The simplest way

Jimmy
  • 11
  • 3
0

Hi Please try with the below color code as textview's background.

android:background="#20535252"

Chirag
  • 56,621
  • 29
  • 151
  • 198