首页 文章

如何在android中制作渐变背景

提问于
浏览
159

我想创建渐变背景,其中渐变位于上半部分,下半部分是纯色,如下图所示:

我不能,因为 centerColor 展开以覆盖底部和顶部 .

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

如何制作像第一张图像的背景?如何制作不散布的小 centerColor

这是上面背景按钮的XML代码 .

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

9 回答

  • 52

    您可以使用xml Layer-List将顶部和底部'bands'组合到一个文件中来创建此'half-gradient'外观 . 每个乐队都是xml形状 .

    有关详细教程,请参阅此前的答案:Multi-gradient shapes .

  • 0

    试试这个:

    <?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>
    
  • 21

    视觉示例有助于解决这类问题 .

    Boilerplate

    要创建渐变,请在res / drawable中创建xml文件 . 我在调用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>
    

    您将其设置为某个视图的背景 . 例如:

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

    type =“linear”

    angle 设置为 linear 类型 . 它必须是45度的倍数 .

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

    enter image description here

    type =“radial”

    gradientRadius 设置为 radial 类型 . 使用 %p 表示它是父项最小维度的百分比 .

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

    enter image description here

    type =“sweep”

    我不知道为什么有人会使用扫描,但我要包括它以保持完整性 . 我无法弄清楚如何改变角度,所以我只包括一个图像 .

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

    enter image description here

    中心

    您还可以更改扫描或径向类型的中心 . 值是宽度和高度的分数 . 您也可以使用 %p 表示法 .

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

    enter image description here

  • 262

    以下链接可以帮助你http://angrytools.com/gradient/ . 这将在Android中创建自定义渐变背景,就像在photoshop中一样 .

  • 45

    首先,您需要创建一个gradient.xml,如下所示

    <shape>
        <gradient android:angle="270" android:endColor="#181818" android:startColor="#616161" />
    
        <stroke android:width="1dp" android:color="#343434" />
    </shape>
    

    然后你需要在布局的背景中提到上面的渐变 . 如下

    <?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>
    
  • 5

    或者您可以在代码中使用您在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);
        }
    
  • 186
    //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);
    

    请参考这里https://android--code.blogspot.in/2015/01/android-button-gradient-color.html

  • 1

    为什么不创建图像或9补丁图像并使用它?

    以下链接有一个很好的指导如何做到这一点:

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

    如果您坚持使用Shape,请尝试以下网站(在左下角选择Android):http://angrytools.com/gradient/

    我创建了一个与此链接相似的渐变(不完全相同):http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269

  • 26

    在drawable文件夹中使用此代码

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

相关问题