So erstellen Sie einen Welleneffekt in einem einfachen Layout

112

Wie kann ich beim Berühren des Layouts einen Welleneffekt in einem einfachen linearen / relativen Layout erzielen?

Ich habe versucht, den Hintergrund eines Layouts auf Folgendes einzustellen:

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

Ich sehe jedoch nur einen einfachen weißen Hintergrund und keinen Welleneffekt, wenn ich das Layout berühre. Was mache ich falsch?

Bearbeiten:

Als Referenz ist hier meine Layout-XML-Datei:

<?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>
Zach
quelle
2
Die Ansicht, in der sich die Welligkeit befindet, muss aktiviert und anklickbar oder fokussierbar sein.
Alanv
Danke Alanv, siehe unten für meine Antwort. Grundsätzlich markiere ich mein Layout, in dem ich den Ripple-Effekt haben möchte, als anklickbar, aber es funktioniert immer noch nicht.
Zach
Dies funktioniert auch gut, wenn ich den <item android:drawable="@android:color/white"/>Abschnitt entferne . Ich bin mir also nicht sicher, wie das funktionieren soll, wenn ich eine Hintergrundfarbe für das Layout haben möchte. Dies auf ein anderes Layout mit einer Hintergrundfarbe zu legen, funktioniert ebenfalls nicht!
Zach
4
In welche Farbe wird die Welligkeit in Ihrer Ansicht gezeichnet, z. B. in welche Farbe wird colorControlHighlight aufgelöst?
Alanv

Antworten:

260

Legen Sie diese Eigenschaften in Ihrem Layout fest (wenn Ihr Layout den Standardhintergrund für Weiß / Hell hat):

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

In diesem Fall benötigen Sie keine benutzerdefinierte Zeichnung.

Wenn Ihr Layout jedoch einen schwarz / dunklen Hintergrund hat, müssen Sie Ihre eigene Welligkeit erstellen, die wie folgt gezeichnet werden kann:

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

Und dann setzen Sie diese Welligkeit als Ihre android: Hintergrund- Eigenschaft.

Sie können viele Beispiele für diese Arten von Wellen in AOSP sehen: hier

IgorGanapolsky
quelle
11
Was ist, wenn ich eine andere Farbe als Hintergrund angeben muss? Was sollte dann der beste Ansatz sein?
Anuj Sharma
1
@AnujSharma Haben Sie versucht, Farbressourcen für zu geben background?
IgorGanapolsky
1
@ralphspoon Siehe stackoverflow.com/questions/26604134/…
IgorGanapolsky
31
Wenn Sie eine andere Hintergrundfarbe möchten, können Sie diese Farbe als Hintergrund festlegen und stattdessen "? Attr / selectableItemBackground" als android: Vordergrund verwenden
Lucas Arrefelt
2
Beeindruckend! das ist toll. Dies sollte als Antwort +1
Zia Ur Rahman
59

Ich füge dies zusätzlich zu Igor Ganapolskys Antwort hinzu, falls jemand ein Layout mit einer anderen Farbe und einem Welleneffekt haben möchte. Sie erstellen einfach einen Welleneffekt in Drawables wie folgt:

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>

Geben Sie es dann als Hintergrund für Ihr Layout oder als eine beliebige Schaltfläche an, wie Igor Ganapolsky in seiner Antwort erwähnt hat.

android:clickable="true"
android:background="@drawable/ripple"
Erfan GLMPR
quelle
36

Sie müssen das folgende Code-Snippet in einem Widget ( TextView/ Button) ändern und können den Ripple-Effekt implementieren :

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

Und du bist gut zu gehen.

Pankaj Lilan
quelle
hmm vordergrund? das ist toll!
Badr
Dies ist hilfreich, wenn Sie bereits ein Android: Hintergrund = "@ color / colorAccent" gesetzt haben
Aero
@aero Es ist hilfreich, auch wenn Sie keinen Hintergrund festlegen.
Pankaj Lilan
1
Dies funktioniert neben Widgets auch für Layouts und benutzerdefinierte Ansichten.
anoo_radha
1
@MichaelKern Ja, Sie haben Recht, es basiert auch auf den Anforderungen aller in ihrem Code.
Pankaj Lilan
20

Es stellt sich heraus, dass dies wie beabsichtigt funktioniert. Der Standardwert für das Materialthema colorControlHighlight ist #40ffffff. Auf einem weißen Hintergrund wird dies also nicht angezeigt. Das Ändern der Hervorhebungsfarbe in etwas anderes funktioniert und / oder das Ändern der Hintergrundfarbe des Objekts.

Vielen Dank an alle (besonders an Alanv, der mich in die richtige Richtung gelenkt hat).

Zach
quelle
Wenn ich android: background = "? attr / selectableItemBackground" in meiner Ansicht verwende, wie kann ich den Hintergrund des Objekts ändern?
Codeskraps
1
Trotzdem habe ich festgestellt, dass der Standardstatus selectableItemBackground transparent ist. Also habe ich eine Ansicht darunter mit der Farbe eingestellt, die ich wollte.
Codeskraps
1
Kurznotiz: Sie können colorControlHighlightin Ihrem ändern styles.xml. Fügen Sie es beispielsweise Ihrem benutzerdefinierten Thema hinzu.
Nuhman
9

Stellen Sie android:clickable="true"Ihr Layout ein.

JeromePApp
quelle
5

Dies ist ein Beispiel für das Klicken auf ein Beispiellayout mit Welligkeitseffekt:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">
Javid Sattar
quelle
Das ist einfach großartig, wie einfach das ist und die einfache Tatsache, dass dies einfach funktioniert.
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>

Verwenden Sie diese Datei ripple.xml im Ordner Drawable und weisen Sie sie dann als Ansicht zu

android: background = "@ drawable / ripple"

android: clickable = "true"

Abhishek Sengupta
quelle
2

Fügen Sie einfach den Standard-Ripple-Effekt mit hinzu android:background="?selectableItemBackground"

Mögen:

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

           ...

</LinearLayout>
Yatin Deokar
quelle
0

Fügen Sie dies in Ihr Layout ein:

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

Hinweis: In der API-Dokumentation ist ein Fehler aufgetreten. Es funktioniert nur mit API> = 23

Verwenden Sie für alle API- Ebenen diese Lösung

Andrej Sitar
quelle
2
Ihr Link leitet dieselbe Seite weiter
TSR
Denken Sie daran, dass Sie auch die Option haben, android zu verwenden: background = "? Attr / selectableItemBackgroundBorderless" Da es weniger randlos ist Der Ripple-Effekt erstreckt sich auf die übergeordnete Ansicht. Dies kann in vielen Fällen besser aussehen.
Michael Kern
0

Ich probiere all diese Antworten aus und nichts hat mir geholfen, also habe ich gelöst, den folgenden Stil zu kreieren:

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

Und dann habe ich mich auf mein lineares Layout angewendet:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
Engelo Polotto
quelle