web-dev-qa-db-fra.com

Effet d'ondulation sur Android Lollipop CardView

J'essaie d'obtenir un CardView pour afficher l'effet d'entraînement lorsque vous définissez l'attribut Android: backgound dans le fichier XML d'activité comme décrit ici sur la page des développeurs Android, mais cela ne fonctionne pas. Aucune animation du tout, mais la méthode de onClick est appelée. J'ai également essayé de créer un fichier ripple.xml comme suggéré ici , mais le même résultat.

Le CardView tel qu'il apparaît dans le fichier XML de l'activité:

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

Je suis relativement nouveau dans le développement Android, alors j'ai peut-être commis quelques erreurs évidentes.
Merci d'avance.

androidandroid-layoutandroid-5.0-lollipopandroid-cardview
135
AkraticCritic

Vous devriez ajouter ce qui suit à CardView:

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

Ajoutez ces deux codes de ligne dans votre vue XML pour donner un effet d'entraînement sur votre cardView.  

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

J'ai réussi à obtenir l'effet d'entraînement sur la vue carte en:

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

et pour le custom_bg que vous voyez dans le code ci-dessus, vous devez définir un fichier xml pour les périphériques Lollipop (dans le paquet drawable-v21) et pré-Lollipop (dans le paquet drawable) . pour custom_bg dans le paquet drawable-v21 le code est:

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

pour custom_bg dans le package pouvant être dessiné, le code est:

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

ainsi, sur les appareils pré-Lollipop, vous aurez un effet de clic solide et sur les appareils Lollipop, vous aurez un effet d'entraînement sur la vue carte.

23
Rahul Ahuja

L'effet d'entraînement a été omis dans la bibliothèque de support appcompat que vous utilisez. Si vous souhaitez voir l’ondulation, utilisez la version Android L et testez-la sur un appareil Android L. Par le site AppCompat v7:

"Pourquoi n'y a-t-il aucune ondulation sur les pré-Lollipop? Le nouveau RenderThread d'Android 5.0 est ce qui permet à RippleDrawable de fonctionner en douceur. Pour optimiser les performances sur les versions précédentes d'Android, RippleDrawable est sorti. "

Consultez ce lien ici pour plus d'informations

14
Developer Paul

Si l'application minSdkVersion sur laquelle vous travaillez est de niveau 9, vous pouvez utiliser:

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

Au lieu de cela, à partir du niveau 11, vous utilisez:

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

De la documentation:

clickable - Définit si cette vue réagit aux événements de clic. Doit être une valeur booléenne, "true" ou "false".

foreground - Définit ce qui peut être dessiné sur le contenu. Cela peut être utilisé comme une superposition. Le premier plan extractible participe au remplissage du contenu si la gravité est définie pour se remplir.

8
Filipe de Lima Brito

Pour moi, l'ajout de foreground à CardView n'a pas fonctionné (raison inconnue: /)

L'ajout de la même chose à sa mise en page enfant a fait l'affaire.

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

S'il existe une présentation racine telle que RelativeLayout ou LinearLayout contenant tout le composant de l'élément d'adaptateur dans CardView, vous devez définir l'attribut d'arrière-plan dans cette présentation racine. comme:

<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 pour Android Cardview control:

<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

Je n'étais pas satisfait d'AppCompat, j'ai donc écrit mon propre CardView et des ondulations en arrière-plan. Ici, il tourne sur Galaxy S avec Gingerbread, donc c’est tout à fait possible.

Demo of Ripple on Galaxy S

Pour plus de détails, consultez le code source .

1
Zielony

Ajoutez ces deux types de code qui fonctionnent comme un charme pour toute vue telle que Button, Linear Layout, ou CardView.

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

Pour ceux qui recherchent une solution au problème de l'effet d'entraînement ne fonctionnant pas sur un CardView créé par programme (ou dans mon cas, la vue personnalisée qui étend CardView) étant affichée dans un RecyclerView, les éléments suivants ont fonctionné pour moi. Fondamentalement, déclarer les attributs XML mentionnés dans les autres réponses de manière déclarative dans le fichier de présentation XML ne semble pas fonctionner pour un CardView créé par programme, ou créé à partir d'un modèle personnalisé (même si la vue racine est CardView ou qu'un élément de fusion est utilisé), ils doivent être définis par programme comme suit:

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);
        }
    }
}

Où MadeupCardView extends CardView Merci à cette réponse pour la partie TypedArray.

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

Ne fonctionne que sur api 21 et ne l'utilise pas avec la vue carte

0
Tarun Umath

Ajoutez ce qui suit à votre XML:

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

Et ajoutez à votre adaptateur (si c'est votre cas)

    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