Adding custom radio buttons in android

Question

I am trying to get radiobutton effect for regular buttons in android  I have a simple android radio button below     Code for this is     activity main xml   lt RelativeLayout xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      android layout width  match parent      android layout height  match parent      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context   MainActivity   gt        lt RadioGroup         android id    id radioGroup1          android layout width  wrap content          android layout height  wrap content          android layout centerHorizontal  true          android layout centerVertical  true   gt            lt RadioButton             android id    id radio0              android layout width  wrap content              android layout height  wrap content              android checked  true              android text  RadioButton1    gt            lt RadioButton             android id    id radio1              android layout width  wrap content              android layout height  wrap content              android text  RadioButton2    gt            lt RadioButton             android id    id radio2              android layout width  wrap content              android layout height  wrap content              android text  RadioButton3    gt       lt  RadioGroup gt     lt  RelativeLayout gt      How to customize it as below      Thanks      EDIT  using code from one of the answers    But the button name is overshadowed by the select option how to remove it       EDIT  more changes  Finall changes should atleast i should know which button i have selected out of three radio buttons       is it possible to get as below

User · Answer

In order to hide the default radio button, I'd suggest to remove the button instead of making it transparent as all visual feedback is handled by the drawable background :

android:button="@null"

Also it would be better to use styles as there are several radio buttons :

<RadioButton style="@style/RadioButtonStyle" ... />

<style name="RadioButtonStyle" parent="@android:style/Widget.CompoundButton">
    <item name="android:background">@drawable/customButtonBackground</item>
    <item name="android:button">@null</item>
</style>

You'll need the Seslyn customButtonBackground drawable too.

User · Answer

Best way to add custom drawable is   lt RadioButton     android id  quot   id radiocar quot      android layout width  quot wrap content quot      android layout height  quot wrap content quot      android layout gravity  quot center quot      android background  quot  android color transparent quot      android button  quot  drawable yourbuttonbackground quot      android checked  quot true quot      android drawableRight  quot  mipmap car quot      android paddingLeft  quot 5dp quot      android paddingRight  quot 5dp quot      android text  quot yourtexthere quot   gt   Shadow overlay by custom drawable is removed here

User · Answer

Simple way try this  Create a new layout in drawable folder and name it custom radiobutton  You can rename also    lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt     lt selector xmlns android  quot http   schemas android com apk res android quot   gt    lt item android state checked  quot false quot   android drawable  quot  drawable your radio off image name quot    gt    lt item android state checked  quot true quot   android drawable  quot  drawable your radio on image name quot    gt   lt  selector gt    Use this in your layout activity  lt RadioButton  android id  quot   id radiobutton quot   android layout width  quot wrap content quot   android layout height  quot wrap content quot   android button  quot  drawable custom radiobutton quot   gt

User · Answer

Below code is example of custom radio button  follow below steps    Xml file     lt FrameLayout      android layout width  quot 0dp quot       android layout height  quot match parent quot       android layout weight  quot 0 5 quot  gt         lt TextView          android id  quot   id text gender quot           android layout width  quot wrap content quot           android layout height  quot wrap content quot           android layout gravity  quot left center vertical quot           android gravity  quot center quot           android text  quot  string gender quot           android textColor  quot  263238 quot           android textSize  quot 15sp quot           android textStyle  quot normal quot              gt         lt TextView          android id  quot   id text male quot           android layout width  quot wrap content quot           android layout height  quot wrap content quot           android layout gravity  quot center quot           android layout marginLeft  quot 10dp quot           android gravity  quot center quot           android text  quot  string male quot           android textColor  quot  263238 quot           android textSize  quot 15sp quot           android textStyle  quot normal quot   gt         lt RadioButton          android id  quot   id radio Male quot           android layout width  quot 28dp quot           android layout height  quot 28dp quot           android layout gravity  quot right center vertical quot           android layout marginRight  quot 4dp quot           android button  quot  drawable custom radio button quot           android checked  quot true quot           android text  quot  quot           android onClick  quot onButtonClicked quot           android textSize  quot 15sp quot           android textStyle  quot normal quot              gt    lt  FrameLayout gt     lt FrameLayout      android layout width  quot 0dp quot       android layout height  quot match parent quot       android layout weight  quot 0 6 quot  gt         lt RadioButton          android id  quot   id radio Female quot           android layout width  quot 28dp quot           android layout height  quot 28dp quot           android layout gravity  quot right center vertical quot           android layout marginLeft  quot 10dp quot           android layout marginRight  quot 0dp quot           android button  quot  drawable custom female button quot           android text  quot  quot           android onClick  quot onButtonClicked quot           android textSize  quot 15sp quot           android textStyle  quot normal quot   gt         lt TextView          android id  quot   id text female quot           android layout width  quot wrap content quot           android layout height  quot wrap content quot           android layout gravity  quot left center vertical quot           android gravity  quot center quot           android text  quot  string female quot           android textColor  quot  263238 quot           android textSize  quot 15sp quot           android textStyle  quot normal quot   gt         lt RadioButton          android id  quot   id radio Other quot           android layout width  quot 28dp quot           android layout height  quot 28dp quot           android layout gravity  quot center horizontal bottom quot           android layout marginRight  quot 10dp quot           android button  quot  drawable custom other button quot           android text  quot  quot           android onClick  quot onButtonClicked quot           android textSize  quot 15sp quot           android textStyle  quot normal quot   gt         lt TextView          android id  quot   id text other quot           android layout width  quot wrap content quot           android layout height  quot wrap content quot           android layout gravity  quot right center vertical quot           android layout marginRight  quot 34dp quot           android gravity  quot center quot           android text  quot  string other quot           android textColor  quot  263238 quot           android textSize  quot 15sp quot           android textStyle  quot normal quot   gt    lt  FrameLayout gt       2 add the custom xml for the  radio buttons 2 1 other drawable custom other button xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt        lt item android state checked  quot true quot  android drawable  quot  drawable select radio other quot    gt       lt item android state checked  quot false quot  android drawable  quot  drawable default radio quot    gt    lt  selector gt   2 2 female drawable custom female button xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt        lt item android state checked  quot true quot  android drawable  quot  drawable select radio female quot    gt       lt item android state checked  quot false quot  android drawable  quot  drawable default radio quot    gt    lt  selector gt   2 3  male drawable custom radio button xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt        lt item android state checked  quot true quot  android drawable  quot  drawable select radio male quot    gt       lt item android state checked  quot false quot  android drawable  quot  drawable default radio quot    gt   lt  selector gt    Output  this is the output screen

User · Answer

Use the same XML file format from Evan s answer  but one drawable file is all you need for formatting    lt RadioButton     android id    id radio0      android layout width  wrap content      android layout height  wrap content      android background   drawable custom button background      android button   android color transparent      android checked  true      android text  RadioButton1    gt    And your separate drawable file    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android   gt        lt item android state pressed  true   gt            lt shape android shape  rectangle   gt                lt corners android radius  3dip    gt                lt stroke android width  1dip  android color   333333    gt                lt solid android color   cccccc    gt                        lt  shape gt       lt  item gt        lt item android state checked  true  gt            lt shape android shape  rectangle   gt                lt corners android radius  3dip    gt                lt stroke android width  1dip  android color   333333    gt                lt solid android color   cccccc    gt             lt  shape gt       lt  item gt          lt item gt            lt shape android shape  rectangle    gt                lt corners android radius  3dip    gt                lt stroke android width  1dip  android color   cccccc    gt                lt solid android color   ffffff    gt                        lt  shape gt       lt  item gt   lt  selector gt

User · Answer

I have updated accepted answer and removed unnecessary things   I have created XML for following image     Your XML code for RadioButton will be    lt RadioGroup         android id    id daily weekly button view          android layout width  match parent          android layout height  wrap content          android layout marginStart  8dp          android layout marginLeft  8dp          android layout marginTop  8dp          android layout marginEnd  8dp          android layout marginRight  8dp          android gravity  center horizontal          android orientation  horizontal          app layout constraintEnd toEndOf  parent          app layout constraintStart toStartOf  parent          app layout constraintTop toTopOf  parent  gt             lt RadioButton             android id    id radio0              android layout width   dimen  80sdp              android gravity  center              android layout height  wrap content              android background   drawable radio flat selector              android button   android color transparent              android checked  true              android paddingLeft   dimen  16sdp              android paddingTop   dimen  3sdp              android paddingRight   dimen  16sdp              android paddingBottom   dimen  3sdp              android text  Daily              android textColor   color radio flat text selector    gt            lt RadioButton             android id    id radio1              android gravity  center              android layout width   dimen  80sdp              android layout height  wrap content              android background   drawable radio flat selector              android button   android color transparent              android paddingLeft   dimen  16sdp              android paddingTop   dimen  3sdp              android paddingRight   dimen  16sdp              android paddingBottom   dimen  3sdp              android text  Weekly              android textColor   color radio flat text selector    gt    lt  RadioGroup gt    radio flat selector xml for background selector    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android drawable   drawable radio flat selected  android state checked  true    gt       lt item android drawable   drawable radio flat regular    gt   lt  selector gt    radio flat selected xml for selected button    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt corners         android radius  1dp            gt       lt solid android color   color colorAccent    gt       lt stroke         android width  1dp          android color   color colorAccent    gt   lt  shape gt    radio flat regular xml for regular selector    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt corners android radius  1dp    gt       lt solid android color   fff    gt       lt stroke         android width  1dp          android color   color colorAccent    gt   lt  shape gt    All the above 3 file code will be in drawable  folder   Now we also need Text Color Selector to change color of text accordingly   radio flat text selector xml for text color selector   Use color  folder for this file     lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   color colorAccent  android state checked  false    gt       lt item android color   color colorWhite  android state checked  true    gt   lt  selector gt    Note  I refereed many answers for this type of solution but didn t found good solution so I make it    Hope it will be helpful to you    Thanks

User · Answer

Setting android background and android button of the RadioButton like the accepted answer didn t work for me  The drawable image was being displayed as a background eventhough android button was being set to transparent   to the radio button text as  android background  quot  drawable radiobuttonstyle quot      android button  quot  android color transparent quot   so gave radiobutton as the custom drawable radiobuttonstyle xml  lt RadioButton     android layout width  quot wrap content quot      android layout height  quot wrap content quot      android checked  quot true quot      android text  quot Maintenance quot      android id  quot   id radioButton1 quot      android button  quot  drawable radiobuttonstyle quot          gt   and radiobuttonstyle xml is as follows  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot    gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt     lt item android state checked  quot true quot  android drawable  quot  drawable ic radio checked quot  gt  lt  item gt     lt item android state checked  quot false quot  android drawable  quot  drawable ic radio unchecked quot  gt  lt  item gt   lt  selector gt   and after this radiobutton with custom button style worked

User · Answer

I realize this is a belated answer  but looking through developer android com  it seems that the Toggle button would be ideal for your situation     http   developer android com guide topics ui controls togglebutton html  And of course you can still use the other suggestions for having a background drawable to get a custom look you want    lt ToggleButton      android id    id togglebutton      android layout width  wrap content      android layout height  wrap content      android background   drawable custom button background      android textOn  On      android textOff  Off        gt    Now if you want to go with your final edit and have a  halo  effect around your buttons  you can use another custom selector to do just that    lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state selected  true   gt   lt  -- selected -- gt           lt shape gt               lt solid                 android color   android color white    gt               lt stroke                 android width  3px                  android color   android color holo blue bright    gt               lt corners                 android radius  5dp    gt           lt  shape gt       lt  item gt       lt item gt   lt  -- default -- gt           lt shape gt               lt solid                 android color   android color white    gt               lt stroke                 android width  1px                  android color   android color darker gray    gt               lt corners                 android radius  5dp    gt           lt  shape gt       lt  item gt    lt  selector gt

User · Answer

Add a background drawable that references to an image  or a selector  like below   and make the button transparent   lt RadioButton     android id  quot   id radio0 quot      android layout width  quot wrap content quot      android layout height  quot wrap content quot      android background  quot  null quot      android button  quot  drawable yourbuttonbackground quot      android checked  quot true quot      android text  quot RadioButton1 quot    gt   If you would like your radio buttons to have a different resource when checked  create a selector background drawable  res drawable yourbuttonbackground xml  lt selector xmlns android  quot http   schemas android com apk res android quot   gt       lt item         android drawable  quot  drawable b quot          android state checked  quot true quot          android state pressed  quot true quot    gt       lt item         android drawable  quot  drawable a quot          android state pressed  quot true quot    gt       lt item         android drawable  quot  drawable a quot          android state checked  quot true quot    gt       lt item         android drawable  quot  drawable b quot    gt   lt  selector gt   In the selector above  we reference two drawables  a and b  here s how we create them  res drawable a xml - Selected State  lt shape     xmlns android  quot http   schemas android com apk res android quot      android shape  quot rectangle quot   gt       lt corners         android radius  quot 5dp quot    gt       lt solid         android color  quot  fff quot    gt       lt stroke         android width  quot 2dp quot          android color  quot  53aade quot    gt   lt  shape gt   res drawable b xml - Regular State  lt shape     xmlns android  quot http   schemas android com apk res android quot      android shape  quot rectangle quot   gt       lt corners         android radius  quot 5dp quot    gt       lt solid         android color  quot  fff quot    gt       lt stroke         android width  quot 2dp quot          android color  quot  555555 quot    gt   lt  shape gt   More on drawables here  http   developer android com guide topics resources drawable-resource html

User · Answer

You must fill the  Button  attribute of the  CompoundButton  class with a XML drawable path  my checkbox   In the XML drawable  you must have      lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android   gt       lt item android state checked  false  android drawable   drawable checkbox not checked    gt        lt item android state checked  true  android drawable   drawable checkbox checked    gt        lt item android drawable   drawable checkbox not checked    gt   lt  -- default -- gt   lt  selector gt    Don t forget to replace my checkbox by your filename of the checkbox drawable   checkbox not checked by your PNG drawable which is your checkbox when it s not checked and checkbox checked with your image when it s checked   For the size  directly update the layout parameters

[android] Adding custom radio buttons in android

Examples related to android

Examples related to xml