logo标签列表

设置FloatingActionButton的波纹效果

androidandroid-animationmaterial-designfloating-action-button
20

我正在尝试将FloatingActionButton的波纹效果设置为类似于Material Design中这个的样式。

问题是，我只得到一个“扁平风格”，其中没有波纹，它只是将按钮从白色（在我的情况下）变为橙色，而没有上面链接中显示的动画效果。

我已经按照这里的答案进行了操作：

FloatingActionButton example with Support Library

但是我的FAB仍然很无聊！

编辑： 我的当前代码是： XML:

  <android.support.design.widget.FloatingActionButton
     android:id="@+id/item_activity_fab"
     android:layout_width="64dp"
     android:layout_height="64dp"
     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));

我在浮动操作按钮上尝试了那种方法，但似乎没有起作用。我还尝试了我提供的链接中的步骤。

我认为这与我正在测试的是一个早期的棒棒糖设备有关。我加载了Genymotion并运行了marshmellow，水波纹在那里可以工作。我看到有关它没有完全实现的内容。 - Stillie
好的。我假设您至少使用了Marshmallow，因为您试图使用在该版本中引入的Ripple。 - Kuffs
有没有办法通过使用AppCompat或其他方式来引入大于16的涟漪效果？ - Stillie
尝试搜索。我找到了这个网址：https://dev59.com/mV0a5IYBdhLWcg3wD1Ae - Kuffs
5个回答
51

请在您的浮动操作按钮 XML 代码中添加以下两个属性：

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

让 FAB 可点击，将添加水波纹颜色。

谢谢你，你救了我好几个小时，这正是我一直在寻找的。 - Sanjeev Kumar
6
你还应该设置 android:focusable="true" 属性。 - Simon
2
谁会想到按钮的默认可点击属性是false呢？ - user1608385
4
你可以按照 Gabriele Mariotti 所说的方式来实现它。

You can do something like this:

<Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/ripple"

    />

Where the ripple.xml is:

<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>
在此处所说的，适用于所有涟漪需求。 更新 
<android.support.design.widget.FloatingActionButton
     android:id="@+id/item_activity_fab"
     android:layout_width="64dp"
     android:layout_height="64dp"
     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提供的以下提示。

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

包括与旧版Android兼容的Material主题小部件集： 所以你可以尝试其中之一，或者在谷歌上搜索其他“材料小部件”之类的东西...
我的当前最小值是16，这不起作用，因为您发布的答案是21分钟。例如，<item android:id="@android:id/mask">需要21。 - Stillie
已按您的要求更新 @x10sion - Sibidharan
最后一个链接好像不能用？我想试试那个。 - Stillie
最后一个适用于API 7或更低版本。你应该先尝试第一个。 - Sibidharan
2

不要使用 transparent，试着使用：

app:rippleColor="@color/colorAccentLight"

其中，colorAccentLight是当前强调颜色的更亮版本。在我的例子中，我使用了：

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

在 colors.xml 文件中... 或者，您可以将其设置为其他随机颜色（而不是当前的强调颜色）以进行测试。
1
    <!--change this to any color-->
    app:rippleColor="@android:color/transparent"

    <!-- try this line instead above -->
    app:rippleColor="@color/colorPrimary"
    android:clickable="true"
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接