MaterialCardView change background color and stroke color programmatically

Question

Pro devs. I'll try to change the card view background and stroke color programmatically but all times card.setCardBackgroundColor() override the stroke color. Statically in XML, it works well. But programmatically it make an effect like this.

val colorWithAlpha = ColorUtils.setAlphaComponent(tagColor, 128)
tagView.card.setStrokeColor(ColorStateList.valueOf(colorWithAlpha))
tagView.card.setCardBackgroundColor(ColorStateList.valueOf(tagColor))

Same for: card.backgroundTintList = ColorStateList.valueOf(tagColor)

XML:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#DB8A61"
    app:cardCornerRadius="8dp"
    app:cardElevation="0dp"
    app:cardUseCompatPadding="true"
    app:cardPreventCornerOverlap="true"
    app:strokeColor="#EBD3C7"
    app:strokeWidth="4dp">

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/tag_text"
        style="@style/SmallLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:lines="1"
        android:paddingStart="8dp"
        android:paddingTop="4dp"
        android:paddingEnd="8dp"
        android:paddingBottom="4dp"
        android:textColor="@color/white"
        app:autoSizeMaxTextSize="100sp"
        app:autoSizeMinTextSize="5sp"
        app:autoSizeStepGranularity="1sp"
        app:autoSizeTextType="uniform"
        tools:text="Some Text" />

</com.google.android.material.card.MaterialCardView>

How it looks: XML:

Doing that in code:

private fun createAddTagView(tagName: String, tagColor: Int, container: ViewGroup) {
        val tagView = LayoutTagBinding.inflate(inflater, container, true)
        tagView.tagText.text = tagName
        val colorWithAlpha = ColorUtils.setAlphaComponent(tagColor, 128)
        tagView.card.setStrokeColor(ColorStateList.valueOf(colorWithAlpha))
        tagView.card.setCardBackgroundColor(ColorStateList.valueOf(tagColor))
    }

When Removing: tagView.card.setCardBackgroundColor(ColorStateList.valueOf(tagColor))

When there are no Programmatic changes (colors setup by XML) Looks like expected:

How to make it like in XML show?

Zain · Accepted Answer · 2021-11-18T11:59:50.560

4

I believe that the problem is not in the MaterialCardView background/stroke methods; but that the used color shades in the layout are different than those used programmatically.

The used colors in layout:

app:cardBackgroundColor="#DB8A61"
app:strokeColor="#EBD3C7"

But programmatically, you use tagColor and add alpha channel to it with colorWithAlpha; you didn't provide the tagColor; but adding 128 alpha component would not change that much; and that is totally different than the layout colors that don't have alpha component at all.

So, to have the same colors programmatically, just reuse the same layout colors without alpha component:

tagView.card.setCardBackgroundColor(ColorStateList.valueOf(Color.parseColor("#DB8A61")))
tagView.card.setStrokeColor(ColorStateList.valueOf(Color.parseColor("#EBD3C7")))

edited Nov 18 '21 at 11:59

answered Nov 17 '21 at 19:19

Zain

37,492
7
60
84

Thank you for the answer. Seems the strokeColor= not apply a alpha channel color. Do you have an idea, how to make color from DB8A61 get same like with alpha but not with alpha EBD3C7 ? – billy gates Nov 18 '21 at 09:02
@billygates, instead of using alpha component method, you can add the first two hex digits to the color the will represent the opacity; so the entire color will be 8 digits instead of 6. Something like `#80EBD3C7` instead of `#EBD3C7`; and use the same procedure in the answer – Zain Nov 18 '21 at 12:01
`setStrokeColor` not working with the alpha channel. – billy gates Nov 18 '21 at 12:13
Not sure .. but let us check the documentation .. probably it's a bug – Zain Nov 18 '21 at 12:14

MaterialCardView change background color and stroke color programmatically

1 Answers1