Jak stworzyć efekt ripple w prostym układzie


112

Jak mogę uzyskać efekt tętnienia w prostym układzie liniowym / względnym po dotknięciu układu?

Próbowałem ustawić tło układu na coś takiego:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight" >

    <item android:drawable="@android:color/white"/>

</ripple>

Jednak po dotknięciu układu widzę tylko zwykłe białe tło i brak efektu tętnienia. Co ja robię źle?

Edytować:

Dla porównania, oto mój plik xml układu:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

2
Widok, w którym znajduje się ripple, musi być włączony i można go kliknąć lub ustawić fokus.
alanv

Dzięki Alanv, zobacz poniżej moją odpowiedź. Zasadniczo zaznaczam mój układ, w którym chcę, aby efekt tętnienia był klikalny, ale nadal nie działa.
Zach,

Działa to również dobrze, jeśli usunę tę <item android:drawable="@android:color/white"/>sekcję. Więc nie jestem pewien, jak to ma działać, gdybym chciał mieć kolor tła w układzie. Umieszczenie tego na innym układzie z kolorem tła również nie działa!
Zach

4
Jakiego koloru jest tętnienie w twoim widoku, np. Do jakiego koloru jest przypisane colorControlHighlight?
alanv

Odpowiedzi:


260

Ustaw te właściwości w swoim układzie (jeśli układ ma domyślne białe / jasne tło):

          android:clickable="true"
          android:focusable="true"
          android:background="?attr/selectableItemBackground"

W tym przypadku nie potrzebujesz niestandardowego rysunku.

Jeśli jednak twój układ ma czarne / ciemne tło, musisz stworzyć własne tętnienie, które można narysować, takie jak ten:

<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white">
    <item
        android:id="@android:id/mask"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

Następnie ustaw to ripple do rysowania jako właściwość android: background .

Możesz zobaczyć wiele przykładów tego typu zmarszczek w AOSP: tutaj


11
co jeśli muszę podać inny kolor jako tło? Więc jakie powinno być najlepsze podejście?
Anuj Sharma

1
@AnujSharma Czy próbowałeś podać zasób koloru background?
Igor Ganapolsky


31
Jeśli chcesz mieć inny kolor tła, możesz ustawić ten kolor jako tło i wstawić „?
Attr / selectableItemBackground

2
Łał! to jest świetne. To powinno być oznaczone jako odpowiedź +1
Zia Ur Rahman

59

Dodam to dodatkowo do odpowiedzi Igora Ganapolsky'ego na wypadek, gdyby ktoś chciał mieć układ w innym kolorze, a także efekt falowania. Po prostu tworzysz efekt tętnienia w elementach do rysowania:

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

następnie podaj go jako tło układu lub dowolny przycisk, o którym wspomniał Igor Ganapolsky w swojej odpowiedzi.

android:clickable="true"
android:background="@drawable/ripple"

37

Musisz zmienić następujący fragment kodu w dowolnym widżecie ( TextView/ Button) i możesz zaimplementować efekt Ripple :

android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"

I jesteś gotowy.


hmm pierwszy plan? to jest świetne!
Badr

Jest to przydatne, jeśli masz już androida: background = "@ color / colorAccent" set
aero

@aero Jest to pomocne, nawet jeśli nie ustawisz tła.
Pankaj Lilan,

1
działa to na układach i niestandardowych widokach oprócz widżetów.
anoo_radha

1
@MichaelKern Tak, masz rację, również jest to oparte na wymaganiach każdego z nich w ich kodzie.
Pankaj Lilan

20

Okazuje się, że to działa zgodnie z przeznaczeniem. Standardowa wartość colorControlHighlight motywu Materiał to #40ffffff. Więc na białym tle to się nie pojawi. Zmiana koloru podświetlenia na inny działa i / lub zmiana koloru tła obiektu.

Dziękuję wszystkim (zwłaszcza Alanvowi za wskazanie mi właściwego kierunku).


jeśli używam android: background = "? attr / selectableItemBackground" w moim widoku, jak mogę zmienić tło obiektu?
codkraps

1
Nieważne Odkryłem, że domyślny stan selectableItemBackground jest przezroczysty. Ustawiłem więc pod nim widok w kolorze, który chciałem.
codkraps

1
krótka uwaga: możesz zmienić colorControlHighlightswój styles.xml. Dodaj go na przykład do własnego motywu.
Nuhman,


5

Oto przykład kliknięcia przykładowego układu z efektem tętnienia:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

To proste, niesamowite, jakie to proste i prosty fakt, że to po prostu działa.
Machado

4
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

Użyj tego ripple.xml w folderze do rysowania , a następnie przypisz go jako widok

android: background = "@ drawable / ripple"

android: clickable = "true"


2

Po prostu dodaj domyślny efekt tętnienia za pomocą android:background="?selectableItemBackground"

Lubić:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

0

Umieść to w swoim układzie:

android:clickable="true"
android:background="?attr/selectableItemBackground"

Uwaga: w dokumentacji API jest błąd. Będzie działać tylko na API> = 23

Dla wszystkich poziomów API użyj tego rozwiązania


2
Twój link przekierowuje tę samą stronę
TSR

Pamiętaj, że masz również opcję korzystania z android: background = "? Attr / selectableItemBackgroundBorderless" Ponieważ jest to bez obramowania Efekt falowania rozszerzy się na widok nadrzędny. W wielu przypadkach może to wyglądać lepiej.
Michael Kern

0

Próbowałem wszystkich tych odpowiedzi i nic mi nie pomogło, więc rozwiązałem, tworząc następujący styl:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

Następnie zastosowałem do mojego układu liniowego:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
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.