Android v21 中的样式化材质按钮

Posted 2023-02-22

【中文标题】Android v21 中的样式化材质按钮

【英文标题】：Stylizing material buttons in Android v21

【发布时间】：2015-08-14 10:20:01

【问题描述】：

我正在尝试保持棒棒糖及以上 (21+) 设备的材料设计涟漪效应，并对按钮进行风格化，使其周围没有大的边距/空间。

示例 1： 具有波纹效果但有边距/间隙的按钮：

示例 2： 没有波纹效果且没有边距/间隙的按钮：

我想要 Exmaple 2 的布局以及在 Example 1 中使用的波纹效果。

对于示例 1，我的 styles-v21 是什么样的：

<?xml version="1.0" encoding="utf-8"?>
<resources>

     ... other styles ...

    <style name="FacebookButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ff3b5998</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>


    </style>
    <style name="GoogleButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ffdd4b39</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>


    </style>
    <style name="TwitterButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ff55acee</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>


    </style>
    <style name="SkipButton" parent="android:Widget.Material.Button">
        <item name="android:colorButtonNormal">#ffdfa800</item>
        <item name="android:layout_margin">0dp</item>
        <item name="android:borderlessButtonStyle">@style/Widget.AppCompat.Button.Borderless</item>

    </style>

</resources>

示例 1 的按钮布局如下：

<Button
    android:id="@+id/login_with_facebook"
    android:text="@string/login_with_facebook"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:drawableLeft="@drawable/facebook_icon"
    android:drawablePadding="25dp"
    android:layout_
    android:layout_
    android:layout_weight="16.88"
    android:textColor="#ffffff"
    android:gravity="left|center_vertical"
    android:paddingLeft="45dp"
    android:theme="@style/FacebookButton" />

<Button
    android:id="@+id/login_with_google"
    android:text="@string/login_with_google"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:drawableLeft="@drawable/google_icon"
    android:drawablePadding="25dp"
    android:layout_
    android:layout_
    android:layout_weight="16.88"
    android:textColor="#ffffffff"
    android:gravity="left|center_vertical"
    android:paddingLeft="45dp"
    android:theme="@style/GoogleButton" />

<Button
    android:id="@+id/twitter_login_button"
    android:text="@string/login_with_twitter"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:drawableLeft="@drawable/twitter_icon"
    android:drawablePadding="25dp"
    android:layout_
    android:gravity="left|center_vertical"
    android:layout_
    android:layout_weight="16.88"
    android:textColor="#ffffffff"
    android:paddingLeft="45dp"
    android:theme="@style/TwitterButton" />

<Button
    android:id="@+id/login_anonymously"
    android:text="@string/login_anonymously"
    android:fontFamily="sans-serif-condensed"
    android:textSize="16sp"
    android:layout_
    android:layout_
    android:layout_weight="50"
    android:textColor="#ffffffff"
    android:theme="@style/SkipButton" />

知道如何在使用我介绍的涟漪方法的同时实现示例 2 的外观吗？任何指向资源或帮助的链接将不胜感激。谢谢。

额外： 我已经阅读了以下内容

Coloring Buttons in Android with Material Design and AppCompat How to properly style material buttons in android

【问题讨论】：

你试过android:background="?android:attr/selectableItemBackground"吗？

@alanv 这工作得很好，谢谢！只是想知道，你怎么知道使用它？在这些情况下，文档似乎没有太大帮助。如果您发表评论作为答案，我会继续投票。再次感谢。

我是编写 Material 样式的 Android 框架工程师。 ;)

哈哈！棒极了。感谢您的帮助！

我比示例 1 更喜欢它。无论从技术上来说都很好。

【参考方案1】：

您可以使用android:background="?android:attr/selectableItemBackground" 获得矩形波纹。

或者，您可以创建自己的可绘制对象。这是框架的可选项目背景的 XML：

可绘制/item_background_material.xml：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <color android:color="@android:color/white" />
    </item>
</ripple>

【讨论】：

谢谢！第一个对我有用的无边框样式！ XD