Como fazer uma ondulação circular em um botão quando ele está sendo clicado?

fundo

No aplicativo discador do Android, quando você começa a pesquisar algo e clica no botão de seta à esquerda do EditText, obtém um efeito de ondulação circular sobre ele:

O problema

Eu tentei ter também, mas consegui um retangular:

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

A questão

Como faço para que o botão tenha um efeito de ondulação circular ao ser clicado? Tenho de criar um novo drawable ou existe uma forma incorporada para isso?

Se você já tem uma imagem de plano de fundo, aqui está um exemplo de ondulação que se parece com 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: (opacidade definida para 10% no fundo branco) 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>

Se você estiver usando o tema AppCompat, poderá definir o plano de fundo da visualização como:

android:background="?selectableItemBackgroundBorderless"

Isso adicionará ondulação circular em 21 e acima e fundo quadrado abaixo de 21.

Outro atributo com efeito de ondulação redondo, especialmente para barra de ação:

android:background="?actionBarItemBackground"

UPD : a cor ondulada pode ser alterada por este atributo:

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

Mas lembre-se de que esse atributo se aplica a todos os efeitos de propagação padrão.

Crie e defina um drawable ondulado como plano de fundo. Algo assim.

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

Basta adicionar este fundo à sua visualização

android:background=?android:attr/actionBarItemBackground

Você pode criar drawable de ondulação de círculo usando o android:radiusatributo em xml.

Exemplo:

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

Preste atenção para que sua your_radiuslargura e altura de visão sejam menores. Por exemplo: se você tem visão com o tamanho 60dp x 60dp your_radiusdeve ser próximo 30dp(largura / 2 ou altura / 2).

Trabalhe no Android 5.0 e superior.

Se você quiser arquivos XML mais genéricos, tenho dois arquivos:

1) btn_ripple_background com código:

<?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 com código:

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

finalmente o uso:android:foreground="@drawable/ripple_btn_background"

Experimentar:

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

Se você deseja um efeito cascata que não ultrapasse o limite do círculo, pode verificar este código. Funciona perfeitamente para mim. Apenas lembre-se, você deve fornecer id = @ android: id / mask em 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>

apenas adicione este item no seu

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

Em Kotlin / Java, você pode fazer o seguinte

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
}