Ubah warna latar belakang CardView secara terprogram


130

The CardView memiliki atribut card_view:cardBackgroundColoruntuk menentukan warna latar belakang. Atribut ini berfungsi dengan baik.

Pada saat yang sama tidak ada metode untuk mengubah warna secara dinamis.

Saya baru saja mencoba solusi seperti:

mCardView.setBackgroundColor(...);

atau menggunakan Layout di dalam 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);

Solusi ini tidak berfungsi karena kartu memiliki cardCornerRadius.

Jawaban:


266

Apa yang Anda cari adalah:

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

Dalam XML

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

Perbarui: dalam XML

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

7
Tampaknya metode baru dalam mendukung lib. Saya tidak melihatnya bulan lalu, mungkin itu adalah pembaruan
Gabriele Mariotti

5
Mungkin ingin menambahkan bahwa cara untuk mengonfigurasi ini dalam XML adalahcard_view:cardBackgroundColor="@android:color/white"
Mavamaarten

3
Menggunakan card_viewnamespace tidak berfungsi untuk saya, saya harus menggunakannya appsebagai gantinya.
rsicarelli

1
@rsicarelli Semua tergantung pada apa yang Anda sebutkan:xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto"
Bryan Bryce

1
Bagaimana cara mengatur Gradient Drawable ke latar belakang kartu secara terprogram?
Ghodasara Bhaumik

115

Gunakan properti 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 memberi tahu kami tentang properti itu di baris pertama pertanyaannya, dia mengatakan dia ingin mencapainya "secara dinamik".
stramin

25

Anda dapat menggunakan ini dalam XML

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

atau ini di Jawa

cardView.setCardBackgroundColor(Color.WHITE);

19

Saya menggunakan kode ini untuk mengatur secara program:

card.setCardBackgroundColor(color);

Atau dalam XML, Anda dapat menggunakan kode ini:

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

Jawaban ini lebih berguna karena berisi Kudos statis (XML) dan cara terprogram (JAVA).
chntgomez

9

Cara itu diatur dalam initializemetode menggunakan RoundRectDrawablekelas yang dilindungi , seperti:

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

Itu tidak cantik, tetapi Anda bisa memperpanjang kelas itu. Sesuatu seperti:

package android.support.v7.widget;

public class MyRoundRectDrawable extends RoundRectDrawable {

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

}

kemudian:

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

EDIT

Ini tidak akan memberi Anda bayangan di <API 21, jadi Anda harus melakukan hal yang sama dengannya RoundRectDrawableWithShadow.

Tampaknya tidak ada cara yang lebih baik untuk melakukan ini.


2
+1 untuk peretasan dan saya setuju. Saya tidak dapat menemukan solusi yang lebih baik. Pokoknya saya berharap sesuatu yang berbeda di API resmi.
Gabriele Mariotti

Apakah kelas ini (RoundRectDrawableWithShadow atau RoundRectDrawable) dapat diakses? Kurasa tidak
Napolean

8

Sedikit terlambat di sini & sebagian dari topik karena ini tidak terprogram tetapi saya merasa lebih baik untuk menyiapkan gaya untuk Widget dan Anda dapat melakukan ini CardViewhanya untuk membuat gaya itu akan menjaga xml cleaner Anda ...

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

ini menggunakan android.support.v7.widget.CardView

dan kemudian mengatur gaya dalam file tata letak:

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

Anda perlu mengimpor perpustakaan appcompat-v7 menggunakan Android studio via gradle:

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

semoga ini membantu. selamat coding


1
Terima kasih telah menunjukkan styling XML. Selalu berjuang dengan itu. Apakah tidak ada cara untuk mendefinisikan style di themes.xml? Maka Anda tidak perlu mengatur gaya untuk setiap CardView.
Wirling

Itu cukup luar biasa - Saya berjuang dengan mencoba mencari cara untuk menyebarkan pemilih melalui tata letak - dan ini TIDAK bekerja sebelum API21. Riaknya berfungsi dengan baik setelah API21- tetapi pendekatan tema Anda adalah pertama kalinya saya berhasil mendapatkan CardView untuk memberikan tampilan yang benar pada mengklik seluruh konten.
Jim Andreas

OP memberi tahu kami tentang properti itu di baris pertama pertanyaannya, dia mengatakan dia ingin mencapainya "secara dinamik".
stramin

7

Saya mengalami masalah serupa dengan memformat CardViews di recylerView.

Saya membuat solusi sederhana ini berfungsi, tidak yakin apakah itu solusi terbaik, tetapi itu berhasil untuk saya.

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

Itu mendapat latar belakang Drawable dari cardView dan mewarnai itu.



3

Di JAWA

cardView.setCardBackgroundColor(0xFFFEFEFE);

Android menggunakan warna ARGB. Anda dapat menggunakan seperti ini (0xFF + RGB COLOR) - Warna hard-coded.


2

Saya menemukan masalah yang sama ketika mencoba membuat cardview secara terprogram, yang aneh adalah bahwa melihat dokumen https://developer.android.com/reference/android/support/v7/widget/CardView.html#setCardBackgroundColor%28int % 29 , orang-orang Google mempublikasikan api untuk mengubah warna latar belakang tampilan kartu tetapi anehnya saya tidak berhasil mengaksesnya di perpustakaan dukungan, jadi inilah yang bekerja untuk saya:

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

Melakukan itu saya berhasil menjaga bayangan cardview dan sudut membulat.


Anda menambahkan LL dalam tampilan kartu Anda dengan cara ini dan tentu saja Anda bisa melakukannya, tetapi itu tidak menjawab pertanyaan aslinya.
Gabriele Mariotti

Permintaannya adalah tentang mengubah warna latar belakang kartu secara dinamis, dan saya pikir metode ini cukup melakukannya dengan mengubah warna latar belakang tata letak bagian dalam. Atau apakah saya melewatkan sesuatu.
Martial Konvi

2

Saya mendapatkan masalah yang sama pada Xamarin.Android - VS (2017)

The Solusi yang bekerja untuk saya:

LARUTAN

Dalam file XML Anda, tambahkan:

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

dan di android.support.v7.widget.CardViewelemen Anda tambahkan hak milik ini:

card_view:cardBackgroundColor="#ffb4b4"

(yaitu)

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

Anda juga dapat menambahkan cardElevationdan cardElevation.

Jika Anda ingin mengedit secara cardview terprogram Anda hanya perlu menggunakan kode ini: Untuk (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);

Dan sekarang Anda dapat mengubah warna latar belakang secara terprogram tanpa kehilangan batas, radius sudut, dan ketinggian.



1

Ini sangat sederhana di kotlin. Gunakan ColorStateList untuk mengubah warna tampilan kartu

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

Perpanjangan kotlin dari ColorStateList:

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

1

Cara termudah bagi saya adalah yang ini (Kotlin)

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

0

Cardviewsedikit malu-malu. Saya punya daftar warna dalam struktur saya dan Modelnya seperti

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
}

}

memuat model dengan warna, item terakhir pada konstruksi diambil dari R.color

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

dan akhirnya Anda dapat mengaturBackgrıundResource

 cv_add_goal_choose_color.setBackgroundResource(color)

0

Saya akhirnya punya sudut untuk tinggal. Ini adalah c #, Xamarin. Android

di ViewHolder:

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

Dalam Adaptor:

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

0

Di Kotlin, saya dapat mengubah warna latar belakang seperti ini:

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

Kemudian jika Anda ingin menghapus warna, Anda bisa melakukan ini:

card.setCardBackgroundColor(Color.TRANSPARENT)

Dengan menggunakan metode ini saya dapat membuat animasi pilihan.
https://gfycat.com/equalcarefreekitten


-1

coba ini bekerja dengan mudah

<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 memberi tahu kami tentang properti itu di baris pertama pertanyaannya, katanya ingin mencapainya secara terprogram / dinamis.
stramin
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.