wake-up-neo.com

Ripple-Effekt auf Android Lollipop CardView

Ich versuche ein CardView zu erhalten, um den Welleneffekt bei Berührung anzuzeigen, indem Sie das Android: backgound-Attribut in der Aktivitäts-XML-Datei wie auf der Android-Entwicklerseite here beschrieben festlegen. Dies funktioniert jedoch nicht. Überhaupt keine Animation, aber die Methode in onClick wird aufgerufen. Ich habe auch versucht, eine ripple.xml-Datei zu erstellen, wie vorgeschlagen hier , aber das gleiche Ergebnis.

CardView, wie es in der XML-Datei der Aktivität angezeigt wird:

<Android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="155dp"
    Android:layout_height="230dp"
    Android:elevation="4dp"
    Android:translationZ="5dp"
    Android:clickable="true"
    Android:focusable="true"
    Android:focusableInTouchMode="true"
    Android:onClick="showNotices"
    Android:background="?android:attr/selectableItemBackground"
    Android:id="@+id/notices_card"
    card_view:cardCornerRadius="2dp">

</Android.support.v7.widget.CardView> 

Ich bin relativ neu in der Android-Entwicklung, daher habe ich vielleicht ein paar offensichtliche Fehler gemacht.
Danke im Voraus.

135
AkraticCritic

Sie sollten Folgendes zu CardView hinzufügen:

Android:foreground="?android:attr/selectableItemBackground"
Android:clickable="true"
441
Jaden Gu

Fügen Sie diese zwei Zeilen in Ihre XML-Ansicht ein, um einen Ripple-Effekt auf Ihre cardView zu erzielen.  

Android:clickable="true"
Android:foreground="?android:attr/selectableItemBackground"
24
Abdul Rizwan

Es ist mir gelungen, den Ripple-Effekt auf die Kartenansicht zu erhalten, indem:

<Android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.Android.com/apk/res-auto" 
    Android:clickable="true" 
    Android:foreground="@drawable/custom_bg"/>

und für das custom_bg, das Sie im obigen Code sehen können, müssen Sie eine XML-Datei für Lollipop (in drawable-v21-Paket) und pre-Lollipop (in drawable-Paket) -Geräten . für custom_bg in drawable-v21 definieren Der Code lautet:

<ripple 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?android:attr/colorControlHighlight">
<item
    Android:id="@Android:id/mask"
    Android:drawable="@Android:color/white"/>
</ripple>

für custom_bg im drawable-Paket lautet der Code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">

<item Android:state_pressed="true">
    <shape>
        <solid Android:color="@color/colorHighlight"></solid>
    </shape>
</item>
<item>
    <shape>
        <solid Android:color="@color/navigation_drawer_background"></solid>
    </shape>
</item>
</selector>

auf Pre-Lollipop-Geräten haben Sie also einen soliden Klick-Effekt und auf Lollipop-Geräten haben Sie einen Ripple-Effekt auf die Kartenansicht.

23
Rahul Ahuja

Der Ripple-Effekt wurde in der Appcompat-Unterstützungsbibliothek, die Sie verwenden, weggelassen. Wenn Sie die Welligkeit sehen möchten, verwenden Sie die Android L-Version und testen Sie sie auf einem Android L-Gerät. Auf der AppCompat v7-Site:

"Warum gibt es keine Ripples auf Pre-Lollipop? Was RippleDrawable reibungslos ausführen kann, ist das neue RenderThread von Android 5.0. Um die Leistung in früheren Versionen von Android zu optimieren, haben wir RippleDrawable zunächst außer Acht gelassen. "

Schauen Sie sich diesen Link an here für weitere Informationen

14
Developer Paul

Wenn die App minSdkVersion, an der Sie arbeiten, die Stufe 9 aufweist, können Sie Folgendes verwenden:

Android:foreground="?selectableItemBackground"
Android:clickable="true"

Stattdessen verwenden Sie ab Ebene 11:

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

Aus der Dokumentation:

clickable - Legt fest, ob diese Ansicht auf Klickereignisse reagiert. Muss ein boolescher Wert sein, entweder "true" oder "false".

Vordergrund - Definiert das Zeichen, das über den Inhalt gezeichnet werden soll. Dies kann als Überlagerung verwendet werden. Das zeichnbare Vordergrundobjekt nimmt an der Auffüllung des Inhalts teil, wenn die Schwerkraft auf "Füllung" eingestellt ist.

Das Hinzufügen der foreground zu CardView hat für mich nicht funktioniert (Grund unbekannt: /)

Der Trick war, das gleiche zu seinem untergeordneten Layout hinzuzufügen.

CODE:

<Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/card_view"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center"
    Android:focusable="true"
    Android:clickable="true"
    card_view:cardCornerRadius="@dimen/card_corner_radius"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        Android:id="@+id/card_item"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:foreground="?android:attr/selectableItemBackground"
        Android:padding="@dimen/card_padding">

    </LinearLayout>
</Android.support.v7.widget.CardView>
3
Prabs

Wenn es ein Stammlayout wie RelativeLayout oder LinearLayout gibt, das alle Komponenten des Adapterelements in CardView enthält, müssen Sie das Hintergrundattribut in diesem Stammlayout festlegen. mögen:

<Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:card_view="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="122dp"
Android:layout_marginBottom="6dp"
Android:layout_marginLeft="6dp"
Android:layout_marginRight="6dp"
card_view:cardCornerRadius="4dp">

<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@drawable/touch_bg"/>
</Android.support.v7.widget.CardView>
2
Robert Lee

Ripple Event für Android Cardview Steuerung:

<Android.support.v7.widget.CardView
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="center"
    Android:foreground="?android:attr/selectableItemBackground"
    Android:clickable="true"
    Android:layout_marginBottom="4dp"
    Android:layout_marginTop="4dp" />
2
chavantr

Ich war mit AppCompat nicht zufrieden, also schrieb ich mein eigenes CardView und portierte Wellen. Hier läuft es auf Galaxy S mit Lebkuchen, also ist es definitiv möglich.

Demo of Ripple on Galaxy S

Für weitere Details überprüfen Sie den Quellcode .

1
Zielony

Fügen Sie diese beiden Code-Funktionen wie einen Zauber für jede Ansicht hinzu, wie Button, Linear Layout oder CardView.

Android:foreground="?android:attr/selectableItemBackground"
Android:clickable="true"
1
Hitesh Kushwah

Für diejenigen, die nach einer Lösung für das Problem des Ripple-Effekts suchen, die nicht in einer programmgesteuert erstellten CardView (oder in meinem Fall in der benutzerdefinierten Ansicht, die CardView erweitert) in einer RecyclerView angezeigt wird, funktionierten die folgenden Bedingungen für mich. Die deklarative Deklaration der in den anderen Antworten erwähnten XML-Attribute in der XML-Layoutdatei scheint grundsätzlich nicht für eine programmgesteuert erstellte CardView zu funktionieren oder aus einem benutzerdefinierten Layout erstellt zu werden (selbst wenn die Root-Ansicht CardView oder das Merge-Element ist) Sie müssen programmgesteuert gesetzt werden:

private class MadeUpCardViewHolder extends RecyclerView.ViewHolder {
    private MadeUpCardView cardView;

    public MadeUpCardViewHolder(View v){
        super(v);

        this.cardView = (MadeUpCardView)v;

        // Declaring in XML Layout doesn't seem to work in RecyclerViews
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            int[] attrs = new int[]{R.attr.selectableItemBackground};
            TypedArray typedArray = context.obtainStyledAttributes(attrs);
            int selectableItemBackground = typedArray.getResourceId(0, 0);
            typedArray.recycle();

            this.cardView.setForeground(context.getDrawable(selectableItemBackground));
            this.cardView.setClickable(true);
        }
    }
}

Wo MadeupCardView extends CardView Kudos an diese Antwort für den TypedArray-Teil.

0
Breeno
  Android:foreground="?android:attr/selectableItemBackgroundBorderless"
   Android:clickable="true"
   Android:focusable="true"

Funktioniert nur api 21 und verwenden Sie diese Listenreihenkartenansicht nicht

0
Tarun Umath

Fügen Sie Ihrer XML Folgendes hinzu:

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

Und fügen Sie Ihrem Adapter hinzu (wenn es Ihr Fall ist)

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            val attrs = intArrayOf(R.attr.selectableItemBackground)
            val typedArray = holder.itemView.context.obtainStyledAttributes(attrs)
            val selectableItemBackground = typedArray.getResourceId(0, 0)
            typedArray.recycle()

            holder.itemView.isClickable = true
            holder.itemView.isFocusable = true
            holder.itemView.foreground = holder.itemView.context.getDrawable(selectableItemBackground)
        }
    }
0
Mateus Melo