androidandroid-custom-viewandroid-selector

Android, create rounded custom view with checked and unchecked cases


I need to create a custom image view for choosing color by design. When user click the circle, inner white circle with a tick should appear, like in example below:

enter image description here

Otherwise, it should be just a circle shape with some color (unchecked state), like below:

enter image description here

The main problem, that I do not know how to create a selector with the inner circle inside and with keeping the ability to setup color programmatically.

Simple rounded shape I can setup, for example, like this:

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/circle_crop"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:layout_gravity="center"
    android:src="@android:color/holo_red_dark" />

How to modify it to setup white circle with tick inside on a checked state (when user click on it)?


Solution

  • So easy.

    1. Create layer-list Drawable Called "icon_check"

    <layer-list 
        xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item                                           //for the round white background
            android:bottom="10dp"                       //margin, "<size>" tag doesn't work
            android:end="10dp"
            android:start="10dp"
            android:top="10dp">
    
            <shape 
                android:shape="oval">
    
                <solid 
                    android:color="@color/white" />
    
            </shape>
    
        </item>
    
        <item
            android:drawable="@drawable/check"          //check mark from built-in asset
            android:bottom="14dp"                       //margin, extra 4dp is prefered
            android:end="14dp"
            android:start="14dp"
            android:top="14dp" />
    
    </layer-list>
    

    2. Create selector Drawable Called "foreground_check"

    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:drawable="@drawable/icon_check"             //layer-list created above
            android:state_selected="true" />
    
        <item
            android:drawable="@android:color/transparent"       //key point, 【"@null" doesn't work!!】
            android:state_selected="false" />
    
    </selector>
    

    3. Setup CardView

    <androidx.cardview.widget.CardView                  //【MaterialCardView doesn't work!!】
        android:id="@+id/cardView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:foreground="@drawable/foreground_check" //apply layer-list drawable
        app:cardBackgroundColor="@color/black"
        app:cardCornerRadius="20dp" />                  //half of side length
    

    4. Setup Ui Controller

    cardView.setOnClickListener {
        it.isSelected = !it.isSelected
    }
    

    Result:

    enter image description here