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    lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle   gt       lt gradient          android startColor   6586F0          android centerColor   D6D6D6          android endColor   4B6CD6          android angle  90   gt       lt corners          android radius  0dp   gt     lt  shape gt

User · Answer

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"

User · Answer

Try with this     lt  xml version  1 0  encoding  UTF-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle   gt        lt gradient         android angle  90          android centerColor   555994          android endColor   b5b6d2          android startColor   555994          android type  linear    gt        lt corners          android radius  0dp   gt    lt  shape gt

User · Answer

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

User · Answer

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 amp 0 100 100 100 amp l 269

User · Answer

First you need to create a gradient xml as follows   lt shape gt       lt gradient android angle  270  android endColor   181818  android startColor   616161    gt        lt stroke android width  1dp  android color   343434    gt   lt  shape gt    Then you need to mention above gradient in the background of layout As follows   lt  xml version  1 0  encoding  utf-8   gt   lt 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       gt      lt  LinearLayout gt

User · Answer

Use this code in drawable folder    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  gt       lt solid android color   3f5063    gt       lt corners         android bottomLeftRadius  30dp          android bottomRightRadius  0dp          android topLeftRadius  30dp          android topRightRadius  0dp    gt       lt padding         android bottom  2dp          android left  2dp          android right  2dp          android top  2dp    gt       lt gradient         android angle  45          android centerColor   015664          android endColor   636969          android startColor   2ea4e7    gt       lt stroke         android width  1dp          android color   000000    gt   lt  shape gt

User · Answer

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

User · Answer

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

User · Answer

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

[android] How to make gradient background in android

Boilerplate

type="linear"

type="radial"

type="sweep"

center

Examples related to android

Examples related to background

Examples related to gradient

Examples related to shapes