Застосувати Touch Design Ripple з дизайну матеріалу до кнопки ImageButton?

95

У мене є кнопка зображення, яка не реагує на сенсорну анімацію при натисканні, оскільки це статичне зображення, на відміну від звичайних кнопок на льодянику, які мають вбудований ефект пульсацій. Я хотів би додати до зображення ефект ефектного хвильового дотику, але, здається, не можу знайти спосіб його реалізувати. Я можу встановити кольоровий фільтр над зображенням, але це не ефект пульсації. Прикладом того, що я намагаюся зробити, є те, коли ви тримаєте зображення обкладинки альбому в Google Play Музиці, і брижа тіні рухається по зображенню.

— санічний
джерело

261

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

<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 не працює, а встановлення переднього плану на "? Attr / selectableItemBackgroundBorderless" дає неприємні відступи на кнопці.

— Sev

1

Якщо ви використовуєте темний фон, пульсація може бути недостатньо видимою. Ви змінюєте його на світлу пульсацію шляхом додавання android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(працює на <API 21). Інші рішення див. У статті stackoverflow.com/q/28605031/599535 .

— Натюрморти

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

@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"/>

— Сабрі Мевіш
джерело