So erstellen Sie einen Welleneffekt in einem einfachen Layout

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>

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

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"

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.

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

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

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

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

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>

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

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>