使用带有白色背景颜色的 ?selectableItemBackground

Question

当单击视图（例如 LinearLayout）时，我一直使用 android:background="?selectableItemBackground" 来获得涟漪效果。我想我在某处读到它向后兼容 API 14。

但是，我发现我需要使用这种涟漪效果，但需要使用白色背景。具体来说，我有一个列表项的布局，它将显示在默认颜色背景上（我从Theme.AppCompat.Light.NoActionBar 扩展），所以我希望列表项通过将列表项着色为纯白色（ #FFFFFF)。

这是列表项布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="?selectableItemBackground"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    ...

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/mdu_keyline_1"
        android:paddingRight="@dimen/mdu_keyline_1"
        android:paddingTop="@dimen/mdu_padding_normal"
        android:paddingBottom="@dimen/mdu_padding_normal">

        ...

    </LinearLayout>

</FrameLayout>

上面会产生没有白色背景的涟漪效果。

如果我尝试：

<FrameLayout ...
    android:background="@color/white">

这显然会产生白色背景，但没有涟漪效应。

我还尝试了其他方法 - 这产生了最接近我正在寻找的结果：

<FrameLayout ...
    android:background="@color/white">

    ...

    <LinearLayout ...
        android:background="?selectableItemBackground">

上面给了我带有涟漪效果的白色背景。 然而，无论我点击项目的哪个部分，波纹似乎总是从中心开始。

这里是一些显示当前结果的屏幕截图（忽略列表项顶部的阴影 - 这是我正在使用的 AppBarLayout 和 Toolbar 的阴影）。

我怎样才能达到预期的效果？

Answer 1

您可以使用 FrameLayout 的前景：

<FrameLayout ...
    android:background="@android:color/white"
    android:foreground="?attr/selectableItemBackground">

Answer 2

您可以在 drawables 文件夹中创建一个图层列表，并将其设置为您的背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"/>
    <item android:drawable="?attr/selectableItemBackground"/>
</layer-list>

Answer 3

Ripple drawable 是 LayerDrawable 。 所以正确的做法是：

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">

    <item>
        <shape>
            <solid
                android:color="#FFFFFF"/>
        </shape>
    </item>

    <item android:id="@android:id/mask">
        <shape>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>

</ripple>

Answer 4

其他答案确实有效，但以下仅对我最有效：

在styles.xml 添加colorControlHighlight

  <style name="ExampleTheme" parent="Theme.AppCompat">
    <item name="colorAccent">...</item>
    <item name="colorPrimary">...</item>
    <item name="colorPrimaryDark">...</item>
    ...
    <item name="colorControlHighlight">@color/purple_bg</item> <-- THIS LINE
    ...
  </style>

</resources>

在colors.xml 中添加您选择的颜色和一点阿尔法#77632E8E

<?xml version="1.0" encoding="UTF-8" ?>
<resources>

  <color name="purple_bg">#77632E8E</color>

</resources>

在AndroidManifest.xml 中为您的活动设置主题（全部）

<activity android:name=".MainActivity"
      ...
      android:theme="@style/ExampleTheme"
      ... />

在 Activity 的布局中 main_layout.xml 在您想要效果的视图上设置 android:background：

<LinearLayout
    android:id="@+id/llBlock"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="?attr/selectableItemBackgroundBorderless">
    ....
</LinearLayout>

?attr/selectableItemBackground 和 ?attr/selectableItemBackgroundBorderless 都有效