it-swarm.com.de

So erzeugen Sie einen Ripple-Effekt in einem einfachen Layout

Wie kann ich in einem einfachen linearen/relativen Layout einen Ripple-Effekt erzielen, wenn Sie das Layout berühren?

Ich habe versucht, den Hintergrund eines Layouts wie folgt festzulegen:

<?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 Sie das Layout berühren. Was mache ich falsch?

Bearbeiten:

Hier finden Sie 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>
78
Zach

Es stellt sich heraus, dass dies wie beabsichtigt funktioniert. Der standardmäßige colorControlHighlight-Wert für das Material ist #40ffffff. Auf einem weißen Hintergrund wird dies nicht angezeigt. Das Ändern der Markierungsfarbe in etwas anderes funktioniert und/oder die Hintergrundfarbe des Objekts ändern.

Vielen Dank an alle (besonders Alanv, dass er mich in die richtige Richtung weist).

17
Zach

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

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

In diesem Fall benötigen Sie kein benutzerdefiniertes Zeichenelement.

Wenn Ihr Layout jedoch einen schwarzen/dunklen Hintergrund hat, müssen Sie Ihre eigene Ripple wie folgt zeichnen:

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

Legen Sie dann diese Welligkeit als Android: background -Eigenschaft fest.

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

183
IgorGanapolsky

Ich füge dies zusätzlich zu der Antwort von Igor Ganapolsky hinzu, falls jemand ein Layout mit einer anderen Farbe haben möchte und auch einen Welleneffekt hat. Sie erzeugen einfach einen Ripple-Effekt 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>

dann geben Sie es als Hintergrund für Ihr Layout oder einen beliebigen Button als Igor Ganapolsky in seiner Antwort an.

Android:clickable="true"
Android:background="@drawable/ripple"
47
Erfan GLMPR

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

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

Und du bist gut zu gehen. 

23
Pankaj Lilan

Legen Sie in Ihrem Layout Android:clickable="true" fest.

8
JeromePApp
<?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 ripple.xml im Drawable-Ordner und weisen Sie sie dann als Ansicht zu 

Android: background = "@ drawable/wipple"

Android: anklickbar = "true"

2

Fügen Sie einfach einen Standard-Ripple-Effekt mit Android:background="?selectableItemBackground" hinzu.

Mögen:

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

           ...

</LinearLayout>
1
yatin deokar

Fügen Sie dies in Ihr Layout ein: 

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

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

Für alle APIEbenen verwenden Sie diese Lösung

0
Andrej Sitar

Ich versuche all diese Antworten und nichts hat für mich funktioniert, also habe ich den folgenden Stil gelöst:

<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 mein lineares Layout angewendet:

<LinearLayout
      Android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
0
Ângelo Polotto

Dies ist ein Beispiel für das Klicken auf ein Musterlayout mit Ripple-Effekt:

 <LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="?attr/selectableItemBackground"
    Android:clickable="true"
    Android:focusable="true"
    Android:orientation="vertical">
0
J.Sattar