Áp dụng Material Design Touch Ripple cho ImageButton?

95

Tôi có một nút hình ảnh không phản hồi với hoạt ảnh chạm khi nó được nhấp vào vì nó là một hình ảnh tĩnh không giống như các nút thông thường trên kẹo mút đi kèm với hiệu ứng gợn sóng tích hợp sẵn. Tôi muốn thêm hiệu ứng gợn sóng của material design vào hình ảnh nhưng dường như không thể tìm ra cách để thực hiện nó. Tôi có thể đặt bộ lọc màu trên ảnh nhưng đó không phải là hiệu ứng gợn sóng. Một ví dụ về những gì tôi đang cố gắng làm là khi bạn giữ ảnh bìa album trong Google Play Âm nhạc và một gợn bóng mờ di chuyển trên hình ảnh.

— sanic
nguồn

261

Để có kết quả tốt hơn:

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

— i.shadrin
nguồn

7

Đây là câu trả lời tốt hơn - mang lại cảm giác tròn cũng như hiệu ứng gợn sóng, cảm ơn bạn.

— ElliotM

3

Điều này cũng có nên làm việc với các ngăn kéo màu? Đối với tôi không có hiệu ứng cảm ứng nào được nhìn thấy mặc dù áp dụng nền. Chủ đề của tôi được mở rộng từ Theme.AppCompat.Light.DarkActionBar, đây có thể là một vấn đề?

— Tên hiển thị

12

thay vào đó nền sử dụng nó làm nền trước cho tất cả các chế độ xem nó hoạt động tốt.

— Gopi Cg

1

Có ai đã tìm ra cách để làm điều này và cũng có thể thay đổi màu nền không? Thay đổi BackgroundTint không hoạt động và thiết lập Nền trước thành "? Attr / selectableItemBackgroundBorderless" tạo ra một phần đệm khó chịu trên nút.

— Sev

1

Nếu bạn đang sử dụng nền tối, gợn sóng có thể không đủ nhìn thấy. Bạn thay đổi nó thành gợn sóng màu sáng bằng cách thêm android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"(hoạt động trên <API 21). Xem stackoverflow.com/q/28605031/599535 để biết các giải pháp khác.

— Lifes

28

Bạn chỉ có thể thêm nền vào ImageButton của mình như sau:

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

— Nicolas
nguồn

2

Sử dụng android: foreground = "? Attr / selectableItemBackgroundBorderless"

— MFQ

@MFQ Làm thế nào nó khác với android: attr / selectableItemBackground?

— killer

1

@killer selectableItemBackgroundBorderless = cho một gợn tròn không có giới hạn như thế nào nếu bạn nhấn chuột vào một biểu tượng trong thanh công cụ, nhưng selectableItemBackground cho gợn hình chữ nhật, bạn có thể thấy sự khác biệt nếu bạn dài nhấp vào biểu tượng mà thực hiện drawbels này

— MFQ

6

Tôi đã nhận được câu trả lời tốt từ i.shadrin ( tại đây ) và Nicolars ( tại đây ).

Sự khác biệt giữa các câu trả lời của họ là ?attr/selectableItemBackgroundBorderlesscó thể cung cấp cho bạn android.view.InflateException, vì vậy ?android:attr/selectableItemBackgroundgiải pháp là.

FWIW, tôi không biết tại sao ngoại lệ xảy ra, vì câu trả lời đầu tiên hoạt động tốt trong tất cả các dự án cũ của tôi, nhưng trong dự án gần đây của tôi thì không (có thể vì chủ đề ứng dụng = android:Theme.Material?).

Điều kỳ lạ đang xảy ra là mặc dù hiệu ứng gợn sóng đã được hiển thị nhưng nó đã vượt ra ngoài ImageButton, vì vậy giải pháp là:

Để sử dụng android:foreground="?android:attr/selectableItemBackgroundBorderless"thay vìandroid:background="?android:attr/selectableItemBackgroundBorderless"

Hy vọng nó sẽ giúp bạn nếu bạn đang phải đối mặt với như vậy.

— Filipe Brito
nguồn

3

Nếu bạn đã có nền và không muốn thay đổi nó, hãy sử dụng nền trước;

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

— Sabri Meviş
nguồn