Ripple Animation - Hiệu ứng gợn sóng

Tổng quan

Ripple touch effect ( hiệu ứng gợn sóng khi được chạm vào) được ra mắt cùng với Material Design ở phiên bản Android 5.0 ( API level 21).

Việc phản hồi lại khi được chạm giúp người dùng xác định được họ đã tương tác với phần nào của các UI element. Ví dụ, các button hiện nay sẽ hiển thị hiệu ứng gợn sóng khi chúng được chạm vào, đây chính là hiệu ứng phản hồi mặc định trong Android 5.0. Hiệu ứng gợn sóng có thể được cài đặt để nó kết thúc ở viền của view hay đi ra ngoài cả viền của view. Đây là screenshot của các button khi chúng được chạm và tạo ra hiệu ứng gợn sóng.

Ở phía ngoài cùng bên trái là hiệu ứng bắt đầu khi button vừa mới được chạm, các hình tiếp theo ( từ trái qua phải) mô tả hiệu ứng loang dần ra đến tận viền của button. Khi hiệu ứng kết thúc, button sẽ trở về hình dạng ban đầu.Mặc định, hiệu ứng sẽ kết thúc trong khoảng một thời gian ngắn, nhưng ta có thể tùy biến cho nó kết lúc lâu hơn hay ngắn hơn.

Lưu ý là hiệu ứng gợn sóng này chỉ xuất hiện trên các máy chạy bản 5.0 trở lên, đối với các phiên bản cũ hơn thì các button chỉ hiển thị hiệu ứng highlight như bình thường.

Clickable View

Thông thường, hiệu ứng gợn sóng chỉ hoạt động mặc định ở phiên bản API 21 và một số touchable view, ta có thể cài đặt chúng vào bằng cách thêm vào:

android:background="?android:attr/selectableItemBackground"

hoặc trong code:

int[] attrs = new int[]{R.attr.selectableItemBackground};
TypedArray typedArray = getActivity().obtainStyledAttributes(attrs);
int backgroundResource = typedArray.getResourceId(0, 0);
myView.setBackgroundResource(backgroundResource);

Ta được kết quả:

Button

Hầu hết các button đều được tạo bởi vài drawable. Thông thường, ta có trạng thái bình thường và được bấm như này:

/drawable/button.xml :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/button_pressed"/>
    <item android:drawable="@drawable/button_normal"/>
</selector>

Nếu bạn có một nút tùy chọn với trạng thái selected, hay màu chữ thay đổi tùy theo trạng thái... Thì background mặc định của button sẽ không hoạt động. Bạn phải tự thêm hiệu ứng này vào bằng cách gói chúng vào thẻ ripple:

/drawable-v21/button.xml :

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:drawable="@drawable/button_normal" />
</ripple>

Sử dụng ?android:colorControlHighlight thì hiệu ứng gợn sóng sẽ có màu giống với màu gợn sóng có sẵn của app.

Nếu bạn không thích màu xám mặc định, bạn có thể chọn bất cứ màu nào bạn muốn rồi cho chúng vào thẻ android:colorControlHighlight :

<resources>

  <style name="AppTheme" parent="android:Theme.```Java
Material.Light.DarkActionBar">
    <item name="android:colorControlHighlight">@color/your_custom_color</item>
  </style>

</resources>

Nếu bạn muốn hiệu ứng gợn sóng lan ra ngoài cả viền của view thì thay vào đó, bạn có thể sử dụng ?attr/selectableItemBackgroundBorderless. Cách này hoạt động bình thường với cả ImageButton hay các button nhỏ là một phần của view khác lớn hơn.

Nguồn : https://guides.codepath.com/android/Ripple-Animation