Changer la couleur d'arrière-plan de CardView par programmation


130

Le CardView a un attribut card_view:cardBackgroundColorpour définir la couleur d'arrière-plan. Cet attribut fonctionne très bien.

En même temps, il n'y a pas de méthode pour changer la couleur de manière dynamique.

Je viens d'essayer des solutions comme:

mCardView.setBackgroundColor(...);

ou en utilisant une mise en page à l'intérieur de cardView

   <android.support.v7.widget.CardView>
        <LinearLayout
            android:id="@+id/inside_layout">
    </android.support.v7.widget.CardView>  

 View insideLayout = mCardView.findViewById(R.id.inside_layout);
 cardLayout.setBackgroundColor(XXXX);

Ces solutions ne fonctionnent pas car la carte possède un cardCornerRadius.

Réponses:


266

Ce que vous recherchez est:

CardView card = ...
card.setCardBackgroundColor(color);

En XML

 card_view:cardBackgroundColor="@android:color/white"

Mise à jour: en XML

app:cardBackgroundColor="@android:color/white"

7
Cela semble être une nouvelle méthode de support lib. Je ne l'ai pas vu le mois dernier, c'est peut-être une mise à jour
Gabriele Mariotti

5
Je voudrais peut-être ajouter que la façon de configurer cela en XML estcard_view:cardBackgroundColor="@android:color/white"
Mavamaarten

3
L'utilisation de l' card_viewespace de noms ne fonctionne pas pour moi, je dois l'utiliser à la appplace.
rsicarelli

1
@rsicarelli Tout dépend de votre nom: xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto"
Bryan Bryce

1
Comment puis-je définir Gradient Drawable sur l'arrière-plan de la carte par programmation?
Ghodasara Bhaumik

115

Utilisez la propriété card_view: cardBackgroundColor:

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="fill_parent"
    android:layout_height="150dp"
    android:layout_gravity="center"
    card_view:cardCornerRadius="4dp"
    android:layout_margin="10dp"
    card_view:cardBackgroundColor="#fff"
    >

Le PO nous a parlé de cette propriété dans la première ligne de sa question, il a dit qu'il voulait y parvenir «de façon dynamique».
stramin

25

Vous pouvez l'utiliser en XML

card_view:cardBackgroundColor="@android:color/white"

ou ceci en Java

cardView.setCardBackgroundColor(Color.WHITE);

19

J'ai utilisé ce code pour définir par programme:

card.setCardBackgroundColor(color);

Ou en XML, vous pouvez utiliser ce code:

card_view:cardBackgroundColor="@android:color/white"

Cette réponse est plus utile car elle contient les félicitations statiques (XML) et programmatiques (JAVA).
chntgomez

9

La façon dont il est défini dans la initializeméthode utilise la RoundRectDrawableclasse protégée , comme ceci:

RoundRectDrawable backgroundDrawable = new RoundRectDrawable(backgroundColor, cardView.getRadius());
cardView.setBackgroundDrawable(backgroundDrawable);

Ce n'est pas joli, mais vous pouvez étendre cette classe. Quelque chose comme:

package android.support.v7.widget;

public class MyRoundRectDrawable extends RoundRectDrawable {

    public MyRoundRectDrawable(int backgroundColor, float radius) {
        super(backgroundColor, radius);
    }

}

puis:

final MyRoundRectDrawable backgroundDrawable = new MyRoundRectDrawable(bgColor,
            mCardView.getRadius());
mCardView.setBackgroundDrawable(backgroundDrawable);

ÉDITER

Cela ne vous donnera pas l'ombre sur <API 21, vous devrez donc faire de même avec RoundRectDrawableWithShadow.

Il ne semble pas y avoir de meilleure façon de procéder.


2
+1 pour le piratage et je suis d'accord. Je ne trouve pas de meilleure solution. Quoi qu'il en soit, j'espère en quelque chose de différent dans l'API officielle.
Gabriele Mariotti

Cette classe (RoundRectDrawableWithShadow ou RoundRectDrawable) est-elle accessible? Je ne pense pas
Napoléon

8

Un peu tard ici et partiellement hors sujet car ce n'est pas par programme, mais je trouve qu'il est préférable de configurer des styles pour les widgets et vous pouvez le faire pour CardViewcréer simplement un style, il gardera votre xml plus propre ...

<style name="MyCardViewStyle" parent="CardView">
    <!-- Card background color -->
    <item name="cardBackgroundColor">@android:color/white</item>
    <!-- Ripple for API 21 of android, and regular selector on older -->
    <item name="android:foreground">?android:selectableItemBackground</item>
    <!-- Resting Elevation from Material guidelines -->
    <item name="cardElevation">2dp</item>
    <!-- Add corner Radius -->
    <item name="cardCornerRadius">2dp</item>
    <item name="android:clickable">true</item>
    <item name="android:layout_margin">8dp</item>
</style>

c'est en utilisant android.support.v7.widget.CardView

puis définissez le style dans le fichier de mise en page:

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v7.widget.CardView
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     style="@style/MyCardViewStyle">
    <!-- Other fields-->
 </android.support.v7.widget.CardView>

vous devez importer la bibliothèque appcompat-v7 à l'aide du studio Android via gradle:

 dependencies {
     compile 'com.android.support:appcompat-v7:22.2.0'
 }

J'espère que cela t'aides. bon codage


1
Merci d'avoir souligné le style XML. Toujours aux prises avec ça. N'y a-t-il pas un moyen de définir le style dans themes.xml? Ensuite, vous n'auriez pas à définir le style de chaque CardView.
Wirling

C'est assez génial - j'avais du mal à essayer de comprendre comment propager les sélecteurs à travers la mise en page - et cela ne fonctionnait PAS avant API21. L'ondulation fonctionnait bien après API21 - mais votre approche par thème était la première fois que je parvenais à obtenir le CardView pour donner le bon look en cliquant sur le contenu.
Jim Andreas

Le PO nous a parlé de cette propriété dans la première ligne de sa question, il a dit qu'il voulait y parvenir «de façon dynamique».
stramin

7

J'avais un problème similaire avec le formatage de CardViews dans un recylerView.

J'ai fait fonctionner cette solution simple, je ne sais pas si c'est la meilleure solution, mais cela a fonctionné pour moi.

mv_cardView.getBackground().setTint(Color.BLUE)

Il récupère le fond Drawable de cardView et le teint.



3

Dans JAVA

cardView.setCardBackgroundColor(0xFFFEFEFE);

Android utilise les couleurs ARGB. vous pouvez utiliser comme ceci (0xFF + COULEUR RVB) - Couleur codée en dur.


2

Je suis tombé sur le même problème en essayant de créer une vue de carte par programme, ce qui est étrange, c'est que de regarder la doc https://developer.android.com/reference/android/support/v7/widget/CardView.html#setCardBackgroundColor%28int % 29 , les gars de Google ont rendu public l'API pour changer la couleur d'arrière-plan d'une vue de carte mais étrangement je n'ai pas réussi à y avoir accès dans la bibliothèque de support, alors voici ce qui a fonctionné pour moi:

CardViewBuilder.java

    mBaseLayout = new FrameLayout(context);
    // FrameLayout Params
    FrameLayout.LayoutParams baseLayoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    mBaseLayout.setLayoutParams(baseLayoutParams);

    // Create the card view.
    mCardview = new CardView(context);
    mCardview.setCardElevation(4f);
    mCardview.setRadius(8f);
    mCardview.setPreventCornerOverlap(true); // The default value for that attribute is by default TRUE, but i reset it to true to make it clear for you guys
    CardView.LayoutParams cardLayoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT);
    cardLayoutParams.setMargins(12, 0, 12, 0);
    mCardview.setLayoutParams(cardLayoutParams);
    // Add the card view to the BaseLayout
    mBaseLayout.addView(mCardview);

    // Create a child view for the cardView that match it's parent size both vertically and horizontally
    // Here i create a horizontal linearlayout, you can instantiate the view of your choice
    mFilterContainer = new LinearLayout(context);
    mFilterContainer.setOrientation(LinearLayout.HORIZONTAL);
    mFilterContainer.setPadding(8, 8, 8, 8);
    mFilterContainer.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER));

    // And here is the magic to get everything working
    // I create a background drawable for this view that have the required background color
    // and match the rounded radius of the cardview to have it fit in.
    mFilterContainer.setBackgroundResource(R.drawable.filter_container_background);

    // Add the horizontal linearlayout to the cardview.
    mCardview.addView(mFilterContainer);

filter_container_background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="8dp"/>
<solid android:color="@android:color/white"/>

En faisant cela, je réussis à garder l'ombre de la vue de la carte et les coins arrondis.


Vous ajoutez un LL dans votre vue de carte de cette manière et bien sûr vous pouvez le faire, mais cela ne répond pas à la question d'origine.
Gabriele Mariotti

La demande concernait le changement dynamique de la couleur d'arrière-plan de la carte, et je pense que cette méthode le fait assez simplement en changeant la couleur d'arrière-plan de la disposition intérieure. Ou est-ce que je manque quelque chose.
Martial Konvi

2

J'ai le même problème sur Xamarin.Android - VS (2017)

le solution qui a fonctionné pour moi:

SOLUTION

Dans votre fichier XML, ajoutez:

 xmlns:card_view="http://schemas.android.com/apk/res-auto"

et dans votre android.support.v7.widget.CardViewélément ajoutez cette propriété:

card_view:cardBackgroundColor="#ffb4b4"

(c'est à dire)

<android.support.v7.widget.CardView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_margin="12dp"
    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="1dp"
    card_view:cardPreventCornerOverlap="false"
    card_view:cardBackgroundColor="#ffb4b4" />

Vous pouvez également ajouter cardElevation et cardElevation.

Si vous souhaitez modifier le par cardview programme, il vous suffit d'utiliser ce code: For (C #)

    cvBianca = FindViewById<Android.Support.V7.Widget.CardView>(Resource.Id.cv_bianca);
    cvBianca.Elevation = 14;
    cvBianca.Radius = 14;
    cvBianca.PreventCornerOverlap = true;
    cvBianca.SetCardBackgroundColor(Color.Red);

Et maintenant, vous pouvez changer la couleur d'arrière-plan par programme sans perte de bordure, de rayon d'angle et d'élévation.



1

C'est très simple dans kotlin. Utilisez ColorStateList pour changer la couleur de la vue de la carte

   var color = R.color.green;
   cardView.setCardBackgroundColor(context.colorList(color));

Une extension kotlin de ColorStateList:

fun Context.colorList(id: Int): ColorStateList {
    return ColorStateList.valueOf(ContextCompat.getColor(this, color))
}

1

Le moyen le plus simple pour moi est celui-ci (Kotlin)

card_item.backgroundTintList = ColorStateList.valueOf(Color.parseColor("#fc4041"))

0

Cardviewest un peu timide. J'avais une liste de couleurs dans ma structure et le modèle est comme

class ModelColor : Serializable {

var id: Int? = 0
var title: String? = ""
var color: Int? = 0// HERE IS THE COLOR FIELD WE WILL USE

constructor(id: Int?, title: String?, color: Int?) {
    this.id = id
    this.title = title
    this.color = color
}

}

charger le modèle avec la couleur, dernier élément sur la construction prenant de R.color

 list.add(ModelColor(2, getString(R.string.orange), R.color.orange_500))

et enfin, vous pouvez définirBackgrıundResource

 cv_add_goal_choose_color.setBackgroundResource(color)

0

J'ai finalement eu les coins pour rester. C'est c #, Xamarin.Android

dans ViewHolder:

CardView = itemView.FindViewById<CardView>(Resource.Id.cdvTaskList);

Dans l'adaptateur:

vh.CardView.SetCardBackgroundColor(Color.ParseColor("#4dd0e1"));

0

Dans Kotlin, j'ai pu changer la couleur de fond comme ceci:

var card: CardView = itemView.findViewById(com.mullr.neurd.R.id.learn_def_card)
card.setCardBackgroundColor(ContextCompat.getColor(main,R.color.selected))

Ensuite, si vous souhaitez supprimer la couleur, vous pouvez le faire:

card.setCardBackgroundColor(Color.TRANSPARENT)

En utilisant cette méthode, j'ai pu créer une animation de sélection.
https://gfycat.com/equalcarefreekitten


-1

essayez cela fonctionne facilement

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    card_view:cardBackgroundColor="#fff"
    card_view:cardCornerRadius="9dp"
    card_view:cardElevation="4dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="10dp"
    android:paddingBottom="10dp">

Le PO nous parle de cette propriété dans la première ligne de sa question, il a dit qu'il voulait y parvenir par programme / dinamique.
stramin
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.