Làm thế nào để tạo một gợn tròn trên một nút khi nó được nhấp?

Lý lịch

Trên ứng dụng trình quay số của Android, khi bạn bắt đầu tìm kiếm thứ gì đó và bạn nhấp vào nút mũi tên ở bên trái của EditText, bạn sẽ có được hiệu ứng gợn tròn trên nó:

Vấn đề

Tôi cũng đã cố gắng để có nó, nhưng tôi có một hình chữ nhật:

    <ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

Câu hỏi

Làm cách nào để làm cho nút có hiệu ứng gợn tròn khi được nhấp? Tôi có phải tạo ra một drawable mới, hoặc có một cách xây dựng cho điều đó?

Nếu bạn đã có một hình ảnh nền, đây là một ví dụ về một gợn sóng trông gần với selectableItemBackgroundBorderless:

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml: (độ mờ được đặt thành 10% trên nền trắng) 1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>

Nếu bạn đang sử dụng chủ đề AppCompat, thì bạn có thể đặt nền của chế độ xem là:

android:background="?selectableItemBackgroundBorderless"

Điều này sẽ thêm gợn tròn trên 21 và trên và nền vuông trên dưới 21.

Một thuộc tính khác với hiệu ứng gợn tròn, đặc biệt dành cho thanh hành động:

android:background="?actionBarItemBackground"

CẬP NHẬT : Màu gợn có thể được thay đổi bởi thuộc tính này:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

Nhưng hãy nhớ, thuộc tính này áp dụng cho tất cả các hiệu ứng gợn mặc định.

Tạo và thiết lập một gợn vẽ có thể vẽ làm nền. Một cái gì đó như thế này.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

Chỉ cần thêm nền này để xem của bạn

android:background=?android:attr/actionBarItemBackground

Bạn có thể tạo gợn tròn có thể vẽ bằng cách sử dụng android:radiusthuộc tính trong xml.

Thí dụ:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

Hãy chú ý, rằng bạn your_radiusnên nhỏ hơn chiều rộng và chiều cao của bạn. Ví dụ: nếu bạn có chế độ xem với kích thước 60dp x 60dp your_radiusthì phải ở gần 30dp(chiều rộng / 2 hoặc chiều cao / 2).

Hoạt động trên Android 5.0 trở lên.

Nếu bạn muốn các tệp XML chung hơn, tôi có hai tệp:

1) btn_ripple_background với mã:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:state_enabled="true"
    android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2) ripple_circuler_shape với mã:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

cuối cùng là cách sử dụng:android:foreground="@drawable/ripple_btn_background"

Thử:

android:background="@android:color/transparent"
android:clickable="true"
android:focusable="true"
android:foreground="?actionBarItemBackground"

Nếu bạn muốn hiệu ứng gợn sẽ không vượt qua ranh giới vòng tròn, bạn có thể kiểm tra mã này. Nó làm việc cho tôi một cách hoàn hảo. Chỉ cần nhớ, bạn phải cung cấp id = @ android: id / mask trong ripple_blue.xml

<ImageButton
    android:id="@+id/send_password_to_mail_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ripple_blue"
    android:src="@drawable/ic_filter" />

ripple_blue.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorRipple">

    <item android:id="@android:id/mask">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

    <item android:id="@android:id/background">

        <shape android:shape="oval">
            <solid android:color="@color/colorWindowBackground"/>
        </shape>

    </item>

</ripple>

color.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <color name="colorWindowBackground">#F2F5FC</color>
    <color name="colorRipple">#0288d1</color>
</resources>

chỉ cần thêm mục này vào

           <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?android:attr/actionBarItemBackground"
                app:srcCompat="@drawable/ic_arrow_drop_down_black_24dp" />

Trong Kotlin / Java, bạn có thể làm như sau

fun View.applyCircularRippleEffect() {
    val backgroundResId = context.getResource(android.R.attr.actionBarItemBackground)

    if (backgroundResId != 0) {
        setBackgroundResource(backgroundResId)
        isClickable = true
        isFocusable = true
    }
}

// getResource extension
fun Context.getResource(resourceId: Int): Int {
    val out = TypedValue()
    theme.resolveAttribute(resourceId, out, true)

    return out.resourceId
}