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

96

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

android xml android-5.0-lollipop imagebutton material-design санический
источник

Ответы:

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"/>
Сабри Мевиш
источник