Эффект капельки материала, скрытый другим видом в макете

Я добавил эффект пульсации на 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?

Ответ 1

У меня была точно такая же проблема и она была решена с помощью этого потока: https://code.google.com/p/android/issues/detail?id=155880

Предварительный просмотр эмиссии:

Прежде чем решить:

После решения:

Объяснение:

"Кнопки без полей нарисуют их содержимое на ближайшем фоне. Ваша кнопка может не иметь фона между собой и ImageView, поэтому она рисуется под ImageView."

Решение:

"Используйте прозрачный фон (android:background="@android:color/transparent") на макете, содержащей кнопку (ниже ImageView). Это будет определять, каковы максимальные границы эффекта ряби."

<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 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>

Надеюсь, что это поможет.

Ответ 2

У меня такая же проблема. Единственное решение, которое я нашел до сих пор, не на 100% в порядке, так как рябь замаскирована по виду (ее без границ).

Решение (обходной путь): окружайте свой ImageButton другим видом и задайте пульсацию на переднем плане вместо фона в вашем макете, как это:

<ImageView ... /> 

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

    <ImageButton />
</FrameLayout>

Я был бы очень рад, если бы кто-то объяснил, почему рябь рисуется за изображением. Также, если вы посмотрите на приложение Google Фото, в деталях изображения у них есть прозрачные значки над представлением изображения с пульсацией. Я хотел бы воспроизвести это, но я не могу сделать пульсацию на переднем плане. Кто-нибудь знает, как накладывать прозрачные кнопки изображения на все, но все еще есть пульсация?

окончательное решение EDIT здесь вы можете найти точно такой же вопрос ссылка

с большим объяснением, что происходит. решение такое же, но, кроме того, оно решает прямоугольную маску, добавляя

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>

Ответ 3

Я знаю, что это старая статья, но сегодня я немного боролся с ней, поэтому я публикую то, что мне наконец удалось выяснить, и, возможно, кто-то другой может извлечь из этого пользу. Один ключевой акцент заранее, всегда делайте RTFM !

1) История

Я стремился использовать неограниченный эффект ряби на элементах вкладок и, следовательно, распространить его по всей области AppBarLayout. Я применил @android:color/transparent к TabLayout в качестве первого родителя-переносчика и дал AppBarLayout цвет фона, тем не менее, пульсация все еще была обрезана прямо на границах высоты TabLayout.

2) Мораль истории (RTFM)

Итак, я бегу к гнезду знаний Android: Документация и заметил это:

android: attr/selectableItemBackgroundBorderless для пульсации, которая выходит за пределы представления. Он будет нарисован и ограничен ближайшим родителем представления с ненулевым фоном.

3) курс действий

Используя Layout Inspector, я понял, что @android:color/transparent хотя и прозрачный (duh!), Он фактически назначает 0 в качестве значения атрибута bg для View, но ноль не равен null, поэтому пульсация ограничена в ближайшем родительском элементе.

4) Заключение

Имея это в виду, я пошел и установил свойство android:background моего TabLayout на @null а не прозрачный, и теперь у меня есть небольшая волнистая волнистость, распространяющаяся по области AppBarLayout.

5) Outro: ** ANDROID & SO FTW!

Подпишитесь на всех в этом посте, которые проливают свет на этот вопрос словом. Ура!

Ответ 4

После обертывания ImageButton внутри FrameLayout, я получал прямоугольную форму на ощупь. Нанесен фон с овальной формой и получил на ощупь круглую форму.