How to make gradient background in android
AndroidBackgroundGradientShapesAndroid Problem Overview
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>
Android Solutions
Solution 1 - Android
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"
Solution 2 - Android
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>
Solution 3 - Android
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.
Solution 4 - Android
Following link may help you http://angrytools.com/gradient/ .This will create custom gradient background in android as like in photoshop.
Solution 5 - Android
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>
Solution 6 - Android
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);
}
Solution 7 - Android
//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
Solution 8 - Android
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>
Solution 9 - Android
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