如何为按钮编写内外渐变代码

Question

我想实现两个渐变： Goal gradient images

对于登录我无法实现目标。
为了注册，我编写了以下可绘制对象：

XML:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item android:right="@dimen/button_shadow_margin" android:top="@dimen/button_shadow_margin">
            <shape>
                <corners android:radius="@dimen/button_shadow_corner_radius" />
                <solid android:color="@color/shadow_black" />
            </shape>
        </item>
        <item android:bottom="2dp" android:left="2dp">
            <shape>
                <gradient android:angle="270" android:endColor="@color/button_background_light" android:startColor="@color/button_background_light" />
                <stroke android:width="1dp" android:color="@color/button_background_light" />
                <corners android:radius="@dimen/button_corner_radius" />
                <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

</selector>

请提出登录渐变的解决方案

Answer 1

尝试使用下面的可绘制对象，根据需要更改颜色和大小。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <gradient
                android:endColor="#ffffff"
                android:centerColor="#0000ff"
                android:startColor="#0052ff"
                android:type="linear"/>
            <corners
                android:radius="8dp"/>
        </shape>
    </item>

    <item
        android:left="4dp"
        android:right="4dp"
        android:top="4dp"
        android:bottom="4dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#000000"/>
            <corners
                android:radius="8dp"/>
        </shape>
    </item>
</layer-list>

输出：

Answer 2

我用更难的方法实现了它，但如果有人正在寻找这个，那么跟随会节省一些人的时间。

button_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:left="@dimen/login_button_border_width_1"
    android:right="@dimen/login_button_border_width_1"
    android:top="@dimen/login_button_border_width_1"
    android:bottom="@dimen/login_button_border_width_1">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_1"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_2"
    android:right="@dimen/login_button_border_width_2"
    android:top="@dimen/login_button_border_width_2"
    android:bottom="@dimen/login_button_border_width_2">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_2"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_3"
    android:right="@dimen/login_button_border_width_3"
    android:top="@dimen/login_button_border_width_3"
    android:bottom="@dimen/login_button_border_width_3">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_3"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_4"
    android:right="@dimen/login_button_border_width_4"
    android:top="@dimen/login_button_border_width_4"
    android:bottom="@dimen/login_button_border_width_4">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_4"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_5"
    android:right="@dimen/login_button_border_width_5"
    android:top="@dimen/login_button_border_width_5"
    android:bottom="@dimen/login_button_border_width_5">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_5"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_6"
    android:right="@dimen/login_button_border_width_6"
    android:top="@dimen/login_button_border_width_6"
    android:bottom="@dimen/login_button_border_width_6">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_6"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_7"
    android:right="@dimen/login_button_border_width_7"
    android:top="@dimen/login_button_border_width_7"
    android:bottom="@dimen/login_button_border_width_7">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_7"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_8"
    android:right="@dimen/login_button_border_width_8"
    android:top="@dimen/login_button_border_width_8"
    android:bottom="@dimen/login_button_border_width_8">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_8"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_9"
    android:right="@dimen/login_button_border_width_9"
    android:top="@dimen/login_button_border_width_9"
    android:bottom="@dimen/login_button_border_width_9">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_9"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_10"
    android:right="@dimen/login_button_border_width_10"
    android:top="@dimen/login_button_border_width_10"
    android:bottom="@dimen/login_button_border_width_10">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_10"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_11"
    android:right="@dimen/login_button_border_width_11"
    android:top="@dimen/login_button_border_width_11"
    android:bottom="@dimen/login_button_border_width_11">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_11"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_12"
    android:right="@dimen/login_button_border_width_12"
    android:top="@dimen/login_button_border_width_12"
    android:bottom="@dimen/login_button_border_width_12">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_12"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_13"
    android:right="@dimen/login_button_border_width_13"
    android:top="@dimen/login_button_border_width_13"
    android:bottom="@dimen/login_button_border_width_13">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_13"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_14"
    android:right="@dimen/login_button_border_width_14"
    android:top="@dimen/login_button_border_width_14"
    android:bottom="@dimen/login_button_border_width_14">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_14"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_15"
    android:right="@dimen/login_button_border_width_15"
    android:top="@dimen/login_button_border_width_15"
    android:bottom="@dimen/login_button_border_width_15">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_15"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_16"
    android:right="@dimen/login_button_border_width_16"
    android:top="@dimen/login_button_border_width_16"
    android:bottom="@dimen/login_button_border_width_16">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_16"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_17"
    android:right="@dimen/login_button_border_width_17"
    android:top="@dimen/login_button_border_width_17"
    android:bottom="@dimen/login_button_border_width_17">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_17"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_18"
    android:right="@dimen/login_button_border_width_18"
    android:top="@dimen/login_button_border_width_18"
    android:bottom="@dimen/login_button_border_width_18">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_18"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>
<item
    android:left="@dimen/login_button_border_width_19"
    android:right="@dimen/login_button_border_width_19"
    android:top="@dimen/login_button_border_width_19"
    android:bottom="@dimen/login_button_border_width_19">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_19"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>

<item
    android:left="@dimen/login_button_border_width_20"
    android:right="@dimen/login_button_border_width_20"
    android:top="@dimen/login_button_border_width_20"
    android:bottom="@dimen/login_button_border_width_20">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/login_button_border_20"/>
        <corners
            android:radius="@dimen/button_corner_radius"/>
    </shape>
</item>

dimes.xml

<dimen name="login_button_border_width_1">0.5dp</dimen>
<dimen name="login_button_border_width_2">1dp</dimen>
<dimen name="login_button_border_width_3">1.5dp</dimen>
<dimen name="login_button_border_width_4">2dp</dimen>
<dimen name="login_button_border_width_5">2.5dp</dimen>
<dimen name="login_button_border_width_6">3dp</dimen>
<dimen name="login_button_border_width_7">3.5dp</dimen>
<dimen name="login_button_border_width_8">4dp</dimen>
<dimen name="login_button_border_width_9">4.5dp</dimen>
<dimen name="login_button_border_width_10">5dp</dimen>
<dimen name="login_button_border_width_11">5.5dp</dimen>
<dimen name="login_button_border_width_12">6dp</dimen>
<dimen name="login_button_border_width_13">6.5dp</dimen>
<dimen name="login_button_border_width_14">7dp</dimen>
<dimen name="login_button_border_width_15">7.5dp</dimen>
<dimen name="login_button_border_width_16">8dp</dimen>
<dimen name="login_button_border_width_17">8.5dp</dimen>
<dimen name="login_button_border_width_18">9dp</dimen>
<dimen name="login_button_border_width_19">9.5dp</dimen>
<dimen name="login_button_border_width_20">10dp</dimen>

colors.xml

<color name="login_button_border_1">#00686D</color>
<color name="login_button_border_2">#006068</color>
<color name="login_button_border_3">#005C5F</color>
<color name="login_button_border_4">#095459</color>
<color name="login_button_border_5">#0B4E51</color>
<color name="login_button_border_6">#11484C</color>
<color name="login_button_border_7">#134447</color>
<color name="login_button_border_8">#153F43</color>
<color name="login_button_border_9">#153E42</color>
<color name="login_button_border_10">#153B3E</color>
<color name="login_button_border_11">#173739</color>
<color name="login_button_border_12">#1A3237</color>
<color name="login_button_border_13">#182F33</color>
<color name="login_button_border_14">#192C31</color>
<color name="login_button_border_15">#1C292D</color>
<color name="login_button_border_16">#1B262B</color>
<color name="login_button_border_17">#1A252A</color>
<color name="login_button_border_18">#1A2426</color>
<color name="login_button_border_19">#1C2225</color>
<color name="login_button_border_20">#1C2124</color>

这是结果：

感谢大家的帮助:)

Answer 3

Please check this : you can play with Stroke/Solid colors as your need.

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

        <shape android:shape="rectangle">
            <solid android:color="#800000ff" />
            <stroke android:color="#80000000"
                android:width="2dp"/>           // responsible for outer width  
            <corners android:radius="8dp" />   // responsible for corners
        </shape>
    </item>

</selector>

Answer 4

试试这个布局。只是调整颜色的混合，取决于你。

  <Button
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
     android:layout_margin="10dp"
     android:background="@drawable/bckg_btn_gradient"
     tools:ignore="MissingConstraints"
     android:text="LOGIN"
     android:textColor="#64e8f3"/>

bckg_btn_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--background shadow-->
<item>
    <shape android:shape="rectangle" >
        <solid android:color="#000000" />
        <corners android:radius="15dp" />
    </shape>
</item>

<!-- background color -->
<item
    android:bottom="3px"
    android:left="3px"
    android:right="3px"
    android:top="3px">
    <shape android:shape="rectangle" >
        <solid android:color="#000" />
        <corners android:radius="15dp" />
    </shape>
</item>

<!--left shadow -->
<item>
    <shape android:shape="rectangle" >
        <gradient
            android:angle="180"
            android:centerColor="#000"
            android:centerX="0.98"
            android:endColor="#64e8f3"
            android:startColor="#000" />

        <corners android:radius="8dp" />
    </shape>
</item>

<!--right shadow -->
<item>
    <shape android:shape="rectangle" >
        <gradient
            android:angle="360"
            android:centerColor="#000"
            android:centerX="0.98"
            android:endColor="#64e8f3"
            android:startColor="#09000000" />

        <corners android:radius="8dp" />
    </shape>
</item>

<!--top shadow -->
<item>
    <shape android:shape="rectangle" >
        <gradient
            android:angle="-90"
            android:centerColor="#007b7b7b"
            android:centerY="0.91"
            android:endColor="#64e8f3"
            android:startColor="#99000000"
            android:type="linear" />

        <corners android:radius="8dp" />
    </shape>
</item>

<!--bottom shadow -->
<item>
    <shape android:shape="rectangle" >
        <gradient
            android:angle="90"
            android:centerColor="#007b7b7b"
            android:centerY="0.9"
            android:endColor="#64e8f3"
            android:startColor="#99000000"
            android:type="linear" />

        <corners android:radius="8dp" />
    </shape>
</item>

示例屏幕截图

如何为按钮编写内外渐变代码

How to code a inner-outer gradient for a button

android

gradient