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.
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.
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
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>
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.
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>
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)
}
Related
I know this question is very brief but how can I create this shape in XML for an Android Studio project?
It seems like I can create a rectangle and then remove a semi circle portion from it but achieving that effect in XML seems very difficult. Has anyone done this before?
Create such background with pure xml drawables is always tricky, but possible.
I've created button you need in xml. Add this files to your drawable folder:
circle.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!-- inset - moves circle to the left-->
<inset android:insetLeft="-150dp">
<shape android:shape="ring"
android:thicknessRatio="7"
android:innerRadius="0dp"
android:useLevel="false"
>
<stroke android:width="2dp" android:color="#000000"/>
<solid android:color="#ffffff"/>
</shape>
</inset>
</item>
</selector>
custom_button_default.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#00ff00"/>
<stroke
android:color="#000000"
android:width="2dp"/>
</shape>
</item>
<item android:drawable="#drawable/circle" />
</layer-list>
custom_button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#dddddd"/>
<stroke
android:color="#000000"
android:width="2dp"/>
</shape>
</item>
<item android:drawable="#drawable/circle" />
</layer-list>
custom_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/custom_button_pressed" />
<item android:drawable="#drawable/custom_button_default"/>
</selector>
Set custom_button_selector drawable as a background of your view in layout:
<Button
android:layout_width="150dp"
android:layout_height="100dp"
android:id="#+id/button"
android:background="#drawable/custom_button_selector"
/>
You probably will have to adjust circle insetLeft value and button width, height in layout. Would be better to have this variables defined in values/dimens.xml.
Default state:
Pressed state:
I've tested it on Nexus 5 and Nexus 7 - button background looks the same.
Hi you ca use convert online tools http://www.online-convert.com/ after convert svg to xml android file this site http://inloop.github.io/svg2android/
I am trying to implement SwitchCompat from AppCompat but it looks different on different version devices.
On Lollipop & Froyo it looks good but on Gingerbread to KitKat it doesn't look like a switch.
Code:
<android.support.v7.widget.SwitchCompat
android:id="#+id/label_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="No"
android:textOn="Yes"
android:checked="false" />
Can I make these switches look the same across all versions or at least make them look like a switch?
Min sdk of my application was GingerBread and I had the same problem, finally I found the solution. In order to make SwitchCompat consistent in all android versions I used two drawable at res/drawable folders, one for thumb and one for track. and assign them to SwitchCompat in java code not in xml. Here is the code you should use.
SwitchCopmat widget:
<android.support.v7.widget.SwitchCompat
android:id="#+id/label_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
drawable for thumb, switch_compat_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="#dimen/switch_compat_thumb_margin"
android:left="#dimen/switch_compat_thumb_margin"
android:right="#dimen/switch_compat_thumb_margin"
android:top="#dimen/switch_compat_thumb_margin">
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="oval">
<size
android:width="#dimen/switch_compat_thumb_size"
android:height="#dimen/switch_compat_thumb_size"/>
<solid android:color="#android:color/red"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<size
android:width="#dimen/switch_compat_thumb_size"
android:height="#dimen/switch_compat_thumb_size"/>
<stroke
android:width="#dimen/switch_compat_thumb_stroke_width"
android:color="#android:color/red"/>
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
</item>
drawable for track, switch_compat_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/switch_compat_track_radius"/>
<stroke
android:width="#dimen/switch_compat_track_stroke_width"
android:color="#android:color/red"/>
<solid android:color="#android:color/transparent" />
and then, after finding it in java, assign thumb and track to SwitchCompat in java code:
final SwitchCopmat switchCompat = (SwitchCopmat) findViewById(R.id.label_switch);
//add thumb and track drawable in java since it doesn't work on xml for gingerbread
switchCompat.setThumbDrawable(getResources().getDrawable(R.drawable.switch_compat_thumb));
switchCompat.setTrackDrawable(getResources().getDrawable(R.drawable.switch_compat_track));
How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create This
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/green_circle"
android:textSize="20sp"
android:textColor="#android:color/white"
android:clickable="true"
/>
Here is green_circle.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
When i use this ,Button looks
How can i get my desire button. Any Help Appreciated
You defined 1sp (you should use "dp" btw.) circle and you got it.
I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins)
Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
Simple usage (it's not your's case but I think that it show you what you should to do):
<layer-list >
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/green_light"/>
</shape>
</item>
</layer-list>
Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.
One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
</item>
<item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
<shape android:shape="oval">
<solid android:color="#54d66a" />
</shape>
</item>
</layer-list>
1.use two different images of radio on and off actually what you want and make a xml in drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/check_off" />
<item android:state_checked="true" android:drawable="#drawable/checkbox_on" />
<item android:drawable="#drawable/checkbox_off" />
</selector>
2.and set this drawable as a background on your radio button.
Use an ImageButton:
<ImageButton android:src="#drawable/green_circle" />
The documentation also states how you can have different images depending on the state of the button.
put an image of green circle in drawable folder. then in xml just set background image for your button
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/yourimage"
/>
this will work :)
I'm running into a problem where the color selector in one of my drawable xml files doesn't seem to be honored. I have a layout including:
<LinearLayout
android:layout_height="wrap_content"
android:id="#+id/sortLayout"
android:layout_width="fill_parent"
android:gravity="center"
android:background="#color/listSortBarBackground" android:orientation="vertical">
<ToggleButton
android:layout_width="30dp"
android:layout_height="30dp"
android:checked="true"
android:background="#drawable/filter_button_left"/>
<ToggleButton
android:layout_width="30dp"
android:layout_height="30dp"
android:checked="false"
android:background="#drawable/filter_button_left"/>
</LinearLayout>
drawable\filter_button_left.xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/filter_button_color" />
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomRightRadius="5dp"/>
</shape>
and color\filter_button_color.xml is:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:color="#color/myred"
android:state_checked="true"/>
<item
android:color="#color/myblue"
android:state_checked="false"/>
</selector>
(myred and myblue are defined in colors.xml)
The buttons are rendered and I can tell they are getting the proper checked state since the first one displays with text "ON" and the second one "OFF", both buttons get the shape as their background, but in both cases the shape's color is myred. I played around with flipping the items in the filter_button_color.xml selector, and it seems that regardless of the actual state or the states in the selector items, the top color is always used.
Can anyone see why this shouldn't work?
Thanks!
Scott
I think your problem is that you have the xml drawables the wrong way around.
You need to refer to your selector FIRST from the ToggleButton layout, and inside the selector layout, have the two drawables.
Eg ToggleButton -> Selector (With two states) -> Shapes.
This should work (and make one less xml file).
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape>
<solid android:color="#color/myred"/>
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape>
<solid android:color="#color/myblue"/>
<corners
android:bottomLeftRadius="0dp"
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomRightRadius="5dp"/>
</shape>
</item>
</selector>
What I'm trying to do is define a common background for use in a LinearLayout which frequents my application on many of its Activitys. This particular layout is a header that shows on the top of each activity.
What I'm trying to do is create a drawable that fills the linearlayout with a gradient and has a horizontal line below the gradient.
Does anyone know if this is possible or do I have to do this sort of thing only with nested layouts.
My attemptat the drawable xml is
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#AA000000" android:endColor="#AA333333"
android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="line">
<stroke android:width="3dp" android:color="#FFFFFFFF"
android:dashWidth="1dp" android:dashGap="2dp" />
<size android:height="5dp" />
</shape>
</item>
</selector>
Drawable accepts multiple shapes, (defined always in others files) if i understand your question maybe you can do a Layer drawable (this draws multiple underlying drawables on top of each other)
i write this here, so, i dont tested, but try this and read this fantastic documentation.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_7"/>
<item android:drawable="#drawable/shape_1"/>
</layer-list>
the android complete xml resources
cheers
Use gravity to set your items in layer-list.
for vertical orientation use:
android:gravity="top"
android:gravity="center"
android:gravity="bottom"
for horizontal orientation use:
android:gravity="left"
android:gravity="center"
android:gravity="right"
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="#drawable/top_img"
android:gravity="top"/>
</item>
<item>
<bitmap
android:src="#drawable/center_img"
android:gravity="center"/>
</item>
<item>
<bitmap
android:src="#drawable/bottom_img"
android:gravity="bottom"/>
</item>
</layer-list>
Be sure that the parent element has enough space to hold all the items!
Otherwise they will overlap each other