Cambiar el color de fondo de CardView mediante programación


130

El CardView tiene un atributo card_view:cardBackgroundColorpara definir el color de fondo. Este atributo funciona bien.

Al mismo tiempo, no hay un método para cambiar el color dinámicamente.

Acabo de probar soluciones como:

mCardView.setBackgroundColor(...);

o usando un diseño dentro de la tarjeta

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

Estas soluciones no funcionan porque la tarjeta tiene cardCornerRadius.

Respuestas:


266

Lo que estás buscando es:

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

En XML

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

Actualización: en XML

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

77
Parece un nuevo método en support lib. No lo vi el último mes, puede ser una actualización
Gabriele Mariotti

55
Es posible que desee agregar que la forma de configurar esto en XML escard_view:cardBackgroundColor="@android:color/white"
Mavamaarten

3
Usar el card_viewespacio de nombres no funciona para mí, tengo que usarlo appen su lugar.
rsicarelli

1
@rsicarelli Todo depende de cómo lo llames:xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto"
Bryan Bryce

1
¿Cómo puedo configurar Gradient Drawable en el fondo de la tarjeta mediante programación?
Ghodasara Bhaumik

115

Utilice la propiedad 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"
    >

El OP nos cuenta sobre esa propiedad en la primera línea de su pregunta, dijo que quiere lograrlo "dinámicamente".
stramin

25

Puedes usar esto en XML

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

o esto en Java

cardView.setCardBackgroundColor(Color.WHITE);

19

Usé este código para configurar mediante programación:

card.setCardBackgroundColor(color);

O en XML puedes usar este código:

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

Esta respuesta es más útil porque contiene los Kudos estáticos (XML) y programáticos (JAVA).
chntgomez

9

La forma en que se establece en el initializemétodo usa la RoundRectDrawableclase protegida , así:

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

No es bonito, pero puedes extender esa clase. Algo como:

package android.support.v7.widget;

public class MyRoundRectDrawable extends RoundRectDrawable {

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

}

luego:

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

EDITAR

Esto no le dará la sombra en <API 21, por lo que tendría que hacer lo mismo con RoundRectDrawableWithShadow.

No parece haber una mejor manera de hacer esto.


2
+1 por piratería y estoy de acuerdo. No puedo encontrar una mejor solución. De todos modos espero algo diferente en la API oficial.
Gabriele Mariotti

¿Es accesible esta clase (RoundRectDrawableWithShadow o RoundRectDrawable)? No lo creo
Napolean

8

Un poco tarde aquí y parcialmente fuera de tema, ya que esto no es programáticamente, pero creo que es mejor configurar estilos para Widgets y puede hacerlo para CardViewcrear un estilo que mantenga su xml más limpio ...

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

esto está usando android.support.v7.widget.CardView

y luego configurando el estilo en el archivo de diseño:

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

necesita importar la biblioteca appcompat-v7 usando Android studio a través de gradle:

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

espero que esto ayude. codificación feliz


1
Gracias por señalar el estilo XML. Siempre luchando con eso. ¿No hay una manera de definir el estilo en themes.xml? Entonces no tendría que establecer el estilo para cada CardView.
Wirling el

Eso es bastante sorprendente: estaba luchando por tratar de descubrir cómo propagar los selectores a través del diseño, y esto NO estaba funcionando antes de API21. La onda funcionaba bien después de API21, pero su enfoque de tema fue la primera vez que logré obtener el CardView para dar la apariencia correcta al hacer clic en los contenidos.
Jim Andreas

El OP nos cuenta sobre esa propiedad en la primera línea de su pregunta, dijo que quiere lograrlo "dinámicamente".
stramin

7

Estaba teniendo un problema similar al formatear CardViews en un recylerView.

Obtuve esta solución simple, no estoy seguro de si es la mejor solución, pero funcionó para mí.

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

Obtiene el fondo Dibujable de cardView y lo tiñe.



3

En java

cardView.setCardBackgroundColor(0xFFFEFEFE);

Android usa colores ARGB. puede usar así (0xFF + COLOR RGB) - Color codificado.


2

Me encontré con el mismo problema al intentar crear una vista de tarjeta mediante programación, lo que es extraño es que al mirar el documento https://developer.android.com/reference/android/support/v7/widget/CardView.html#setCardBackgroundColor%28int % 29 , los chicos de Google hicieron pública la API para cambiar el color de fondo de una vista de tarjeta, pero extrañamente no logré tener acceso a ella en la biblioteca de soporte, así que esto es lo que funcionó para mí:

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

Al hacerlo, logré mantener la sombra de la vista de tarjeta y las esquinas redondeadas.


Está agregando un LL en su vista de tarjeta de esta manera y, por supuesto, puede hacerlo, pero no responde la pregunta original.
Gabriele Mariotti

La solicitud fue sobre cambiar dinámicamente el color de fondo de la tarjeta, y creo que este método lo hace bastante simplemente cambiando el color de fondo del diseño interno. O me estoy perdiendo algo.
Martial Konvi

2

Tengo el mismo problema en Xamarin.Android - VS (2017)

La solución que funcionó para mí:

SOLUCIÓN

En su archivo XML agregue:

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

y en su android.support.v7.widget.CardViewelemento agregue esta propiedad:

card_view:cardBackgroundColor="#ffb4b4"

(es decir)

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

También puedes agregar cardElevationy cardElevation.

Si desea editar la cardview programación solo necesita usar este código: Para (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);

Y ahora puede cambiar el color de fondo mediante programación sin pérdida de borde, radio de esquina y elevación.



1

Es muy simple en kotlin. Use ColorStateList para cambiar el color de la vista de la tarjeta

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

Una extensión de Kotlin de ColorStateList:

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

1

La forma más simple para mí es esta (Kotlin)

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

0

Cardviewes un poco tímido Tenía una lista de colores en mi estructura y el modelo es como

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
}

}

cargar el modelo con color, el último elemento en la estructura tomando de R.color

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

y finalmente puedes establecerBackgrıundResource

 cv_add_goal_choose_color.setBackgroundResource(color)

0

Finalmente conseguí las esquinas para quedarme. Este es C #, Xamarin.Android

en ViewHolder:

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

En adaptador:

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

0

En Kotlin, pude cambiar el color de fondo de esta manera:

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

Luego, si desea eliminar el color, puede hacer esto:

card.setCardBackgroundColor(Color.TRANSPARENT)

Usando este método pude crear una animación de selección.
https://gfycat.com/equalcarefreekitten


-1

pruébalo funciona fácil

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

El OP nos cuenta sobre esa propiedad en la primera línea de su pregunta, dijo que quiere lograrla programáticamente / dinámicamente.
stramin
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.