Alterar a cor de plano de fundo do CardView programaticamente


130

O CardView possui um atributo card_view:cardBackgroundColorpara definir a cor do plano de fundo. Este atributo funciona bem.

Ao mesmo tempo, não há um método para alterar a cor dinamicamente.

Eu apenas tentei soluções como:

mCardView.setBackgroundColor(...);

ou usando um Layout dentro do 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);

Essas soluções não funcionam porque o cartão possui um cardCornerRadius.

Respostas:


266

O que você está procurando é:

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

Em XML

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

Atualização: em XML

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

7
Parece um novo método no suporte à lib. Eu não vê-lo no último mês, pode ser que é uma atualização
Gabriele Mariotti

5
Pode querer acrescentar que a maneira de configurar isso em XML écard_view:cardBackgroundColor="@android:color/white"
Mavamaarten

3
Usar o card_viewnamespace não funciona para mim, eu tenho que usá-lo app.
rsicarelli

1
@rsicarelli Tudo depende do que o nome dele:xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto"
Bryan Bryce

1
Como posso definir o Gradient Drawable como plano de fundo do cartão programaticamente?
Ghodasara Bhaumik

115

Use a propriedade 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"
    >

O OP nos fala sobre essa propriedade na primeira linha de sua pergunta, ele disse que deseja alcançá-la "dinamicamente".
Stramin 28/05/19

25

Você pode usar isso em XML

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

ou isso em Java

cardView.setCardBackgroundColor(Color.WHITE);

19

Eu usei esse código para definir programaticamente:

card.setCardBackgroundColor(color);

Ou no XML você pode usar este código:

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

Esta resposta é mais útil porque contém os kudos estático (XML) e o modo programático (JAVA).
Chntgomez 22/03/16

9

A maneira como é definida no initializemétodo usa a RoundRectDrawableclasse protegida , assim:

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

Não é bonito, mas você pode estender essa classe. Algo como:

package android.support.v7.widget;

public class MyRoundRectDrawable extends RoundRectDrawable {

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

}

então:

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

EDITAR

Isso não dará a você a sombra da <API 21, então você terá que fazer o mesmo RoundRectDrawableWithShadow.

Não parece haver uma maneira melhor de fazer isso.


2
+1 para hackers e eu concordo. Não consigo encontrar uma solução melhor. Enfim, espero que algo diferente na API oficial.
Gabriele Mariotti 25/10

Esta classe (RoundRectDrawableWithShadow ou RoundRectDrawable) está acessível? Acho que não
Napolean

8

Um pouco atrasado aqui e parcialmente fora de tópico, pois isso não é programaticamente, mas acho melhor configurar estilos para Widgets e você pode fazer isso CardViewapenas criando um estilo para manter seu xml mais limpo ...

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

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

e, em seguida, definindo o estilo no arquivo de layout:

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

você precisa importar a biblioteca appcompat-v7 usando o Android studio via gradle:

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

espero que isto ajude. codificação feliz


1
Obrigado por apontar o estilo XML. Sempre lutando com isso. Não existe uma maneira de definir o estilo em themes.xml? Então você não precisaria definir o estilo para cada CardView.
Agitando

Isso é incrível - eu estava lutando para descobrir como propagar os seletores pelo layout - e isso NÃO estava funcionando antes da API21. A ondulação estava funcionando bem após a API21, mas sua abordagem de tema foi a primeira vez que consegui obter o CardView para dar a aparência certa ao clicar no conteúdo.
21816 Jim Andreas

O OP nos fala sobre essa propriedade na primeira linha de sua pergunta, ele disse que deseja alcançá-la "dinamicamente".
Stramin 28/05/19

7

Eu estava tendo um problema semelhante ao formatar o CardViews em um recylerView.

Consegui essa solução simples funcionando, não tenho certeza se é a melhor solução, mas funcionou para mim.

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

Obtém o fundo Drawable do cardView e o tinge.



3

Em JAVA

cardView.setCardBackgroundColor(0xFFFEFEFE);

Android usa cores ARGB. você pode usar assim (0xFF + RGB COLOR) - Cor codificada.


2

Me deparei com o mesmo problema ao tentar criar uma visualização de cartão programaticamente, o estranho é que, olhando para o documento https://developer.android.com/reference/android/support/v7/widget/CardView.html#setCardBackgroundColor%28int % 29 , os caras do Google tornaram pública a API para alterar a cor de plano de fundo de uma exibição de cartão, mas estranhamente eu não consegui ter acesso a ela na biblioteca de suporte, então aqui está o que funcionou para mim:

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

Fazendo isso, consigo manter a sombra do cardview e os cantos arredondados.


Você está adicionando um LL no seu cardview dessa maneira e, é claro, pode fazê-lo, mas ele não responde à pergunta original.
Gabriele Mariotti 27/11

O pedido era sobre mudar a cor de fundo do cartão dinamicamente, e acho que esse método faz isso simplesmente alterando a cor de fundo do layout interno. Ou eu estou esquecendo de alguma coisa.
Martial Konvi

2

Eu tenho o mesmo problema no Xamarin.Android - VS (2017)

A solução que funcionou para mim:

SOLUÇÃO

No seu arquivo XML, adicione:

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

e no seu android.support.v7.widget.CardViewelemento, adicione esta propriedade:

card_view:cardBackgroundColor="#ffb4b4"

(ie)

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

Você também pode adicionar cardElevatione cardElevation.

Se você deseja editar a cardview programação, basta 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);

E agora você pode alterar a cor do plano de fundo de forma programática, sem perda de borda, raio do canto e elevação.



1

É muito simples no kotlin. Use ColorStateList para alterar a cor da exibição do cartão

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

Uma extensão kotlin do ColorStateList:

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

1

A maneira mais simples para mim é essa (Kotlin)

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

0

Cardviewé um pouco tímido. Eu tinha uma lista de cores na minha estrutura e o modelo é 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
}

}

carregue o modelo com cor, último item da estrutura retirando R.color

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

e, finalmente, você pode definirBackgrıundResource

 cv_add_goal_choose_color.setBackgroundResource(color)

0

Eu finalmente consegui os cantos para ficar. Este é o c #, Xamarin.Android

no ViewHolder:

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

No adaptador:

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

0

No Kotlin, pude alterar a cor do plano de fundo da seguinte maneira:

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

Então, se você deseja remover a cor, pode fazer o seguinte:

card.setCardBackgroundColor(Color.TRANSPARENT)

Usando esse método, eu consegui criar uma animação de seleção.
https://gfycat.com/equalcarefreekitten


-1

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

O OP nos fala sobre essa propriedade na primeira linha de sua pergunta, ele disse que deseja alcançá-la programaticamente / dinamicamente.
Stramin 28/05/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.