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

Question

单击android:background="?selectableItemBackground"视图(LinearLayout例如)时,我一直在使用涟漪效果.我想我在某处读到这是向后兼容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

波纹可绘制是一个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您选择的颜色和一点 alpha#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"
      ... />

在活动的布局中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有效