How to set background image with transparent gradient color in android?

Question

I am newbie in android development. My goal is set the background image with gradient transparent color,I tried many ways but I can't achieve this goal.Can any one help me?. I have attached the sample screen shot.

Source Code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bc"
    android:orientation="vertical"
    android:paddingLeft="20dp"
    android:alpha="0.7"
    android:id="@+id/about"
    android:paddingRight="20dp"
    android:paddingTop="60dp">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/otp_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:hintTextAppearance="@style/hintStyle">

        <EditText
            android:id="@+id/mobNo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_mob"
            android:inputType="number"
            android:singleLine="true"
            />
    </android.support.design.widget.TextInputLayout>


    <Button
        android:id="@+id/submit"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="@color/colorPrimary"
        android:text="@string/submit"
        android:textColor="@android:color/white"/>

</LinearLayout>

Advance Thanks.

share what you ve done. Also check this http://stackoverflow.com/questions/3823607/how-to-make-transparent-gradient — masp, Sep 19 '16 at 05:44
@Kalanidhi set background of transparent for ex: #50004c00 hex code for green transperency — Damini Mehra, Sep 19 '16 at 05:54

kevz · Answer 1 · 2016-09-19T06:12:23.607

Below are the hex 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

if you want to set 50% transparent black colour the do as below -

<color name="transparentBlack">#80000000</color>

Update:

You can use gradient as below to set background -

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#008000"
        android:endColor="#FFFF00"
        android:angle="90"
        android:type="linear"
        android:dither="true"
        />
</shape>

There is a colour name "GreenYellow", if that is what u are looking for the colour code is as below-

GreenYellow:    ADFF2F

how to form two color with gradient format?like green and yellow with gradient format — Kalanidhi, Sep 19 '16 at 05:48

score 3 · Answer 2 · answered Sep 19 '16 at 05:48

just attach

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

these two characters in front of your green color. e.g. #62cf51 is your start green color then you can use #9962cf51 color for transparency. In this example I have added 60% of transparency, you can use as per your requirement.

score 2 · Answer 3 · edited Jul 08 '19 at 10:36

Try this this is work for me,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/images"
        android:text="Hello World!" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/trans"
        android:paddingBottom="50dp"
        android:paddingTop="50dp">

        <EditText

            android:id="@+id/ed_text1"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_margin="15dp"
            android:background="#80ffffff" />

        <EditText
            android:id="@+id/ed_text2"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_below="@+id/ed_text1"
            android:layout_margin="15dp"
            android:background="#80ffffff" />


    </RelativeLayout>


</RelativeLayout>



and trans.xml drawable


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#6066ff66"
        android:centerColor="#6066ff66"
        android:endColor="#6066ff66"
        android:angle="90"
        />
</shape>

score 1 · Answer 4 · answered Sep 19 '16 at 05:49

You can always achieve this things with creating new drawable xml resource. create a new drawable resource

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@android:color/transparent"
        android:endColor="#20403f4c"
        android:angle="90"
        android:type="linear"
        android:dither="true"
        />
</shape>

Set it to the background of any element. If you want to change the transparency, the answer above will help.

score 1 · Answer 5 · answered Sep 19 '16 at 06:05

You can edit this as you want. add edit text and all to the below layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/about"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="50"
    android:background="@mipmap/ic_launcher"
    android:orientation="vertical" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="50"
    android:background="@mipmap/ic_launcher"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#BF228B22">

    </RelativeLayout>


</LinearLayout>

Yes , But I need one more clarification. How can I make gradient color with green with yellow? — Kalanidhi, Sep 19 '16 at 07:03

score 1 · Answer 6 · answered Sep 19 '16 at 06:10

try this ans:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff99"
android:orientation="vertical"
android:id="@+id/about"
>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#20403f4c"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true">

<android.support.design.widget.TextInputLayout
    android:id="@+id/otp_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/hintStyle">

    <EditText
        android:id="@+id/mobNo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/hint_mob"
        android:inputType="number"
        android:singleLine="true"
        />
</android.support.design.widget.TextInputLayout>


<Button
    android:id="@+id/submit"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="80dp"
    android:background="@android:color/transparent"
    android:text="submit"
    android:textColor="@android:color/black"/>
</RelativeLayout>

or change background of this android:background="#20403f4c" according to your transparency

How to set background image with transparent gradient color in android?

6 Answers6