logo标签列表

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

androidbuttonrounded-cornersripple
38

我正在尝试构建带有圆角的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) 按钮有默认的涟漪效果。我该如何保持默认的涟漪效果？

按钮有默认阴影。您可以更改为TextView，它是Button的基类，并具有较少的默认值。 - Emma
1
对于冗余边框问题，我使用 style="?android:attr/borderlessButtonStyle" 解决了它。有人知道如何恢复默认的涟漪效果吗？ - Shuwn Yuan Tee
@Shuwn Yuan Tee，你需要使用自定义的涟漪可绘制对象。 - Sam Chen
7个回答
53

以下是我用的代码，可以让按钮实现圆角效果。对于Android版本大于或等于V21，使用水波纹效果。在早期的Android版本中，当按钮被点击时，按钮颜色会发生改变，基于android:state_pressed, android:state_focused等属性。

在布局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版本，只需要在单击期间更改背景颜色：

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>
如果您还想在涟漪中添加“禁用”状态，请将一个item添加到ripple的根目录，并在该项中添加一个selector。然后，只需正常使用：在此答案中为涟漪内容使用一个item，并使用所需设计的item state_enabled=false。类似于：https://pastebin.com/TQuYYbg0 - FirstOne
1
android:color="@color/ripple_material_dark" 是一个私有资源，因此没有显示涟漪效果。我在我的 @color 文件夹中添加了另一种颜色，并用 android:color="@color/my_gray_color" 替换了 android:color="@color/ripple_material_dark"，这样涟漪效果就可以平滑地显示了。 - iCantC
24

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演示

12

尝试在你的xml文件中设置这个参数。这对我起作用了。

style="?android:attr/borderlessButtonStyle"

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

android:stateListAnimator="@null"

这个链接有更多答案 如何移除按钮阴影（Android）

style="?android:attr/borderlessButtonStyle" 也可以，谢谢！ - Shuwn Yuan Tee
1
它对我不起作用。 - Muhammed Aydogan
6

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

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"/>
3
在您的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" />
style="@style/Base.Widget.AppCompat.Button.Borderless" 可以使用，谢谢！ - Shuwn Yuan Tee
1

只需在您的 <Button></Button> 视图中添加 android:clipToPadding="false" 即可。

0
尝试在代码中输入这个： 

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);
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接