it-swarm.com.de

Wie erstelle ich eine kreisförmige Welligkeit auf einer Schaltfläche, wenn darauf geklickt wird?

Hintergrund

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

enter image description here

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 eine neue Zeichenfläche erstellen oder gibt es eine integrierte Möglichkeit dafür?

103

Wenn Sie bereits ein Hintergrundbild haben, sehen Sie hier ein Beispiel für eine Welligkeit, die ähnlich wie selectableItemBackgroundBorderless aussieht:

            <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 weißem Hintergrund auf 10% 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>
14
live-love

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

Android:background="?selectableItemBackgroundBorderless"

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

240
bond

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

Android:background="?actionBarItemBackground"

UPD : Die Ripple-Farbe 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-Ripple-Effekte gilt.

48
Anrimian

Erstellen und Festlegen einer als Hintergrund darstellbaren Welligkeit. 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>
41
Thomas R.

Sie können mit dem xml-Attribut Android:radius Eine Kreiswelligkeit erzeugen, die gezeichnet werden kann.

Beispiel:

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

Beachten Sie, dass Ihr your_radius Kleiner sein sollte als Ihre Ansichtsbreite und -höhe. Beispiel: Wenn Sie eine Ansicht mit der Größe 60dp x 60dp Haben, sollte your_radius In der Nähe von 30dp Liegen (Breite/2 oder Höhe/2).

Arbeiten Sie an Android 5.0 und höher.

15

Fügen Sie einfach diesen Hintergrund zu Ihrer Ansicht hinzu "Android:background=?android:attr/actionBarItemBackground"

10
Dipak

Wenn Sie allgemeinere XML-Dateien möchten, 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"

3
100RaBH