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.

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>

Miyamoto

thanks I solved it already. but I will be proud if you answer more. #6653047 – Miyamoto

try this webgradients.com – Cupule

There are some brilliant examples here -->blog.jakelee.co.uk/… – Tanner

Answer 1

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.

Salvatoresalvay

Answer 2

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"

Confirmation

Answer 3

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>

Calyces

What if i want to put a gradient in the background for linear layout?? – Billetdoux

@Ankit It will scale to fill layout – Shugart

@Ankit: You make a drawable .xml file, copy & paste the above code into this file, fave fun. <RelativeLayout ... android:background="@drawable/your_xml_name" ... > – Jannajannel

Also, if you want the gradient to fade across the whole screen, make the center band 50% opacity. In this case "#50555994" – Wiley

@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 – Sickert

@Sickert try changing angles in multiples of 45 – Cata

Answer 4

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

Randle

I like CSS Matic this one more, for others to come – Congius

Answer 5

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>

Gouache

in the book I am reading it talks about putting them into the drawables folder. Do i need one per folder? – Feathering

Create on drawable folder and put the gradient.xml file in that from there you can access it.no need to create multiple folders. – Gouache

Answer 6

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);
    }

Chainplate

and it should be faster then using layer-lists – Chainplate

Worked for me perfectly. Thank You. – Odin

Answer 7

//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

Vernacularize

Answer 8

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>

Caterwaul

Answer 9

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

Mariettemarigold

Answer 10

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>

Charo

Answer 11

Kotlin extension function - sample use case

/**
 * gradient(200f, 0x80C24641.toInt(), 0x80FFFFFF.toInt())
 */
fun View.gradient(radius: Float, vararg colors: Int) {
    background = GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors).apply { cornerRadius = radius }
}

Orton