带圆角、波纹效果且无阴影的 Android 按钮

Question

我正在尝试构建带有圆角的 Android 按钮。 但是沿着圆角（左下角和右下角），它周围有不需要的灰色阴影。

这是我的代码：

drawable/my_button.xml

<?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <shape android:shape="rectangle">
        <stroke android:width="1dp" android:color="#ffa6c575" />
        <solid android:color="#ffa6c575"/>
        <corners android:radius="15dp" />
      </shape>
    </item>
  </selector>

然后在布局 xml 文件中，我有：

<LinearLayout
  <Button
    android:id="@+id/buy_button"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="35dp"
    android:layout_gravity="center"
    android:background="@drawable/my_button"
    android:textColor="@android:color/white"
    android:text="BUY" />

  <View
    android:layout_width="10dp"
    android:layout_height="match_parent"
    android:background="@android:color/transparent" >
  </View>

  <Button
    android:id="@+id/sell_button"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="35dp"
    android:layout_gravity="center"
    android:background="@drawable/my_button"
    android:textColor="@android:color/white"
    android:text="SELL" />

</LinearLayout>

1) 如何去除圆角（左下角和右下角）周围多余的灰色阴影？

2) 按钮具有默认波纹效果。 如何保持默认的涟漪效应？

Answer 1

我终于用下面的代码解决了它。 这实现了按钮的圆角。 此外，对于 Android 版本 >= V21，它使用涟漪效应。 对于早期的 Android 版本，基于android:state_pressed, android:state_focused等android:state_pressed, android:state_focused单击时按钮颜色会发生变化。

在layout xml文件中：

<Button
    style="?android:attr/borderlessButtonStyle"
    android:id="@+id/buy_button"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@drawable/green_trading_button_effect"
    android:textColor="@android:color/white"
    android:text="BUY" />

对于按钮点击涟漪效应（Android >= v21）：

drawable-v21/green_trading_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_material_dark">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item android:drawable="@drawable/green_trading_button" />
</ripple>

对于早期的 Android 版本，只需在 onclick 期间更改背景颜色：

drawable/green_trading_button_effect.xml

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

drawable/green_trading_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#ffa6c575"/>
    <!-- rounded corners -->
    <corners android:radius="5dp" />
</shape>

drawable/green_trading_button_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#ffc5dca8"/>
    <!-- corners corners -->
    <corners android:radius="5dp" />
</shape>

Answer 2

drawable/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle" android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:bottomLeftRadius="25dp" android:bottomRightRadius="25dp" android:topLeftRadius="25dp" android:topRightRadius="25dp" />
        </shape>
    </item>
    <item android:drawable="@android:color/transparent" />
</selector>

drawablev21/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/ripple_white">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners
                android:bottomLeftRadius="25dp"
                android:bottomRightRadius="25dp"
                android:topLeftRadius="25dp"
                android:topRightRadius="25dp" />
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

drawable/button_circle_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomRightRadius="25dp"
        android:topRightRadius="25dp"
        android:bottomLeftRadius="25dp"
        android:topLeftRadius="25dp"/>
    <solid android:color="@color/colorAccent" />
</shape>

drawable/circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomRightRadius="25dp"
        android:topRightRadius="25dp"
        android:bottomLeftRadius="25dp"
        android:topLeftRadius="25dp"/>
    <solid android:color="@color/ripple_white" />
</shape>

将样式和波纹设置为按钮

<Button
            android:id="@+id/choose_folder"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/button_circle_background"
            android:foreground="@drawable/ripple_circle"
            android:text="Chose Folder"
            android:textColor="@android:color/white" />

受链接启发

这将为具有圆角形状且没有阴影的按钮添加完美的圆角波纹效果

按下按钮的gif

Answer 3

尝试在您的 xml 中设置它。 这对我有用。

style="?android:attr/borderlessButtonStyle" 

此外，如果您的目标是 API 级别 21 及以上，则可以使用

android:stateListAnimator="@null"

此链接有更多答案How to remove button shadow (android)

Answer 4

在你的 drawable 文件中制作一个这样的文件：

button_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
    <corners
        android:bottomRightRadius="15dp"
        android:topRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"/>
    <solid android:color="@color/blue_500" />
</shape>

增加半径以使其更弯曲。

在按钮的 XML 中，为按钮和背景设置无边框样式，就像在顶部一样：

<Button
    android:id="@+id/task_action_btn"
    style="@style/Base.Widget.AppCompat.Button.Borderless"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@drawable/button_background"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Body1"
    android:textColor="@android:color/white" />

Answer 5

drawable 文件，用于设计按钮使用意图的形状，就是这样。

drawable/ripper_button_effect.xml

<?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="#000000" />
      <corners android:radius="15dp" />
    </shape>
  </item>
  <item android:drawable="@drawable/your_button_shape"></item>
</ripple>

在 XML 中使用

 <com.google.android.material.button.MaterialButton
                android:id="@+id/btnName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ripper_button_effect"/>
     

Answer 6

在代码中试试这个

Button buyButton = (Button) findViewById(R.id.buy_button);
Button sellButton = (Button) findViewById(R.id.sell_button);

hideShadow(buyButton);
hideShadow(sellButton);


public void hideShadow(Button button) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        button.setElevation(0);
    }
}

Answer 7

只需将android:clipToPadding="false"到您的<Button></Button>视图中