Применить Material Design Touch Ripple к ImageButton?

96

У меня есть кнопка изображения, которая не реагирует сенсорной анимацией при нажатии, потому что это статическое изображение, в отличие от обычных кнопок на леденце, которые имеют встроенный эффект пульсации. Я хотел бы добавить к изображению эффект касания пульсации материального дизайна, но не могу найти способ его реализовать. Я могу установить цветной фильтр поверх изображения, но это не эффект ряби. Пример того, что я пытаюсь сделать, - это когда вы держите изображение обложки альбома в Google Play Music, и тень движется по изображению.

— санический
источник

266

Для еще лучшего результата:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_button"
    android:background="?attr/selectableItemBackgroundBorderless"
/>

— и.шадрин
источник

7

Это лучший ответ - дать ощущение округлости, а также эффект ряби, спасибо.

— ElliotM

3

Должно ли это также работать с цветными чертежами? Для меня никакого эффекта касания не видно, хотя применяется фон. Моя тема расширяется от Theme.AppCompat.Light.DarkActionBar, это может быть проблемой?

— Отображаемое имя

12

вместо фона используйте его на переднем плане для всех представлений, он работает нормально.

— Gopi Cg

1

Кто-нибудь нашел способ сделать это, а также изменить цвет фона? Изменение BackgroundTint не работает, а установка Foreground на «? Attr / selectableItemBackgroundBorderless» дает неприятный отступ на кнопке.

— Сев,

1

Если вы используете темный фон, рябь может быть недостаточно заметна. Вы измените его на светлую рябь, добавив android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(работает с <API 21). См. Stackoverflow.com/q/28605031/599535 для других решений.

— Lifes

28

Вы можете просто добавить фон в свой ImageButton следующим образом:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/btn_dialog"
    android:background="?android:attr/selectableItemBackground" />

— Николас
источник

2

Используйте android: foreground = "? Attr /

— selectableItemBackgroundBorderless

@MFQ Чем он отличается от? Android: attr / selectableItemBackground

— Killer

1

@killer selectableItemBackgroundBorderless = дает круговую рябь без границ, например, если вы щелкаете значок на панели инструментов, но selectableItemBackground дает прямоугольную рябь, вы можете увидеть разницу, если долго щелкали значок, реализующий эти рисования

— MFQ

6

Я получил хорошие ответы от i.shadrin ( здесь ) и Nicolars ( здесь ).

Разница между их ответами в том, что они ?attr/selectableItemBackgroundBorderlessмогут дать вам ответ android.view.InflateException, так что ?android:attr/selectableItemBackgroundэто решение.

FWIW, я не знаю, почему происходит исключение, потому что первый ответ работал нормально во всех моих старых проектах, но в моем недавнем проекте нет (возможно, потому что тема приложения = android:Theme.Material?).

Произошла странная вещь: хотя эффект ряби был показан, он выходил за пределы ImageButton, поэтому решение было таким:

Чтобы использовать android:foreground="?android:attr/selectableItemBackgroundBorderless"вместоandroid:background="?android:attr/selectableItemBackgroundBorderless"

Надеюсь, это поможет вам, если вы столкнетесь с тем же.

— Филипе Брито
источник

3

Если у вас уже есть фон и вы не хотите его менять, используйте передний план;

<ImageButton
    android:layout_width="60dp"
    android:layout_height="match_parent"
    android:background="@drawable/preview_in_4k_background"
    android:src="@drawable/ic_full_screen_24px"
    android:layout_marginLeft="5dp"
    android:foreground="?attr/selectableItemBackgroundBorderless"
    android:layout_column="2"/>

— Сабри Мевиш
источник