How to set transparency of a background image Android xml file

Question

I have put an image in as the background of my android application with the following line of code:

 android:background="@drawable/background"

I now want to make it transparent by 40% but how is this possible within the xml file? My exm file is shown below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
android:alpha="0.6"
android:orientation="vertical"
android:padding="30dp"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".SecondActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="5dp"
    android:text="Welcome"
    android:textColor="#292421"
    android:textSize="17sp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/TextView01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:text="This Android application is used to track and record the movements of a person throughout the university of ulster, Magee Campus. The tracking phase of the application can only be initiated whilst within the campus and off campus tracking is unavailable at this moment in time."
    android:textColor="#292421"
    android:textSize="17sp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="85dp"
        android:layout_weight="1"
        android:background="#E6E6FA"
        android:onClick="tracking"
        android:text="@string/tracking_service" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:padding="20dp" >

    </LinearLayout>

    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="85dp"
        android:layout_weight="1"
        android:background="#E6E6FA"
        android:onClick="help"
        android:text="Help" />

</LinearLayout>

Decoy · Answer 1 · 2014-04-04T15:38:44.413

49

You can set the alpha property:

android:alpha="0.4"

via code :

yourView.setAlpha(0.5f);

only the background :

yourView.getBackground().setAlpha(120);  // here the value is an integer not float

edited Apr 04 '14 at 15:38

answered Mar 14 '14 at 13:53

Decoy

1,598
12
19

2

I have found a problem with using this as my text on this page is also faded which I don't want, is there another way of doing this? – user3393962 Mar 14 '14 at 14:02
How do I do this if the background image is embedded into the root constraint layout itself? – isakbob Jul 19 '18 at 20:15

score 39 · Answer 2 · answered Apr 11 '17 at 09:01

39

If you have set an image as background then

 android:alpha="0.x"

will cause entire screen (child views) to fade. Instead you can make use of

android:backgroundTint="#80FFFFFF"
android:backgroundTintMode="src_over"

to fade only the background image without affecting the child views.

answered Apr 11 '17 at 09:01

Pramod Garg

2,183
1
24
29

1

backgroundTint and backgroundTintMode require API 21 and higher. – Mike Jan 26 '18 at 04:39
Best answer, this answer should be the accepted one. – ΩlostA Feb 04 '20 at 11:14
@Mike do you find a solution for API lower 21? – Amr Jyniat May 28 '20 at 16:55

score 24 · Answer 3 · answered Apr 07 '16 at 06:02

It can be done using custom drawable. Its a very old post but thought I should answer, might be helpful for someone.

Create a drawable xml resource with bitmap as the root say bg.xml.
set android:src="@drawable/background" to the image which you want as the background.
set android:alpha="0.4" to any value between 0 to 1 as per the required opacity.
now set the background of the root layout as newly created drawable xml resource i.e., bg.xml. This will only change the opacity of the background image of the layout without effecting opacity of the child elements of the layout.

Resources :
bg.xml

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background" android:alpha="0.4"/>

This is how your layout will look now :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg"
android:orientation="vertical"
android:padding="30dp"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".SecondActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="5dp"
    android:text="Welcome"
    android:textColor="#292421"
    android:textSize="17sp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/TextView01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:text="This Android application is used to track and record the movements of a person throughout the university of ulster, Magee Campus. The tracking phase of the application can only be initiated whilst within the campus and off campus tracking is unavailable at this moment in time."
    android:textColor="#292421"
    android:textSize="17sp" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="85dp"
        android:layout_weight="1"
        android:background="#E6E6FA"
        android:onClick="tracking"
        android:text="@string/tracking_service" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:padding="20dp" >

    </LinearLayout>

    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="85dp"
        android:layout_weight="1"
        android:background="#E6E6FA"
        android:onClick="help"
        android:text="Help" />

</LinearLayout>

score 16 · Answer 4 · edited Mar 01 '18 at 12:20

16

you can create a layer-list resource and set it to background property of your view (layout)

background_image_with_alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <bitmap
            android:alpha="0.2"
            android:src="@drawable/xxxxxx"
            android:gravity="fill">

        </bitmap>
    </item>

</layer-list >

edited Mar 01 '18 at 12:20

Eric Aya

69,473
35
181
253

answered Mar 01 '18 at 12:13

Pep Vivó

161
1
2

This is the correct answer if you don't want opacity to affect elements on the screen, just the background image – Seany242 Jun 05 '18 at 14:37
Great way to effect only the background's opacity AND not mess up your code with layout stuff. – TDG Sep 02 '18 at 16:27

Piyush · Answer 5 · 2014-03-14T14:18:42.677

set in your xml file

android:alpha="0.4"

which will be varies from 0 to 255.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:alpha="0.6"
 android:orientation="vertical"
 android:padding="30dp"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context=".SecondActivity" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:text="Welcome"
android:textColor="#292421"
android:textSize="17sp"
android:textStyle="bold" />

<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="This Android application is used to track and record the movements of a person throughout the university of ulster, Magee Campus. The tracking phase of the application can only be initiated whilst within the campus and off campus tracking is unavailable at this moment in time."
android:textColor="#292421"
android:textSize="17sp" />

<LinearLayout
 android:background="@drawable/background"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<Button
    android:id="@+id/button1"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="85dp"
    android:layout_weight="1"
    android:background="#E6E6FA"
    android:onClick="tracking"
    android:text="@string/tracking_service" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:padding="20dp" >

</LinearLayout>

<Button
    android:id="@+id/button2"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="85dp"
    android:layout_weight="1"
    android:background="#E6E6FA"
    android:onClick="help"
    android:text="Help" />

</LinearLayout>

alpha fades the text on the page as well so is it possible to use another way of doing this! — user3393962, Mar 14 '14 at 14:06
Yes you can use it dynamically.Want to set for whole application? — Piyush, Mar 14 '14 at 14:06
I just want it to fade the background image and the text to be clear which will be ontop of the image! So how would I set it to only effect the image? — user3393962, Mar 14 '14 at 14:10
So have you set background for layout in which ur TextView and imageview will be or only imageview? — Piyush, Mar 14 '14 at 14:10
It will be affected because u have set background for parent layout in which ur TextView s also include. if you want to ignore them then u have to set background for ur other LinearLayout which is child layout. — Piyush, Mar 14 '14 at 14:15
I don't understand, could you edit my question to show me what you mean? — user3393962, Mar 14 '14 at 14:17
the background image is only in that linear layout and does not cover the full background? — user3393962, Mar 14 '14 at 14:24
In your case if you set full background then TextView will be affected. — Piyush, Mar 14 '14 at 14:26

score 3 · Answer 6 · answered Jun 24 '17 at 18:22

3

You can use alpha property android:alpha="0.5"; (Between 0 and 1 )

answered Jun 24 '17 at 18:22

Ranjeet Chouhan

686
5
13

this is best way – Ranjeet Chouhan Jun 28 '17 at 20:06

score 2 · Answer 7 · answered Mar 14 '14 at 13:56

2

You can use alpha property (http://developer.android.com/reference/android/view/View.html#attr_android:alpha) for your View:

android:alpha="0.4"

answered Mar 14 '14 at 13:56

nikis

11,166
2
35
45

1

alpha fades the text on the page as well so is it possible to use another way of doing this! – user3393962 Mar 14 '14 at 14:06

score 2 · Answer 8 · answered Mar 14 '14 at 14:00

2

Try to use Drawable.setAlpha();

View backgroundImage = findViewById(R.id.background_image);
Drawable background = backgroundImage.getBackground();
background.setAlpha(80);

answered Mar 14 '14 at 14:00

score 0 · Answer 9 · answered Oct 06 '19 at 15:48

0

just use this line in your .xml file android:background="#ddxxxxxx" replace the xxxxxx with any color you want. refer https://alvinalexander.com/android/how-background-image-behind-translucent-opaque-textview for more details.

answered Oct 06 '19 at 15:48

Atul Giri

11
1

How to set transparency of a background image Android xml file

9 Answers9

Linked