双边框按钮

Question

是否可以使用 AppCompat 或 Material 设计库创建此类按钮？这种按钮有什么样式吗？如果不是，那么实现它的最佳方法是什么？

Answer 1

你可以使用图层列表

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

     // outer rectangle
        <item>
            <shape android:shape="rectangle">

                <corners android:radius="10dp" />

                <solid android:color="@color/colorWhite" />

                <stroke
                    android:width="1dp"
                    android:color="@color/colorBlack" />

            </shape>
        </item>

    // inside rectangle

        <item
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp">

            <shape android:shape="rectangle">

                <corners android:radius="10dp" />

                <solid android:color="@color/colorWhite" />

                <stroke
                    android:width="1dp"
                    android:color="@color/colorAccent" />

            </shape>

        </item>

    </layer-list>

Answer 2

使用layer-list

试试这个方法

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--  the first <item> is used to set border to this drawable  -->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#E91E63" />
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <!--  the second <item> is used to add some space between border and inner
      rectangle object -->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
            <solid android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <!--  the third <item> inner
          rectangle object in drawable-->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
            <solid android:color="#03A9F4" />
            <corners android:radius="10dp"/>
        </shape>
    </item>

</layer-list>

输出

Answer 3

这是您可以用来创建此背景的 button_bg.xml 文件：

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

            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>

            <solid android:color="#000000"/>

        </shape>
    </item>
    <item >
        <shape android:shape="rectangle">

            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>

            <solid android:color="#3895d3"/>

            <corners android:bottomRightRadius="7dp"
                android:bottomLeftRadius="7dp"
                android:topLeftRadius="7dp"
                android:topRightRadius="7dp" />

        </shape>
    </item>
    <item >
        <shape android:shape="rectangle">

            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>

            <solid android:color="#000000"/>


            <corners android:bottomRightRadius="7dp"
                android:bottomLeftRadius="7dp"
                android:topLeftRadius="7dp"
                android:topRightRadius="7dp" />

        </shape>
    </item>
    <item >
        <shape android:shape="rectangle">
            <solid android:color="#3895d3"/>

            <corners android:bottomRightRadius="7dp"
                android:bottomLeftRadius="7dp"
                android:topLeftRadius="7dp"
                android:topRightRadius="7dp" />

        </shape>
    </item>
</layer-list>

这是一张预览图：

双边框按钮

Double border button

android

android-layout

android-button