How to create the checkBox in circular shape?

Question

I am facing the issue in creating the checkbox in circular shape in android. I tried many methods but my problem is not solved.I created the shapes and applied to the checkbox then also problem is not solved.Please help me how to create the check box in circle shape .

How to create the circular checkbox like shown image.

Answer 1

After spending some time, i have created this template, which you can use. You may need to modify as required.

In activity.xml

<CheckBox
    android:id="@+id/checkb"
    android:layout_width="115dp"
    android:layout_height="50dp"
    android:button="@drawable/custom_checkbox"
    android:scaleX="3"
    android:scaleY="3"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginRight="15dp"
    android:layout_marginEnd="15dp" />

create a new xml in drawable folder called custom_checkbox.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="false"
        android:drawable="@drawable/unchecked" />
</selector>

create a new xml in drawable folder called checked.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item>
                <shape android:shape="oval">
                    <corners android:radius="1dp" />
                    <stroke
                        android:width="1dp"
                        android:color="#777" />
                    <gradient
                        android:startColor="#990000"
                        android:centerColor="#990000"
                        android:endColor="#990000"
                        android:angle="270" />
                    <size
                        android:width="30dp"
                        android:height="30dp" />
                </shape>
                </item>

            <item
                android:width="8dp"
                android:height="2dp"
                android:top="20dp"
                android:left="6dp">
                <rotate
                    android:fromDegrees="45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>

            <item
                android:width="19dp"
                android:height="2dp"
                android:top="16dp"
                android:left="9dp">
                <rotate
                    android:fromDegrees="-45">
                    <shape android:shape="rectangle">
                        <solid android:color="#fff"/>
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>

</selector>

create a new xml in drawable folder called unchecked.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <corners android:radius="1dp" />
        <stroke
            android:width="1dp"
            android:color="#777" />
        <gradient
            android:startColor="#990000"
            android:centerColor="#990000"
            android:endColor="#990000"
            android:angle="270" />
        <size
            android:width="30dp"
            android:height="30dp" />
    </shape>

When unchecked it looks as below. (you can add the code between from checked.xml and modify the top and left to give X when checkbox is not checked)

When checked it will look as below

If this works mark it as answer.

Answer 2

many of the previous answers are well accepted with chirag90's answer being the best but also need a lot of coding, in my answer i will retake his concept but will show you how you can create your own circular checkbox drawables with all the style you want without any coding needed, you will then use this drawables to defind the states of the checkbox like in chirag90's answer

first go to freelogomaker.com and create your drawables, it is very easy to use and you can create any thing, on the website go to the shape's search bar and type "round checkbox" then click the search button, a list of mutiple drawables will be presented to you so you can choose

above are the drawables i selected, customise as you wish and save then go to appiconmaker.co and use the drawables you created to generate the various design sizes of the drawables like mdpi,hdpi,xhdpi and xxhdpi, below are the drawables i made

unchecked checkbox

checked checkbox

once that is done you can then add the drawables to your project with the coresponding names checked and unchecked in your drawables folder,once all that done now create custom_checkbox.xml like in chirag90's answer

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="true"
        android:drawable="@drawable/checked" />
    <item android:state_pressed="false"
        android:drawable="@drawable/unchecked" />
</selector>

now in your layout create your checkbox as follows

<CheckBox
 android:id="@+id/checkman"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentEnd="true"
 android:layout_alignParentRight="true"
 android:layout_centerVertical="true"
 android:layout_marginRight="15dp"
 android:layout_marginEnd="15dp"
 android:button="@drawable/custom_checkbox"
 android:scaleX="0.8"
 android:scaleY="0.8" />

you my then modify the android:scaleX="0.8" and android:scaleY="0.8" to fit your layout

this is the result in my project

unchecked

checked

hope this helps many out there

Answer 3

Solution accepted is correct, but following the same flow you can change the shapes to use a drawable on the "checked.xml" this solution should work with android devices before API 21 because there is no width or height on shapes on xml drawables.

Unchecked XML:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">


        <solid android:color = "@color/lightgray" />
</shape>

Checked XML:

<?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android = "http://schemas.android.com/apk/res/android">
            <item>
                <shape android:shape="oval">
                    <solid android:color="@color/colorPrimary" />
                </shape>
                </item>

            <item
                         android:drawable="@drawable/check_arrow_png" />
        </layer-list>

Answer 4

All the answers above require creating custom drawables while we can achieve this by using built-in vector drawables. Have a look at this post it explains this beautifully.

Answer 5

In addition to answer of Rodolfo, I can add, that you can use inset attributes if your drawable is too big. Note: the solution of @chirag90 works only for API 23 and higher. Note: vector drawable can be rendered badly.

Checked.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid
                android:color="@color/col_chat_selected"/>
            <size
                android:width="35dp"
                android:height="35dp"/>
        </shape>
    </item>

    <item>
        <inset
            android:drawable="@drawable/shape"
            android:insetBottom="10dp"
            android:insetLeft="10dp"
            android:insetRight="10dp"
            android:insetTop="10dp"/>
    </item>

</layer-list>

Answer 6

All the proposed options are sheer nonsense, since it is difficult and not beautiful, my solution: learn vector animation and make everything beautiful with ShapeShifter.design

• Create TWO animations Start_to_End and End_to_Start;

• Export the created animation in the format AnimationVectorDrawable;

• Move your animation to the resources folder drawable;

• Place ImageView in XML;

• For convenience, create CustomImageView { Do not worry below will be an example };

  @RequiresApi(Build.VERSION_CODES.M)
  class CustomCheckBox(
  context: Context,
  attrs: AttributeSet
  ) : AppCompatImageView(context, attrs) {
  
  private val TAG = this::class.simpleName
  
  private val check =
    resources.getDrawable(R.drawable.avd_anim_start_to_end)!!.toAnimationVectorDrawable()
  private val uncheck =
     resources.getDrawable(R.drawable.avd_anim_end_to_start)!!.toAnimationVectorDrawable()
  
  init {
    setImageDrawable(check)
    setOnClickListener { animateCheckOrUncheck() }
  }
  
  private fun animateCheckOrUncheck() {
    check.registerAnimationCallback(object : Animatable2.AnimationCallback() {
        override fun onAnimationEnd(drawable: Drawable?) {
            Log.i(TAG, "onAnimationEnd: check")
            check.reset()
            setImageDrawable(uncheck)
        }
    })
  
    uncheck.registerAnimationCallback(object : Animatable2.AnimationCallback() {
        override fun onAnimationEnd(drawable: Drawable?) {
            Log.i(TAG, "onAnimationEnd: uncheck")
            uncheck.reset()
            setImageDrawable(check)
        }
    })
  
    (drawable as AnimatedVectorDrawable).start()
   }
  }
  
  @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
  private fun Drawable.toAnimationVectorDrawable(): AnimatedVectorDrawable {
  return (this as AnimatedVectorDrawable)
  }