blocks|key|415675|text|为什么不创建一个镜像或9补丁镜像并使用它呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415676|下面的链接提供了一个很好的指南来指导你怎么做：|415677|http://android.amberfog.com/?p=247|offset|length|415678|如果你坚持使用形状，试试下面的网站(选择左下角的安卓系统)：http://angrytools.com/gradient/|415679|我创建了一个类似于此链接中的渐变(不精确)的渐变：http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269|415680|entityMap|0|LINK|mutability|MUTABLE|url|1|http://angrytools.com/gradient/|2|http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269^0|0|0|0|Y|0|0|U|V|1|0|P|27|2|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$F|Z|G|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@$F|13|G|14|1|15]]|A|$]]|$1|J|3|K|5|6|7|16|8|@]|9|@$F|17|G|18|1|19]]|A|$]]|$1|L|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|E]]|S|$5|O|P|Q|A|$R|T]]|U|$5|O|P|Q|A|$R|V]]]]

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:

<a href="http://android.amberfog.com/?p=247" rel="nofollow">http://android.amberfog.com/?p=247</a>

If you insist on using a Shape, try the site below (Select Android at bottom left):
<a href="http://angrytools.com/gradient/" rel="nofollow">http://angrytools.com/gradient/</a>

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

blocks|key|415707|text|首先，需要创建一个gradient.xml，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415708|<shape>
++++<gradient+android:angle="270"+android:endColor="#181818"+android:startColor="#616161"+/>

++++<stroke+android:width="1dp"+android:color="#343434"+/>
</shape>|code-block|syntax|javascript|415709|然后你需要在下面的layout.As背景中提到上面的渐变|415710|<?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>|415711|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

First you need to create a gradient.xml as follows

<pre><code>&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;
</code></pre>

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

<pre><code>&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;
</code></pre>

blocks|key|197529|text|你可以通过使用xml+Layer-List将顶部和底部的“带”组合成一个文件来创建这种“半渐变”的外观。每个带区都是一个xml形状。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|197530|有关详细教程，请参阅之前在SO上的回答：Multi-gradient+shapes。|197531|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList|1|https://stackoverflow.com/questions/4381033/multi-gradient-shapes^0|B|A|0|0|K|L|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

You can create this 'half-gradient' look by using an xml <a href="http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList" rel="noreferrer">Layer-List</a> 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: <a href="https://stackoverflow.com/questions/4381033/multi-gradient-shapes">Multi-gradient shapes</a>.

blocks|key|415737|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415738|<?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>|code-block|syntax|javascript|415739|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try with this :

<pre><code>&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;
</code></pre>

blocks|key|197575|text|或者你可以在代码中使用你在PSD中想到的任何东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|197576|++++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);
++++}|code-block|syntax|javascript|197577|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code> 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);
 }
</code></pre>

blocks|key|415784|text|下面的链接可能会帮助你，http://angrytools.com/gradient/+.This将在安卓中创建自定义渐变背景，就像在photoshop中一样。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|415785|entityMap|0|LINK|mutability|MUTABLE|url|http://angrytools.com/gradient/^0|C|V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Following link may help you <a href="http://angrytools.com/gradient/">http://angrytools.com/gradient/</a> .This will create custom gradient background in android as like in photoshop.

blocks|key|415803|text|//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);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|415804|请参阅此处的https://android--code.blogspot.in/2015/01/android-button-gradient-color.html|unstyled|offset|length|415805|entityMap|0|LINK|mutability|MUTABLE|url|https://android--code.blogspot.in/2015/01/android-button-gradient-color.html^0|0|6|24|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>//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);
</code></pre>

Refer from here
<a href="https://android--code.blogspot.in/2015/01/android-button-gradient-color.html" rel="noreferrer">https://android--code.blogspot.in/2015/01/android-button-gradient-color.html</a>

blocks|key|415810|text|在可绘制文件夹中使用此代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|415811|<?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>|code-block|syntax|javascript|415812|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use this code in drawable folder.

<pre><code>&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;
</code></pre>

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:

<img src="https://i.stack.imgur.com/Woq2z.jpg" alt="">

I can't because the <code>centerColor</code> spreads out to cover the bottom and top. 

<img src="https://i.stack.imgur.com/bbo6D.jpg" alt="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 <code>centerColor</code> that's not spread out?

This is code in XML of background button above.

<pre><code>&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;
</code></pre>

How to make gradient background in android

我想创建渐变背景，其中渐变在上半部分，在下半部分有纯色，如下图所示：​​我做不到，因为centerColor会分散到覆盖底部和顶部。​​如何制作像第一张图片那样的背景？如何制作不分散的小centerColor？这是以上背景按钮的XML代码。<shape xmlns:android="http://schemas.and...

问如何在android中制作渐变背景
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在android中制作渐变背景EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在android中制作渐变背景
EN