How to show card view background like progress in Android?

Question

I want to set app:cardBackgroundColor of CardView like this:

<-----x----->
|-----------|------|
| color1    |color2|
|-----------|------|

where x is percentage of CardView having color1, By default, the whole background color should be color2, How to set this dynamically in code? (preferably Kotlin)

Answer 1

I think the simplest way to do it is to put the contents of CardView inside a FrameLayout, as according to the docs:

Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are View.GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.

Suppose this is the CardView layout:

<androidx.cardview.widget.CardView>
    <!-- your contents -->
</androidx.cardview.widget.CardView>

Change it into:

<androidx.cardview.widget.CardView>
    <FrameLayout>
        <LinearLayout android:orientation="horizontal">
            <View
                android:id="@+id/left"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0" 
                android:background="color1"/>
            <View
                android:id="@+id/right"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="100" 
                android:background="color2"/>
        </LinearLayout>
        <!-- your contents -->
    </FrameLayout>
</androidx.cardview.widget.CardView>

And in the code:

findViewById<View>(R.id.left).layoutParams = LinearLayout.LayoutParams(
    0, LinearLayout.LayoutParams.MATCH_PARENT, x)
findViewById<View>(R.id.right).layoutParams = LinearLayout.LayoutParams(
    0, LinearLayout.LayoutParams.MATCH_PARENT, 100f - x)

Answer 2

Ok, you're going to have to do more research, trial, and error; but to get you started, the only ways you'll be able to do this that I can think of are:

1. Creating a custom gradient at runtime, picking the value from the "x" that you define. (*)

2. Create a class CustomCardView: CardView() that overrides onDraw or any other method that you see fit to draw the background, will also need the "x" value (*)

3. Combine both solutions, and have your CustomCardView construct a gradient at runtime and set it as background, using the code from 1 and 2 above.

(*) if the "x" is a dynamic value that you want people to change at design time via XML, you will need to create a custom attribute and have your CustomCardView pick/read the value if existing.

Answer 3

I have meant in the comment side that you can like this;

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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:layout_width="match_parent"
    android:layout_height="150dp"
    app:cardCornerRadius="16dp"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="150dp">

        <LinearLayout
            android:id="@+id/left_side"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_toStartOf="@+id/right_side"
            android:layout_toLeftOf="@+id/right_side"
            android:background="@color/colorPrimary"
            android:orientation="vertical" />

        <LinearLayout
            android:id="@+id/right_side"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="@color/colorPrimaryDark"
            android:orientation="vertical" />
    </RelativeLayout>

</android.support.v7.widget.CardView>

You can change layouts or cardview width and height how you want it to be. Hope this helps.