Material 波纹效果被布局中的其他视图隐藏

Question

我在 ImageButton 上添加了涟漪效果，但是它被用作父视图背景的 ImageView 隐藏了 RelativeLayout。

这是布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="172dp"
                android:orientation="vertical"
                android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/drawerBackgroundImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/drawer_background"/>

    [...]

    <ImageButton
        android:id="@+id/drawerLogoutButton"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_alignBottom="@id/drawerEmailTextView"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        style="@style/FlatButtonStyle"
        android:scaleType="centerInside"
        android:src="@drawable/ic_logout_white_24dp"/>

</RelativeLayout>

（还有很多其他观点，但它们在这里无关紧要）

我使用 ImageView 作为 RelativeLayout 的背景，因为我需要为图像设置特定的 scaleType，所以我不能使用基本 android:background 属性.

涟漪效果是隐藏的，因为它没有遮罩层（我希望它延伸到按钮的边界之外），因此使用 ImageButton 的父视图来显示。如果我删除 ImageView.

效果是完全可见的

有没有办法让涟漪效应显示在有问题的 ImageView 上方？

Answer 1

我遇到了同样的问题。到目前为止我发现的唯一解决方案不是 100% 好，因为波纹被视图掩盖了（它不是无边界的）。

解决方案（解决方法）：用其他视图包围您的 ImageButton 并将波纹设置为前景而不是布局中的背景，如下所示：

<ImageView ... /> 

<FrameLayout
    ...
    android:clickable="true"
    android:focusable="true"
    android:foreground="?attr/selectableItemBackgroundBorderless" >

    <ImageButton />
</FrameLayout>

如果有人解释为什么图像后面画有波纹，我将非常高兴。此外，如果您查看 Google 照片应用程序，在图像细节中，它们在图像视图上具有带有波纹的透明图标。我想复制这个，但我无法让涟漪出现在前景中。有谁知道如何将透明图像按钮放在所有东西上但仍然有波纹？

编辑最终解决方案 在这里你可以找到完全相同的问题

很好地解释了正在发生的事情。解决方案是相同的，但最重要的是，它通过添加

来解决矩形蒙版

android:clipChildren="false"
android:clipToPadding="false"

到您的布局。现在你的涟漪应该是无边界的（它对我有用）。布局 xml 可能是这样的：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
...
android:clipChildren="false"
android:clipToPadding="false">

    <ImageView ... /> 

    <FrameLayout
        ...

        android:clickable="true"
        android:foreground="?attr/selectableItemBackgroundBorderless">
       <ImageView ... />
    </FrameLayout>

</FrameLayout>

Answer 2

我遇到了完全相同的问题并使用此线程解决了它：https://code.google.com/p/android/issues/detail?id=155880

问题预览：

解决前:

解决后：

解释：

"Borderless buttons draw their content on the closest background. Your button might not be having background between itself and the ImageView, so it draws underneath the ImageView."

解法：

"Use a transparent background (android:background="@android:color/transparent") on some layout containing the button (beneath the ImageView). This will dictate what the maximum bounds of the ripple effect is."

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                ...>

    <!-- Your background ImageView -->
    <ImageView
        android:id="@+id/drawerBackgroundImageView"
        android:src="@drawable/drawer_background"
        ... />

        <!-- ... -->

    <!-- HERE, you need a container for the button with the transparent
         background. Let's say you'll use a FrameLayout -->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent">

        <!-- Maybe more items --> 

        <!-- Button with borderless ripple effect -->
        <ImageButton
            android:id="@+id/drawerLogoutButton"
            android:background="?selectableItemBackgroundBorderless"
            ... />

    </FrameLayout>

</FrameLayout>

希望对您有所帮助。

Answer 3

我知道这是一个旧的 post 但我今天确实为此苦苦挣扎，因此我 post 正在寻找我最终能够弄清楚的东西，也许还有其他人可能会从中受益。事先一键强调，请做always RTFM!

1) 故事

我的目标是在选项卡项上使用无限制的波纹效果，因此将其散布到整个 AppBarLayout 区域。我已将 @android:color/transparent 应用到 TabLayout 作为第一个包装父级，并为 AppBarLayout 提供了背景颜色，但是波纹仍然在 TabLayout 高度的边界处被切断。

2) 故事的寓意 (RTFM)

所以我运行 Android 知识的巢穴：文档，并发现了这个：

?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view. It will be drawn upon, and bounded by, the nearest parent of the view with a non-null background.

3) 操作过程

使用布局检查器，我意识到 @android:color/transparent 虽然透明（duh！）它实际上将 0 分配为视图的 bg 属性的值，但是 zero is not null 因此涟漪被限制在最近的父级。

4) 结论

有了它，我将 TabLayout 的 android:background 属性设置为 @null 而不是透明，现在我在该区域上散布了一个奇特的小波纹AppBarLayout 的。

5) 结尾：**ANDROID 太好了！

支持此 post 中用文字阐明问题的每个人。干杯！

Answer 4

将 ImageButton 包裹在 FrameLayout 中后，触摸时我得到了矩形。在 FrameLayout 上应用椭圆形背景，触摸时得到圆形。

Answer 5

有同样的问题。使用上述解决方案并有效。通过将前景设置为 ?attr/actionBarItemBackground 并将背景设置为 @null.

设法避免包装 FrameLayout

 <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|end"
            android:background="@null"
            android:contentDescription="@string/app_name"
            android:foreground="?attr/actionBarItemBackground"
            android:padding="@dimen/small_margin"
            android:src="@drawable/ic_clear_text_icon" />

Material 波纹效果被布局中的其他视图隐藏

Material ripple effect hidden by other view in layout

android

android-layout

material-design

rippledrawable