Android 材质设计按钮-前棒棒糖

我如何实施“凸起按钮”和“平面按钮”所描述的谷歌的材料设计指南?


凸起的按钮增加了大多数平面布局的尺寸,它们强调 > 在繁忙或宽阔的空间上起作用。

raised buttons


对工具栏和对话框使用平面按钮,避免过多的分层。

flat buttons

资料来源: http://www.google.com/design/spec/components/buttons.html

94200 次浏览

这需要安卓5.0

提升按钮

继承你的按钮样式。材质。按钮,标准的提升和提升操作将自动应用。

<style name="Your.Button" parent="android:style/Widget.Material.Button">
<item name="android:background">@drawable/raised_button_background</item>
</style>

然后你需要创建一个 raised_button_background.xml文件,你的按钮的背景颜色里面有一个涟漪标签:

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

扁平按钮

编辑: 与我之前对扁平按钮的建议不同,你应该使用下面 Stephen Kaiser 给出的建议:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DONE"
style="?android:attr/borderlessButtonStyle"
/>

编辑: 如果您正在使用支持库,您可以通过使用 style="?attr/borderlessButtonStyle"在 Pre-Lollipop 设备上实现相同的结果。(注意缺少 android:)上面的例子就变成了

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DONE"
style="?attr/borderlessButtonStyle"
/>

我使用这个作为 AppCompat 的一个按钮的背景,它描绘了一个凸起的按钮(全部都有涟漪) ,希望它能有所帮助。

Xml -在 drawable文件夹中:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/yourColor"/>
<corners android:radius="6dp"/>
</shape>
</item>
<item android:drawable="?android:selectableItemBackground"/>
</layer-list>

Xml :

<resources>


<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat">


</resources>

Xml (v21) :

...
<style name="AppTheme" parent="AppTheme.Base">

Xml :

...
android:background="@drawable/myRaisedButton"

为了实现平面按钮,您可以只添加 style="?android:attr/borderlessButtonStyle"

例如:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DONE"
style="?android:attr/borderlessButtonStyle"
/>

下面是该属性的引用

您可能还需要添加一个底部边距到您的按钮,以便能够看到凸起按钮的阴影效果:

<item name="android:layout_marginBottom">@dimen/activity_vertical_margin</item>
<item name="android:elevation">1dp</item>

有关如何使用 appcompat 库实现这一点的说明,请查看我对另一个问题的答案: https://stackoverflow.com/a/27696134/1932522

这将展示如何使用 Android 5.0和更早版本(直到 API 级别11)的凸起和扁平按钮!

我在研究材料兼容性库。按钮类在那里,并支持动画阴影和触摸波纹。也许你会发现它很有用。这是 链接

你要的是 材料设计按钮库-没问题-https://github.com/navasmdc/MaterialDesignLibrary

你可以使用 材料设计图书馆。它是第三方库。

这是一个包含 Android L 组件的库,您可以在 Android 2.2中使用它 如果你想使用这个库,你只需要下载材料设计项目,将它导入到你的工作区,然后将它作为库添加到你的 android 项目设置中。