Android在不丢失实质主题的情况下为按钮添加边框(使用drawable)

时间:2018-08-27 16:29:39

标签: android android-layout material-design android-button

我有一个简单的按钮

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/add"
        android:backgroundTint="@color/add_bg"
        android:textColor="@color/add_fg"
        <!--android:borderColor?="@color/button_border"-->
        android:text="@string/add"/>

我希望周围有白色背景,蓝色文字和蓝色边框。我知道我可以通过here所示的drawable以及在其他许多地方实现这一点。但是,我观察到,如果向按钮添加可绘制对象,则它将丢失其所有材质属性(例如阴影以及单击具有奇特波纹动画的按钮)。那么,如何在按钮周围添加边框而不丢失材质主题动画(单击时为阴影和倾斜动画)?

1 个答案:

答案 0 :(得分:1)

android附带的大多数项目只是一组预包装的属性。

几乎不可能期望Android API开发人员为每种可能的颜色/边框组合包括一组预包装的属性,但是总有解决方案!

不幸的是,正如您所提到的,解决方案的确在于创建您自己的自定义XML文件,该文件通常令人生畏,直到您掌握了它。完成后,您也会惊叹于它所允许的灵活性。

根据您的具体情况,有两种选择...

1)创建一个自定义XML边框可绘制对象。

2)在按钮的背景属性下,设置新的可绘制自定义边框

3)然后还通过添加以下内容来设置按钮xml属性下的波纹效果:

    android:foreground="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"

---- OR ----

一种更复杂的方法是使一个可绘制对象如下图所示。这将添加“波纹”按钮效果以及自定义阴影,按钮颜色和边框颜色!

“对于以后阅读本指南的人来说,这可能是经验不足的

1)在您的项目视图中转到res / drawable

2)右键单击文件夹本身,然后选择新的/可绘制的资源文件

3)输入文件名my_ripple_button.xml(根目录并不重要,因为您可以将其替换为以下代码)

4)单击文本标签(如果您还没有的话)

5)选择所有文本并基本上替换为以下内容:(创建自定义颜色边框的步骤基本相同)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimaryDark">
    <item android:id="@android:id/ripple">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
            <corners android:radius="@dimen/button_radius_large" />
       </shape>
   </item>

    <item android:id="@android:id/background">
       <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:endColor="@color/colorPrimaryLight"
               android:startColor="@color/colorPrimary"
                android:type="linear" />
           <corners android:radius="@dimen/button_radius_large" />
        </shape>
    </item>
</ripple>