不失格调的圆角按钮

Question

我正在尝试制作一个简单的圆形按钮，例如 this 从 this

开始

问题是我不想失去风格（当你按下它和阴影时波纹和颜色会改变）。使用可绘制状态作为背景会发生这种情况。

如何实现？

Answer 1

<android.support.v7.widget.AppCompatButton
            style="@style/buttonApp"
            android:text="Normal" />

在res>values>styles.xml中放这个。并根据需要更改填充和颜色。

<style name="buttonApp" parent="@style/Widget.AppCompat.Button.Borderless">
    <item name="android:layout_height">@dimen/appButtonHeight</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingLeft">20dp</item>
    <item name="android:paddingRight">20dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">10dp</item>
    <item name="android:textColor">@color/colorWhite</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">16sp</item>
    <item name="android:background">@drawable/bg_button_orange</item>
</style>

对于post 21版本，您将通过1个drawable获得所需的新闻效果，如下所示，但21之前的版本不支持波纹效果，因此您必须为新闻制作一些drawables背景和非新闻效果，我在这里包含了最终解决方案

bg_button_orange.xml 在 res>drawables-v21>

(这是21之后的版本android)

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorGreenAlpha" />
            <corners android:radius="15dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/bg_button_not_selected" />
</ripple>

bg_button_orange.xml 在 res>drawables>

（这是 21 之前的版本 android）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_button_selected" android:state_pressed="true" />
    <item android:drawable="@drawable/bg_button_selected" android:state_focused="true" />
    <item android:drawable="@drawable/bg_button_selected" android:state_selected="true" />
    <item android:drawable="@drawable/bg_button_not_selected" />
</selector>

bg_button_not_selected.xml 在 res>drawables

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGreenLight" />
    <corners android:radius="@dimen/appButtonRadius" />
</shape>

bg_button_not_selected.xml 在 res>drawables

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGreen" />
    <corners android:radius="@dimen/appButtonRadius" />
</shape>

输入res>values>dimens.xml

<dimen name="appButtonHeight">60dp</dimen>
<dimen name="appButtonRadius">30dp</dimen>

输入res>values>colors.xml

<color name="colorGreen">#009688</color>
<color name="colorGreenAlpha">#b0009688</color>
<color name="colorGreenLight">#27d4c4</color>

按钮高度应该是按钮半径的两倍以获得精确的圆角。

在 post 21 版本和 21 版本之前，您将获得像 belo 图像一样具有波纹效果的按钮。

Answer 2

只需将 MaterialButton in the Material Components library 与 app:cornerRadius 属性一起使用。

类似于：

    <com.google.android.material.button.MaterialButton
        android:text="NORMAL"
        app:cornerRadius="16dp"
        ../>

不失格调的圆角按钮

Rounded button without losing style

android

button

material-design

drawable

material-components-android