How to make gradient background in android

Question

I want to create gradient background where the gradient is in the top half and there's a solid color in the bottom half, like in this image below:

I can't because the centerColor spreads out to cover the bottom and top.

In the gradient for the button, a white horizontal line fades over blue toward the top and botton.

How can I make a background like the first image? How can I make small centerColor that's not spread out?

This is code in XML of background button above.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient 
        android:startColor="#6586F0"
        android:centerColor="#D6D6D6"
        android:endColor="#4B6CD6"
        android:angle="90"/>
    <corners 
        android:radius="0dp"/>


</shape>

thanks I solved it already. but I will be proud if you answer more. http://stackoverflow.com/questions/6652547/how-to-make-a-double-gradient-with-xml-iphone-like — kongkea, Dec 18 '12 at 10:47
There are some brilliant examples here -->https://blog.jakelee.co.uk/a-few-experiments-with-android-drawable-gradients/ — ikmazameti, May 13 '21 at 22:08

Suragch · Answer 1 · 2017-07-17T03:51:45.397

Visual examples help with this kind of question.

Boilerplate

In order to create a gradient, you create an xml file in res/drawable. I am calling mine my_gradient_drawable.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

You set it to the background of some view. For example:

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

type="linear"

Set the angle for a linear type. It must be a multiple of 45 degrees.

<gradient
    android:type="linear"
    android:angle="0"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

type="radial"

Set the gradientRadius for a radial type. Using %p means it is a percentage of the smallest dimension of the parent.

<gradient
    android:type="radial"
    android:gradientRadius="10%p"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

type="sweep"

I don't know why anyone would use a sweep, but I am including it for completeness. I couldn't figure out how to change the angle, so I am only including one image.

<gradient
    android:type="sweep"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

center

You can also change the center of the sweep or radial types. The values are fractions of the width and height. You can also use %p notation.

android:centerX="0.2"
android:centerY="0.7"

score 340 · Answer 2 · edited Jun 08 '17 at 19:35

340

Try with this :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <corners 
        android:radius="0dp"/>

</shape>

edited Jun 08 '17 at 19:35

Majid

13,853
15
77
113

answered Dec 18 '12 at 10:14

Pratik Sharma

13,307
5
27
37

What if i want to put a gradient in the background for linear layout?? – Ankit Srivastava Nov 24 '13 at 17:18
@Ankit It will scale to fill layout – Gelldur Aug 30 '14 at 12:27
3

@Ankit: You make a drawable .xml file, copy & paste the above code into this file, fave fun. – TomeeNS Oct 03 '15 at 19:30
Also, if you want the gradient to fade across the whole screen, make the center band 50% opacity. In this case "#50555994" – Zachary Jul 08 '16 at 14:18
@Pratik Sharma How i can specify to start this gradiant from a specific portion? i mean i just want to start color change from right side a little bit – User Mar 17 '17 at 07:55
@User try changing angles in multiples of 45 – Manohar Oct 31 '17 at 07:41

score 66 · Accepted Answer · edited May 23 '17 at 11:47

66

You can create this 'half-gradient' look by using an xml Layer-List to combine the top and bottom 'bands' into one file. Each band is an xml shape.

See this previous answer on SO for a detailed tutorial: Multi-gradient shapes.

edited May 23 '17 at 11:47

Community

1
1

answered Dec 18 '12 at 10:11

Gunnar Karlsson

28,350
10
68
71

score 53 · Answer 4 · answered Jan 22 '14 at 11:30

53

Following link may help you http://angrytools.com/gradient/ .This will create custom gradient background in android as like in photoshop.

answered Jan 22 '14 at 11:30

Hitesh Bhalala

2,872
23
40

I like [CSS Matic](http://www.cssmatic.com/gradient-generator) this one more, for others to come – krozaine Dec 31 '15 at 11:24

Harish · Answer 5 · 2012-12-18T10:18:54.507

40

First you need to create a gradient.xml as follows

<shape>
    <gradient android:angle="270" android:endColor="#181818" android:startColor="#616161" />

    <stroke android:width="1dp" android:color="#343434" />
</shape>

Then you need to mention above gradient in the background of layout.As follows

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/gradient"
    >   
</LinearLayout>

edited Dec 18 '12 at 10:18

answered Dec 18 '12 at 10:10

Harish

3,122
2
31
46

in the book I am reading it talks about putting them into the drawables folder. Do i need one per folder? – JGallardo Nov 07 '14 at 03:47
1

Create on drawable folder and put the gradient.xml file in that from there you can access it.no need to create multiple folders. – Harish Nov 10 '14 at 06:32

score 26 · Answer 6 · answered Dec 20 '12 at 09:06

Or you can use in code whatever you might think of in PSD:

    private void FillCustomGradient(View v) {
        final View view = v;
        Drawable[] layers = new Drawable[1];

        ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
            @Override
            public Shader resize(int width, int height) {
                LinearGradient lg = new LinearGradient(
                        0,
                        0,
                        0,
                        view.getHeight(),
                        new int[] {
                                 getResources().getColor(R.color.color1), // please input your color from resource for color-4
                                 getResources().getColor(R.color.color2),
                                 getResources().getColor(R.color.color3),
                                 getResources().getColor(R.color.color4)},
                        new float[] { 0, 0.49f, 0.50f, 1 },
                        Shader.TileMode.CLAMP);
                return lg;
            }
        };
        PaintDrawable p = new PaintDrawable();
        p.setShape(new RectShape());
        p.setShaderFactory(sf);
        p.setCornerRadii(new float[] { 5, 5, 5, 5, 0, 0, 0, 0 });
        layers[0] = (Drawable) p;

        LayerDrawable composite = new LayerDrawable(layers);
        view.setBackgroundDrawable(composite);
    }

and it should be faster then using layer-lists – miroslavign Dec 21 '12 at 09:38 — miroslavign, Dec 21 '12 at 09:38
Worked for me perfectly. Thank You. – Ali Raza Jan 05 '22 at 05:09 — Ali Raza, Jan 05 '22 at 05:09

score 16 · Answer 7 · answered May 27 '17 at 18:54

//Color.parseColor() method allow us to convert
// a hexadecimal color string to an integer value (int color)
int[] colors = {Color.parseColor("#008000"),Color.parseColor("#ADFF2F")};

//create a new gradient color
GradientDrawable gd = new GradientDrawable(
GradientDrawable.Orientation.TOP_BOTTOM, colors);

gd.setCornerRadius(0f);
//apply the button background to newly created drawable gradient
btn.setBackground(gd);

Refer from here https://android--code.blogspot.in/2015/01/android-button-gradient-color.html

score 10 · Answer 8 · edited Jan 22 '20 at 06:14

Use this code in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#3f5063" />
    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="0dp" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
    <gradient
        android:angle="45"
        android:centerColor="#015664"
        android:endColor="#636969"
        android:startColor="#2ea4e7" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>

Feras Arabiat · Answer 9 · 2012-12-18T10:00:22.053

Why not create an image or a 9 Patch image and use that?

The link below has a nice guide on how to do it:

http://android.amberfog.com/?p=247

If you insist on using a Shape, try the site below (Select Android at bottom left): http://angrytools.com/gradient/

I've created a similar gradient (not exact) to the one you have at this link: http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269

score 1 · Answer 10 · answered Aug 18 '22 at 10:47

Simple Way

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
        android:startColor="@color/choclate_light1"
        android:centerColor="@color/choclate_light"
        android:endColor="@color/choclate"
        android:angle="90"/>
    <!--If you need then use Corners-->
    <!--<corners
        android:radius="@dimen/_20sdp"/>-->
</shape>