เปลี่ยนสีพื้นหลังของ CardView โดยทางโปรแกรม


131

CardViewมีแอตทริบิวต์card_view:cardBackgroundColorการกำหนดสีพื้นหลัง แอตทริบิวต์นี้ใช้งานได้ดี

ในขณะเดียวกันก็ไม่มีวิธีการเปลี่ยนสีแบบไดนามิก

ฉันเพิ่งลองวิธีแก้ปัญหาเช่น:

mCardView.setBackgroundColor(...);

หรือใช้ Layout ภายใน 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);

โซลูชันเหล่านี้ใช้ไม่ได้เนื่องจากการ์ดมี cardCornerRadius

คำตอบ:


266

สิ่งที่คุณกำลังมองหาคือ:

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

ใน XML

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

อัปเดต: ใน XML

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

7
ดูเหมือนเป็นวิธีการใหม่ในการสนับสนุน lib ฉันไม่เห็นมันในเดือนที่แล้วอาจเป็นเพราะเป็นการอัปเดต
Gabriele Mariotti

5
อาจต้องการเพิ่มว่าวิธีกำหนดค่านี้ใน XML คือcard_view:cardBackgroundColor="@android:color/white"
Mavamaarten

3
การใช้card_viewเนมสเปซไม่ได้ผลสำหรับฉันฉันต้องใช้appแทน
rsicarelli

1
@rsicarelli ทั้งหมดขึ้นอยู่กับสิ่งที่คุณตั้ง:xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:card_view="http://schemas.android.com/apk/res-auto"
ไบรอันไบรซ์

1
ฉันจะตั้งค่า Gradient Drawable เป็นพื้นหลังการ์ดโดยทางโปรแกรมได้อย่างไร?
Ghodasara Bhaumik

115

ใช้คุณสมบัติ 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 บอกเราเกี่ยวกับอสังหาริมทรัพย์นั้นในบรรทัดแรกของคำถามของเขาเขาบอกว่าเขาต้องการที่จะบรรลุเป้าหมายนั้น "dinamically"
stramin

26

คุณสามารถใช้สิ่งนี้ใน XML

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

หรือสิ่งนี้ใน Java

cardView.setCardBackgroundColor(Color.WHITE);

19

ฉันใช้รหัสนี้เพื่อตั้งค่าโดยใช้โปรแกรม:

card.setCardBackgroundColor(color);

หรือใน XML คุณสามารถใช้รหัสนี้:

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

คำตอบนี้มีประโยชน์มากกว่าเนื่องจากมี Kudos แบบคงที่ (XML) และแบบทางโปรแกรม (JAVA)
chntgomez

9

วิธีการตั้งค่าในinitializeวิธีการใช้RoundRectDrawableคลาสที่ได้รับการป้องกันดังนี้:

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

มันไม่สวย แต่คุณสามารถขยายชั้นเรียนนั้นได้ สิ่งที่ต้องการ:

package android.support.v7.widget;

public class MyRoundRectDrawable extends RoundRectDrawable {

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

}

แล้ว:

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

แก้ไข

สิ่งนี้จะไม่ทำให้คุณเห็นเงาใน <API 21 ดังนั้นคุณต้องทำเช่นเดียวกันกับRoundRectDrawableWithShadow.

ดูเหมือนจะไม่มีวิธีที่ดีกว่าในการทำเช่นนี้


2
+1 สำหรับการแฮ็กและฉันเห็นด้วย ฉันไม่สามารถหาทางออกที่ดีกว่านี้ได้ อย่างไรก็ตามฉันหวังว่าจะมีสิ่งที่แตกต่างออกไปใน API อย่างเป็นทางการ
Gabriele Mariotti

คลาสนี้ (RoundRectDrawableWithShadow หรือ RoundRectDrawable) สามารถเข้าถึงได้หรือไม่ ฉันไม่คิดอย่างนั้น
นโปเลียน

8

สายเล็กน้อยที่นี่ & ปิดหัวข้อบางส่วนเนื่องจากนี่ไม่ใช่การเขียนโปรแกรม แต่ฉันคิดว่าดีที่สุดในการตั้งค่าสไตล์สำหรับวิดเจ็ตและคุณสามารถทำได้เพื่อCardViewสร้างสไตล์มันจะทำให้ xml ของคุณสะอาดขึ้น ...

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

นี่คือการใช้ android.support.v7.widget.CardView

จากนั้นตั้งค่าสไตล์ในไฟล์เลย์เอาต์:

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

คุณต้องนำเข้าไลบรารี appcompat-v7 โดยใช้ Android studio ผ่าน gradle:

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

หวังว่านี่จะช่วยได้ มีความสุขในการเข้ารหัส


1
ขอขอบคุณที่ชี้ให้เห็นรูปแบบ XML ดิ้นรนกับสิ่งนั้นเสมอ ไม่มีวิธีกำหนดสไตล์ใน themes.xml หรือไม่? จากนั้นคุณจะไม่ต้องตั้งค่าสไตล์สำหรับ CardView แต่ละอัน
Wirling

มันยอดเยี่ยมมาก - ฉันกำลังดิ้นรนกับการพยายามหาวิธีเผยแพร่ตัวเลือกผ่านเลย์เอาต์ - และสิ่งนี้ใช้ไม่ได้ก่อน API21 การกระเพื่อมทำงานได้ดีในการโพสต์ API21 แต่แนวทางของคุณเป็นครั้งแรกที่ฉันจัดการเพื่อรับ CardView เพื่อให้ดูถูกต้องเมื่อคลิกข้ามเนื้อหา
Jim Andreas

OP บอกเราเกี่ยวกับอสังหาริมทรัพย์นั้นในบรรทัดแรกของคำถามของเขาเขาบอกว่าเขาต้องการที่จะบรรลุเป้าหมายนั้น "dinamically"
stramin

7

ฉันมีปัญหาคล้ายกันกับการจัดรูปแบบ CardViews ใน recylerView

ฉันได้รับโซลูชันง่ายๆนี้ใช้งานได้ไม่แน่ใจว่าเป็นวิธีแก้ปัญหาที่ดีที่สุดหรือไม่ แต่ใช้ได้กับฉัน

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

ได้รับพื้นหลัง Drawable ของ cardView และแต้มสี



3

ในJAVA

cardView.setCardBackgroundColor(0xFFFEFEFE);

Android ใช้สี ARGB คุณสามารถใช้แบบนี้ (0xFF + RGB COLOR) - สีฮาร์ดโค้ด


2

ฉันเจอปัญหาเดียวกันในขณะที่พยายามสร้าง cardview โดยทางโปรแกรมสิ่งที่แปลกคือการดู doc https://developer.android.com/reference/android/support/v7/widget/CardView.html#setCardBackgroundColor%28int % 29พวก Google เปิดเผย API เพื่อเปลี่ยนสีพื้นหลังของมุมมองการ์ด แต่แปลกที่ฉันไม่ประสบความสำเร็จในการเข้าถึงมันในไลบรารีการสนับสนุนดังนั้นนี่คือสิ่งที่เหมาะกับฉัน:

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

การทำเช่นนั้นฉันประสบความสำเร็จในการรักษาเงามุมมองการ์ดและมุมมน


คุณกำลังเพิ่ม LL ในมุมมองบัตรของคุณด้วยวิธีนี้และแน่นอนคุณสามารถทำได้ แต่มันไม่ได้ตอบคำถามเดิม
Gabriele Mariotti

คำขอเกี่ยวกับการเปลี่ยนสีพื้นหลังการ์ดแบบไดนามิกและฉันคิดว่าวิธีนี้ทำได้ดีเพียงแค่เปลี่ยนสีพื้นหลังเลย์เอาต์ด้านใน หรือฉันขาดอะไรไป
Martial Konvi

2

ฉันมีปัญหาเดียวกันกับXamarin Android - VS (2017)

โซลูชั่นที่ทำงานสำหรับฉัน:

สารละลาย

ในไฟล์ XML ของคุณเพิ่ม:

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

และในandroid.support.v7.widget.CardViewองค์ประกอบของคุณ เพิ่มความเหมาะสมนี้:

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

นอกจากนี้คุณยังสามารถเพิ่มและcardElevationcardElevation

หากคุณต้องการแก้ไขทางcardview โปรแกรมคุณต้องใช้รหัสนี้: สำหรับ (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);

และตอนนี้คุณสามารถเปลี่ยนสีพื้นหลังโดยใช้โปรแกรมได้โดยไม่สูญเสียเส้นขอบรัศมีมุมและระดับความสูง



1

มันง่ายมากใน kotlin ใช้ ColorStateList เพื่อเปลี่ยนสีมุมมองการ์ด

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

ส่วนขยาย Kotlin ของ ColorStateList:

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

1

วิธีที่ง่ายที่สุดสำหรับฉันคือวิธีนี้ (Kotlin)

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

0

Cardviewค่อนข้างขี้อาย ฉันมีรายการสีในโครงสร้างของฉันและ Model ก็เป็นเช่นนั้น

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
}

}

โหลดโมเดลด้วยสีรายการสุดท้ายบนโครงสร้างที่ใช้จาก R.color

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

และสุดท้ายคุณสามารถsetBackgrıundResource

 cv_add_goal_choose_color.setBackgroundResource(color)

0

ในที่สุดฉันก็จนมุมแล้ว นี่คือ c #, Xamarin.Android

ใน ViewHolder:

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

ในอะแดปเตอร์:

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

0

ใน Kotlin ฉันสามารถเปลี่ยนสีพื้นหลังได้ดังนี้:

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

จากนั้นหากคุณต้องการลบสีคุณสามารถทำได้:

card.setCardBackgroundColor(Color.TRANSPARENT)

ด้วยวิธีนี้ฉันสามารถสร้างภาพเคลื่อนไหวการเลือกได้
https://gfycat.com/equalcarefreekitten


-1

ลองใช้งานง่าย

<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 บอกเราเกี่ยวกับคุณสมบัตินั้นในบรรทัดแรกของคำถามของเขาเขาบอกว่าเขาต้องการบรรลุเป้าหมายนี้โดยใช้โปรแกรม / แบบไดนามิค
stramin
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.