Android v21中的样式化素材按钮

Question

我试图保持棒棒糖及以上(21+)设备的材料设计波纹效果,并对按钮进行风格化,使其周围没有大的边距/空间.

示例1:具有连锁效应但具有边距/间隙的按钮:

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

我希望Exmaple 2的布局具有示例1中使用的涟漪效应.

我styles-v21对实例1的看法如何:

<?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_width="match_parent"
    android:layout_height="45dp"
    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_width="match_parent"
    android:layout_height="45dp"
    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_height="45dp"
    android:gravity="left|center_vertical"
    android:layout_width="match_parent"
    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_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="50"
    android:textColor="#ffffffff"
    android:theme="@style/SkipButton" />

知道如何在使用我提出的纹波方法时实现示例2的外观吗？任何资源或帮助的链接将不胜感激.谢谢.

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

• 使用Material Design和AppCompat的Android中的着色按钮
• 如何在android中正确设置材质按钮的样式

Answer 1

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

或者,您可以创建自己的drawable.这是框架可选项背景的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>