Wie kann man eine Schaltfläche kreisförmig kräuseln, wenn sie angeklickt wird?

Hintergrund

Wenn Sie in der Dialer-App von Android nach etwas suchen und auf die Pfeilschaltfläche links neben dem EditText klicken, wird ein kreisförmiger Welleneffekt angezeigt:

Das Problem

Ich habe versucht, es auch zu haben, aber ich habe ein rechteckiges:

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

Die Frage

Wie kann ich dafür sorgen, dass die Schaltfläche beim Klicken einen kreisförmigen Welleneffekt hat? Muss ich ein neues Zeichen erstellen oder gibt es dafür einen eingebauten Weg?

Wenn Sie bereits ein Hintergrundbild haben, finden Sie hier ein Beispiel für eine Welligkeit, die in der Nähe von selectableItemBackgroundBorderless liegt:

            <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: (Deckkraft auf 10% auf weißem Hintergrund eingestellt) 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>

Wenn Sie das AppCompat-Design verwenden, können Sie den Hintergrund der Ansicht wie folgt festlegen:

android:background="?selectableItemBackgroundBorderless"

Dies fügt kreisförmige Welligkeit bei 21 und darüber und quadratischen Hintergrund bei unter 21 hinzu.

Ein weiteres Attribut mit rundem Welleneffekt, speziell für die Aktionsleiste:

android:background="?actionBarItemBackground"

UPD : Die Welligkeitsfarbe kann durch dieses Attribut geändert werden:

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

Beachten Sie jedoch, dass dieses Attribut für alle Standard-Welligkeitseffekte gilt.

Erstellen Sie eine Welligkeit, die als Hintergrund gezeichnet werden kann, und legen Sie sie fest. Etwas wie das.

<?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>

Fügen Sie diesen Hintergrund einfach Ihrer Ansicht hinzu

android:background=?android:attr/actionBarItemBackground

Sie können eine Kreiswelligkeit erstellen, die mit dem android:radiusAttribut in XML gezeichnet werden kann.

Beispiel:

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

Achten Sie darauf, dass Sie your_radiuskleiner als Ihre Ansichtsbreite und -höhe sein sollten. Zum Beispiel: Wenn Sie eine Ansicht haben, deren Größe 60dp x 60dp your_radiusnahe sein sollte 30dp(Breite / 2 oder Höhe / 2).

Arbeiten Sie mit Android 5.0 und höher.

Wenn Sie allgemeinere XML-Dateien wünschen, habe ich zwei Dateien:

1) btn_ripple_background mit Code:

<?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 mit Code:

<?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>

endlich die verwendung:android:foreground="@drawable/ripple_btn_background"

Versuchen:

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

Wenn Sie einen Welleneffekt wünschen, der die Kreisgrenze nicht überschreitet, können Sie diesen Code überprüfen. Es funktioniert perfekt für mich. Denken Sie daran, Sie müssen id = @ android: id / mask in ripple_blue.xml angeben

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

Fügen Sie diesen Artikel einfach in Ihre

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

In Kotlin / Java können Sie Folgendes tun

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
}