设置 FloatingActionButton 波纹

Posted 2023-02-22

【中文标题】设置 FloatingActionButton 波纹

【英文标题】：Setting the FloatingActionButton ripple

【发布时间】：2016-08-05 17:42:42

【问题描述】：

我试图将 FloatingActionButton 波纹设置为类似于this

来自材料设计。

问题是我只得到一个没有波纹的“平面样式”，它只是将按钮从白色更改为橙​​色，而没有上面链接中显示的动画。

我已经按照这里的答案：

FloatingActionButton example with Support Library

但我的 FAB 还是很无聊！

编辑： 我目前的代码是： XML：

  <android.support.design.widget.FloatingActionButton
     android:id="@+id/item_activity_fab"
     android:layout_
     android:layout_
     android:layout_marginRight="16dp"
     android:src="@drawable/watch"
     app:borderWidth="0dp"
     app:elevation="6dp"
     app:fabSize="normal"
     app:layout_anchor="@id/item_activity_title_background"
     app:layout_anchorGravity="top|right|end"
     app:pressedTranslationZ="12dp"
     app:rippleColor="@android:color/transparent"/>

Java：

    mAddToWatchListFAB.setRippleColor(ContextCompat.getColor(this, R.color.orange_6));

我在 FAB 上尝试过这种方法，但它似乎不起作用。我还尝试了我提供的链接中的步骤

【问题讨论】：

我认为这与它是一个预棒棒糖设备有关，我正在对其进行测试。我加载了 Genymotion 并运行了 marshmellow，并且波纹在那里起作用。我看到它没有完全实施

好的。我假设您在尝试使用该版本中引入的 Ripple 时至少使用了棉花糖。

有没有办法通过使用AppCompat之类的东西来引入大于16的涟漪

尝试搜索。我找到了这个***.com/questions/30760822/…

【参考方案1】：

将以下 2 个属性添加到您的浮动操作按钮 xml 代码中

 app:rippleColor="@color/textcolor"
 android:clickable="true"

使 FAB 可点击添加波纹颜色

【讨论】：

谢谢你节省了我的时间，这就是我想要的。

你还应该设置android:focusable="true"属性

谁能想到按钮的默认可点击属性会是假的？

【参考方案2】：

您可以按照我的Gabriele Mariotti 所说的方式实现它

你可以这样做：

<Button
      android:layout_
      android:layout_
      android:background="@drawable/ripple"

    />

ripple.xml 在哪里：

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
                      android:color="?android:colorControlHighlight">
        <item android:id="@android:id/mask">
            <shape android:shape="oval">
                <solid android:color="?android:colorAccent" />
            </shape>
        </item>
 </ripple>

正如here 中所说，它可以满足所有涟漪需求。

更新

<android.support.design.widget.FloatingActionButton
     android:id="@+id/item_activity_fab"
     android:layout_
     android:layout_
     android:layout_marginRight="16dp"
     android:src="@drawable/watch"
     android:background="@drawable/ripple"
     app:borderWidth="0dp"
     app:elevation="6dp"
     app:fabSize="normal"
     app:layout_anchor="@id/item_activity_title_background"
     app:layout_anchorGravity="top|right|end"
     app:pressedTranslationZ="12dp"/>

并使用上面的ripple.xml。很简单！您需要做的就是掩饰:)

更新 2

对于 API 20 及更低版本，有一些选项可以实现涟漪效应。查看Marcin Orlowski的以下提示

幸运的是，已经有一些自定义实现可用：

https://github.com/traex/RippleEffect https://github.com/balysv/material-ripple https://github.com/siriscac/RippleView https://github.com/ozodrukh/RippleDrawable

包括与旧版 Android 兼容的 Material 主题小部件集：

https://github.com/keithellis/MaterialWidget

所以您可以尝试其中一种或谷歌搜索其他“材料小部件”……

【讨论】：

我目前的分钟是 16，这不起作用，因为你发布的答案是 21 分钟。 EG 需要 21

根据您的需要更新@x10sion

最后一个链接好像失效了？我想试试那个

最后一个是API 7或更低的..你应该尝试第一个

【参考方案3】：

不要使用透明，尝试使用：

app:rippleColor="@color/colorAccentLight"

其中 colorAccentLight 是当前强调色的更亮的强调色。就我而言，我使用了：

<color name="colorAccent">#E040FB</color>
<color name="colorAccentLight">#E1BEE7</color>

在 colors.xml 文件中...或者，您始终可以将其设置为其他随机颜色（除了您当前的强调色）以进行测试。

【参考方案4】：

    <!--change this to any color-->
    app:rippleColor="@android:color/transparent"

    <!-- try this line instead above -->
    app:rippleColor="@color/colorPrimary"
    android:clickable="true"

【参考方案5】：

您的波纹颜色是透明的。我希望您的波纹正常显示，但由于它是不可见的，您看不到它。

请参阅此答案以获取解决方案。

Android: can you have a ripple effect whose default state color is transparent?