代码之家 › 专栏 › 技术社区 › Quillion

Android在不丢失材料主题的情况下为按钮添加边框(使用可绘制)

android-button material-design android-layout android

Quillion · 技术社区 · 6 年前

我有一个简单的按钮

<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 在许多其他地方。但是,我观察到,如果向按钮添加一个可绘制的,那么它将丢失所有的材质属性(如阴影,以及单击具有奇特的涟漪动画)。那么,如何在按钮周围添加边框而不丢失材质主题动画(单击时为阴影和翻盖动画)?

1 回复 | 直到 6 年前

Paris B. G. 6 年前

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

几乎不可能期望Android API开发人员为每个可能的颜色/边框组合包含一组预打包的属性,但始终有一个解决方案!

不幸的是,正如您所提到的,解决方案确实存在于创建您自己的定制XML文件中,在您掌握了它的窍门之前,这通常是令人生畏的。一旦你这样做了,你也会惊叹于它所允许的灵活性。

具体来说,有两种选择…

1)创建自定义XML边框可绘制。

2)在Buttons background属性下,设置新的自定义边框可拖动

3)然后在buttons xml属性下设置Ripple效果,方法是添加:

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

----或者----

一个更复杂的方法是使一个像下面这样的可拖动。这将添加“涟漪”按钮效果以及自定义阴影、按钮颜色和边框颜色!

“对于以后阅读这篇文章的人来说,可能经验不足)

1)在项目视图中转到“可绘制/可绘制”

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>