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


121

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:

wprowadź opis obrazu tutaj

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?




1
Rozważ zmianę wybranej odpowiedzi na tę z największą liczbą głosów pozytywnych, ponieważ w rzeczywistości rozwiązuje ona problem
Jeff Barger

@JeffBarger Dlaczego? Obie działają dobrze. Nie ma między nimi lepszego.
programista Androida

Odpowiedzi:


18

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>

289

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.


Miły. Czy mogę też jakoś ustawić jego kolor?
programista Androida

4
w API 23 tło 'up' wydaje się być o połowę mniejsze w porównaniu do selectbleItemBackgroundBorderless
snodnipper

3
Dobra, najlepsza odpowiedź. ty
Skywalker

1
@androiddeveloper, kolor można ustawić, ustawiając colorControlHighlight jak poniżej w twoich stylach.xml <item name = "colorControlHighlight"> # F00 </item>
bond

4
Jeśli używasz go w innych układach, możesz potrzebować również android:clipChildren="false"w układach, aby umożliwić propagację animacji.
Tanasis

83

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.


Jakiś sposób, aby to dostosować? Na przykład kolor? Może coś w stylach? A dokładniej w samym tagu XML widoku?
programista Androida

Nie wiem, dzisiaj rozwiązałem ten problem i powyższe odpowiedzi nie działały tak, jak potrzebowałem. Zakładam, że kolor można dostosować w stylach, ale na pewno nie w widoku.
Anrimian,

1
To jest dokładnie ten efekt, którego szukam. Przy okazji, czy możesz wspomnieć, gdzie znaleźć ten atrybut, wydaje się, że nie jest to udokumentowane.
Jack Wang,

2
Odpowiada na pytanie OP. Należy oznaczyć jako najlepszą odpowiedź. +1
Corbella

2
@MeysamHadigheh ?to skrót do?attr/
musooff

47

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>

To coś w moim kodzie. Możesz użyć swoich kolorów :)
Thomas R.

Jak użyć domyślnego selektora w przypadku, gdy jest on dostępny przed Lollipopem? Czy używa tych samych kolorów co ten na dialerze?
programista Androida

2
Możesz umieścić ripple drawable w folderze drawables-v21. A dla pre L użyj prostego stanu dającego się narysować. Użyj tej samej nazwy pliku i umieść go w folderze do rysowania (domyślnym).
Thomas R.,

2
Możesz także stworzyć styl. W folderze values-v21 utwórz nowy styl i ustaw tętnienie do rysowania jako tło. A dla pre L, tj. W folderze wartości styles.xml umieść jako tło atrybut „selectableItemBackground” dla tego samego stylu.
Thomas R.,

1
Jeśli chcesz mieć ten sam kolor tętnienia, co inne domyślne efekty falowania używane w aplikacji, użyj jako koloru „? Attr / colorControlHighlight”.
alexbchr

27

Po prostu dodaj to tło do swojego widoku

android:background=?android:attr/actionBarItemBackground


19

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.


3

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"


2

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>

1

Próbować:

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

1
Nie wysyłaj tylko kodu jako odpowiedzi, ale dołącz wyjaśnienie, co robi Twój kod i jak rozwiązuje problem. Odpowiedzi z wyjaśnieniem są na ogół wyższej jakości i częściej przyciągają głosy za.
Mark Rotteveel

Bardziej płynne niż ustawienie actionBarItemBackground jako tła. Ale wciąż nie jest to dokładnie to samo, co sama animacja paska akcji.
coolcool1994


0

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
}

Nie znaleziono context.getResource
Rahul Mandaliya

@RahulMandaliya dziękuję za komentarz. Mój błąd, to była moja niestandardowa metoda rozszerzenia. Dodałem to do odpowiedzi
mihails.kuzmins
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.