在 Android v21 中对 material 按钮进行样式化
Stylizing material buttons in Android v21
我试图为棒棒糖及以上 (21+) 的设备保持 material 设计连锁反应,并对按钮进行样式化,使其周围没有大的 margin/space。
示例 1: 具有波纹效果但具有 margin/gap 的按钮:
示例 2: 没有波纹效果且没有 margin/gap 的按钮:
我想要 Exmaple 2 的布局,具有 Example 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 的外观吗?任何指向资源或帮助的链接将不胜感激。谢谢。
额外:
我已经阅读了以下内容
- Coloring Buttons in Android with Material Design and AppCompat
您可以使用 android:background="?android:attr/selectableItemBackground"
来获得矩形波纹。
或者,您可以创建自己的可绘制对象。这是框架的可选项目背景的XML:
drawable/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>
我试图为棒棒糖及以上 (21+) 的设备保持 material 设计连锁反应,并对按钮进行样式化,使其周围没有大的 margin/space。
示例 1: 具有波纹效果但具有 margin/gap 的按钮:
示例 2: 没有波纹效果且没有 margin/gap 的按钮:
我想要 Exmaple 2 的布局,具有 Example 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 的外观吗?任何指向资源或帮助的链接将不胜感激。谢谢。
额外:
我已经阅读了以下内容
- Coloring Buttons in Android with Material Design and AppCompat
您可以使用 android:background="?android:attr/selectableItemBackground"
来获得矩形波纹。
或者,您可以创建自己的可绘制对象。这是框架的可选项目背景的XML:
drawable/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>