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:
Otherwise, it should be just a circle shape with some color (unchecked state), like below:
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)?
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: