Jak zrobić okrągłe tętnienie na przycisku po kliknięciu?

tło

W aplikacji do wybierania numerów na Androidzie, gdy zaczniesz szukać czegoś i klikniesz przycisk strzałki po lewej stronie EditText, uzyskasz na nim efekt tętnienia kołowego:

Problem

Ja też próbowałem, ale dostałem prostokątny:

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

Pytanie

Jak sprawić, by po kliknięciu przycisk miał efekt falowania kołowego? Czy muszę stworzyć nowy element do rysowania, czy jest na to wbudowany sposób?

Jeśli masz już obraz tła, oto przykład tętnienia, które wygląda na zbliżone do 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: (krycie ustawione na 10% na białym tle) 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>

Jeśli używasz motywu AppCompat, możesz ustawić tło widoku jako:

android:background="?selectableItemBackgroundBorderless"

Spowoduje to dodanie okrągłych tętnień na 21 i powyżej oraz kwadratowego tła poniżej 21.

Kolejny atrybut z okrągłym efektem tętnienia, specjalnie dla paska akcji:

android:background="?actionBarItemBackground"

UPD : kolor falowania można zmienić za pomocą tego atrybutu:

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

Należy jednak pamiętać, że ten atrybut dotyczy wszystkich domyślnych efektów tętnienia.

Utwórz i ustaw tętnienie do rysowania jako tło. Coś takiego.

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

Po prostu dodaj to tło do swojego widoku

android:background=?android:attr/actionBarItemBackground

Możesz stworzyć tętnienie koła, które można narysować, używając android:radiusatrybutu w XML.

Przykład:

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

Zwróć uwagę, że Twój widok your_radiuspowinien być mniejszy niż szerokość i wysokość widoku. Na przykład: jeśli masz widok z rozmiarem 60dp x 60dp your_radiuspowinien być blisko 30dp(szerokość / 2 lub wysokość / 2).

Pracuj na Androidzie 5.0 lub nowszym.

Jeśli chcesz bardziej ogólnych plików XML, mam dwa pliki:

1) btn_ripple_background z kodem:

<?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 z kodem:

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

wreszcie użycie:android:foreground="@drawable/ripple_btn_background"

Jeśli chcesz uzyskać efekt tętnienia, który nie przekroczy granicy koła, możesz sprawdzić ten kod. U mnie działa idealnie. Pamiętaj tylko, że musisz podać id = @ android: id / mask w 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>

Próbować:

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

po prostu dodaj ten element do swojego

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

W Kotlin / Java możesz wykonać następujące czynności

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
}