Zmień programowo kolor tła CardView


130

CardView ma atrybut card_view:cardBackgroundColor, aby określić kolor tła. Ten atrybut działa dobrze.

Jednocześnie nie ma metody dynamicznej zmiany koloru.

Właśnie wypróbowałem rozwiązania takie jak:

mCardView.setBackgroundColor(...);

lub używając układu wewnątrz 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);

Te rozwiązania nie działają, ponieważ karta ma kartę cardCornerRadius.

Odpowiedzi:


266

To czego szukasz to:

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

W XML

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

Aktualizacja: w XML

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

7
Wydaje się, że jest to nowa metoda obsługi lib. Nie widziałem tego w zeszłym miesiącu, może to aktualizacja
Gabriele Mariotti

5
Chciałbym dodać, że sposobem konfiguracji tego w XML jestcard_view:cardBackgroundColor="@android:color/white"
Mavamaarten

3
Używanie card_viewprzestrzeni nazw nie działa dla mnie, muszę appzamiast tego użyć .
rsicarelli

1
@rsicarelli Wszystko zależy od tego, jak ją nazwiesz:xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto"
Bryan Bryce,

1
Jak programowo ustawić opcję Gradient Drawable na tło karty?
Ghodasara Bhaumik

115

Użyj właściwości 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"
    >

OP mówi nam o tej nieruchomości w pierwszej linijce swojego pytania, powiedział, że chce to osiągnąć „dynamicznie”.
stramin

25

Możesz użyć tego w XML

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

lub to w Javie

cardView.setCardBackgroundColor(Color.WHITE);

19

Użyłem tego kodu, aby ustawić programowo:

card.setCardBackgroundColor(color);

Lub w XML możesz użyć tego kodu:

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

Ta odpowiedź jest bardziej przydatna, ponieważ zawiera statyczny (XML) i programistyczny sposób (JAVA) Kudos.
chntgomez

9

Sposób, w jaki jest ustawiony w initializemetodzie, wykorzystuje chronioną RoundRectDrawableklasę, na przykład:

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

To nie jest ładne, ale możesz rozszerzyć tę klasę. Coś jak:

package android.support.v7.widget;

public class MyRoundRectDrawable extends RoundRectDrawable {

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

}

następnie:

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

EDYTOWAĆ

To nie da ci cienia na <API 21, więc musisz zrobić to samo z RoundRectDrawableWithShadow.

Wydaje się, że nie ma lepszego sposobu na zrobienie tego.


2
+1 za hakowanie i zgadzam się. Nie mogę znaleźć lepszego rozwiązania. W każdym razie mam nadzieję na coś innego w oficjalnym API.
Gabriele Mariotti

Czy ta klasa (RoundRectDrawableWithShadow lub RoundRectDrawable) jest dostępna? Nie sądzę
Napolean

8

Trochę późno tutaj i częściowo poza tematem, ponieważ nie jest to programowe, ale uważam, że najlepiej jest ustawić style dla widżetów i możesz to zrobić, aby po CardViewprostu stworzyć styl, który utrzyma twój XML czystszy ...

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

to używa android.support.v7.widget.CardView

a następnie ustawianie stylu w pliku układu:

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

musisz zaimportować bibliotekę appcompat-v7 używając Android Studio za pomocą gradle:

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

mam nadzieję że to pomoże. szczęśliwego kodowania


1
Dziękujemy za zwrócenie uwagi na styl XML. Zawsze z tym walczę. Czy nie ma sposobu na zdefiniowanie stylu w plikach themes.xml? Wtedy nie musiałbyś ustawiać stylu dla każdego CardView.
Wirling

To jest całkiem niesamowite - walczyłem z próbą wymyślenia, jak propagować selektory w układzie - i to NIE działało przed API21. Ripple działało dobrze po API21 - ale Twoje podejście do motywu było pierwszym razem, gdy udało mi się uzyskać CardView, aby nadać odpowiedni wygląd po kliknięciu zawartości.
Jim Andreas

OP mówi nam o tej nieruchomości w pierwszej linijce swojego pytania, powiedział, że chce to osiągnąć „dynamicznie”.
stramin

7

Miałem podobny problem z formatowaniem CardViews w recylerView.

Mam to proste rozwiązanie, które działa, nie jestem pewien, czy jest to najlepsze rozwiązanie, ale zadziałało.

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

Pobiera tło Drawable z cardView i nadaje mu kolor.



3

W JAVA

cardView.setCardBackgroundColor(0xFFFEFEFE);

Android używa kolorów ARGB. możesz użyć w ten sposób (0xFF + RGB COLOR) - kolor zakodowany na stałe.


2

Natknąłem się na ten sam problem, próbując programowo utworzyć widok karty, dziwne jest to, że patrząc na dokument https://developer.android.com/reference/android/support/v7/widget/CardView.html#setCardBackgroundColor%28int % 29 , faceci z Google upublicznili interfejs API, aby zmienić kolor tła widoku karty, ale o dziwo nie udało mi się uzyskać do niego dostępu w bibliotece pomocy technicznej, więc oto, co zadziałało dla mnie:

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

W ten sposób udaje mi się zachować cień karty i zaokrąglone rogi.


Dodajesz LL do swojego cardview w ten sposób i oczywiście możesz to zrobić, ale nie odpowiada to pierwotnemu pytaniu.
Gabriele Mariotti

Żądanie dotyczyło dynamicznej zmiany koloru tła karty i myślę, że ta metoda robi to po prostu poprzez zmianę koloru tła układu wewnętrznego. A może czegoś mi brakuje.
Martial Konvi

2

Mam ten sam problem na Xamarin.Android - VS (2017)

Rozwiązanie że pracował dla mnie:

ROZWIĄZANIE

W swoim pliku XML dodaj:

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

iw swoim android.support.v7.widget.CardViewżywiole dodaj tę właściwość:

card_view:cardBackgroundColor="#ffb4b4"

(to znaczy)

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

Możesz także dodać cardElevationi cardElevation.

Jeśli chcesz edytować cardview programowo , wystarczy użyć tego kodu: 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);

Teraz możesz programowo zmieniać kolor tła bez utraty obramowania, promienia narożnika i elewacji.



1

W kotlinie jest to bardzo proste. Użyj ColorStateList, aby zmienić kolor widoku karty

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

Rozszerzenie kotlin ColorStateList:

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

1

Najprostszym sposobem jest dla mnie ten (Kotlin)

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

0

Cardviewjest trochę nieśmiała. Miałem listę kolorów w mojej strukturze i model jest podobny

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
}

}

wczytaj model kolorem, z którego pobierana jest ostatnia pozycja na konstrukcji R.color

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

i na koniec możesz ustawićBackgrıundResource

 cv_add_goal_choose_color.setBackgroundResource(color)

0

W końcu udało mi się zatrzymać rogi. To jest C #, Xamarin.Android

w ViewHolder:

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

W adapterze:

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

0

W Kotlinie udało mi się zmienić kolor tła w następujący sposób:

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

Jeśli chcesz usunąć kolor, możesz to zrobić:

card.setCardBackgroundColor(Color.TRANSPARENT)

Dzięki tej metodzie mogłem stworzyć animację wyboru.
https://gfycat.com/equalcarefreekitten


-1

spróbuj, to działa łatwo

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

OP mówi nam o tej właściwości w pierwszym wierszu swojego pytania, powiedział, że chce to osiągnąć programowo / dynamicznie.
stramin
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.