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

I finally solved it with below code. This achieve rounded corners for button. Also, for Android Version >= V21, it uses ripple effect. For earlier Android version, button color changes when it is clicked, based on android:state_pressed, android:state_focused, etc.

In layout xml file:

<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" />

For button onclick ripple effect (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>

For earlier Android version, just change background color during 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" />

受link启发

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

gif of button press

Answer 3

按钮设计形状的可绘制文件，使用目的就是这样。

<块引用>

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 4

尝试在xml中设置此项。这对我有用。

style="?android:attr/borderlessButtonStyle"

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

android:stateListAnimator="@null"

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

Answer 5

在你的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 for按钮中，将样式设置为无边框按钮和背景，使其像在顶部一样：

<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 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> 视图

Android按钮带圆角，涟漪效果，无阴影

7 个答案: