我该如何画这个边框?

时间:2017-08-21 08:27:08

标签: android android-canvas

如何绘制此渐变边框(边框淡出为透明)和径向渐变背景?

我的代码:

Drawable/bg.xml
        Radial gradient code is here    
Drawable/border.xml
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@android:color/holo_blue_light"/>
                    <corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
                </shape>
            </item>
            <item android:left="3dp" android:right="3dp" android:top="2dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/white"/>
                    <corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
                </shape>
            </item>
            <item android:height="5dp"  android:left="30dp" android:right="30dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/colorPrimary"/>
                    <corners android:topLeftRadius="100dp" android:topRightRadius="200dp"/>
                    <gradient android:endColor="@color/transparent"
                        android:centerColor="@color/white"
                        android:startColor="@color/transparent"/>
                </shape>
            </item>
            <item>
                <shape android:shape="rectangle">
                    <gradient android:endColor="@color/white"
                        android:startColor="@android:color/transparent"
                        android:angle="-90" />
                </shape>
            </item>

我想要这个结果:

My code result

2 个答案:

答案 0 :(得分:1)

在drawable文件夹中创建此rectangle.xml文件 将此代码复制到其中。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="270"
                android:endColor="#000000"
                android:startColor="#FFFFFF" />
            <corners android:radius="10dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#af25e1" />
            <corners android:radius="10dp" />
            <size
                android:width="250dp"
                android:height="150dp" />
        </shape>
    </item>
</layer-list>

并将其设置为容器的背景 您可以根据需要进行更改

希望它适合你。

答案 1 :(得分:1)

<?xml version="1.0" encoding="utf-8"?>
<layer-list  xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_blue_light"/>
            <corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
        </shape>
    </item>

    <item android:left="3dp" android:right="3dp" android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:topLeftRadius="100dp" android:topRightRadius="100dp"/>
        </shape>
    </item>

    <item  android:width="40dp" android:left="70dp" android:right="200dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary"/>

            <gradient android:endColor="@color/white"
                android:startColor="@color/transparent"/>
        </shape>
    </item>

    <item android:width="40dp" android:left="240dp" android:right="20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <gradient android:endColor="@color/transparent"
                android:startColor="@color/white"/>
        </shape>
    </item>

    <item android:left="110dp" android:right="120dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <gradient android:endColor="@color/white"
                android:startColor="@color/transparent"
                android:angle="-90" />
        </shape>
    </item>
</layer-list>