How to custom switch button

Question

I am looking to Custom The Switch Button to becoming as following    How to achieve this

User · Answer

With the Material Components Library you can use the MaterialButtonToggleGroup:

        <com.google.android.material.button.MaterialButtonToggleGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:checkedButton="@id/b1"
            app:selectionRequired="true"
            app:singleSelection="true">

            <Button
                style="?attr/materialButtonOutlinedStyle"
                android:id="@+id/b1"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="OPT1" />

            <Button
                style="?attr/materialButtonOutlinedStyle"
                android:id="@+id/b2"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="OPT2" />

        </com.google.android.material.button.MaterialButtonToggleGroup>

User · Answer

Its a simple xml design  It looks like iOS switch  check this below image    You need to create custom thumb xml and custom track xml  This is my switch I need a very big switch so added layout width layout height parameter     lt androidx appcompat widget SwitchCompat         android id    id swOnOff          android layout width   dimen  200sdp          android layout marginStart   dimen  50sdp          android layout marginEnd   dimen  50sdp          android layout marginTop   dimen  30sdp          android layout gravity  center          app showText  true          android textSize   dimen  20ssp          android fontFamily   font opensans bold          app track   drawable custom track          android thumb   drawable custom thumb          android layout height   dimen  120sdp   gt    Now create custom thumb xml   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  gt           lt shape android shape  oval  gt               lt solid android color   ffffff   gt               lt size android width   dimen  100sdp                  android height   dimen  100sdp   gt               lt stroke android width  1dp                  android color   8c8c8c   gt           lt  shape gt       lt  item gt       lt item android state checked  true  gt           lt shape android shape  oval  gt               lt solid android color   ffffff   gt               lt size android width   dimen  100sdp                  android height   dimen  100sdp   gt               lt stroke android width  1dp                  android color   34c759   gt           lt  shape gt       lt  item gt   lt  selector gt    Now create custom track xml   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  gt           lt shape android shape  rectangle  gt               lt corners android radius   dimen  100sdp    gt               lt solid android color   ffffff    gt               lt stroke android color   8c8c8c  android width  1dp   gt               lt size android height  20dp    gt           lt  shape gt       lt  item gt       lt item android state checked  true  gt           lt shape android shape  rectangle  gt               lt corners android radius   dimen  100sdp    gt               lt solid android color   34c759    gt               lt stroke android color   8c8c8c  android width  1dp   gt               lt size android height  20dp    gt           lt  shape gt       lt  item gt   lt  selector gt

User · Answer

More info on this link  http   www mokasocial com 2011 07 sexily-styled-toggle-buttons-for-android    lt ToggleButton          android layout width  wrap content          android layout height  wrap content          android background   drawable toggle me   gt    and the drawable will be something like    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state checked  true          android drawable   drawable toggle me on    gt   lt  -- checked -- gt       lt item android drawable   drawable toggle me off    gt   lt  -- default unchecked -- gt   lt  selector gt

User · Answer

There are two ways to create custom ToggleButton  1  By defining custom background 2  By creating custom button  Check http   www zoftino com android-toggle-button for custom styles  Toggle button with custom background  Define drawable as xml resource like below and set it as background of toggle button  In the below example  drawable toggle color is a color selector  you need to define this also    lt  xml version  1 0  encoding  utf-8   gt   lt inset xmlns android  http   schemas android com apk res android      android insetLeft  4dp      android insetTop  4dp      android insetRight  4dp      android insetBottom  4dp  gt       lt layer-list android paddingMode  stack  gt           lt item gt               lt ripple android color   attr android colorControlHighlight  gt                   lt item gt                       lt shape android shape  rectangle                          android tint   attr android colorButtonNormal  gt                           lt corners android radius  8dp   gt                           lt solid android color   android color white    gt                           lt padding android left  8dp                              android top  6dp                              android right  8dp                              android bottom  6dp    gt                       lt  shape gt                   lt  item gt               lt  ripple gt           lt  item gt           lt item android gravity  left fill vertical  gt               lt shape android shape  rectangle  gt                   lt corners android radius  4dp   gt                   lt size android width  8dp    gt                   lt solid android color   color toggle color    gt               lt  shape gt           lt  item gt           lt item android gravity  right fill vertical  gt               lt shape android shape  rectangle  gt                   lt corners android radius  4dp   gt                   lt size android width  8dp    gt                   lt solid android color   color toggle color    gt               lt  shape gt           lt  item gt       lt  layer-list gt   lt  inset gt    Toggle button with custom button  Create your own images for two state of toggle button  make sure images exist for all sizes of screens  and place them in drawable folder  create selector and set it as button        lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state checked  true  android drawable   drawable toggle on    gt       lt item android drawable   drawable toggle off    gt   lt  selector gt

User · Answer

However  I might not be taking the best approach  but this is how I have created some Switch like UIs in few of my apps  Here is the code -  lt RadioGroup         android checkedButton  quot   id offer quot          android id  quot   id toggle quot          android layout width  quot match parent quot          android layout height  quot 30dp quot          android layout marginBottom  quot  dimen margin medium quot          android layout marginLeft  quot 50dp quot          android layout marginRight  quot 50dp quot          android layout marginTop  quot  dimen margin medium quot          android background  quot  drawable pink out line quot          android orientation  quot horizontal quot  gt            lt RadioButton             android layout marginTop  quot 1dp quot              android layout marginBottom  quot 1dp quot              android layout marginLeft  quot 1dp quot              android id  quot   id search quot              android background  quot  drawable toggle widget background quot              android layout width  quot 0dp quot              android layout height  quot match parent quot              android layout weight  quot 1 quot              android button  quot  null quot              android gravity  quot center quot              android text  quot Search quot              android textColor  quot  color white quot    gt            lt RadioButton             android layout marginRight  quot 1dp quot              android layout marginTop  quot 1dp quot              android layout marginBottom  quot 1dp quot              android id  quot   id offer quot              android layout width  quot 0dp quot              android layout height  quot match parent quot              android layout weight  quot 1 quot              android background  quot  drawable toggle widget background quot              android button  quot  null quot              android gravity  quot center quot              android text  quot Offers quot              android textColor  quot  color white quot    gt       lt  RadioGroup gt   pink out line xml  lt shape xmlns android  quot http   schemas android com apk res android quot      android shape  quot rectangle quot  gt       lt corners android radius  quot 2dp quot    gt       lt solid android color  quot  80000000 quot    gt       lt stroke         android width  quot 1dp quot          android color  quot  color pink quot    gt   lt  shape gt   toggle widget background xml  lt  xml version  quot 1 0 quot  encoding  quot UTF-8 quot  standalone  quot no quot   gt   lt selector xmlns android  quot http   schemas android com apk res android quot  gt       lt item android drawable  quot  color pink quot  android state checked  quot true quot    gt       lt item android drawable  quot  color dark pink quot  android state pressed  quot true quot    gt       lt item android drawable  quot  color transparent quot    gt   lt  selector gt   And here is the output -

User · Answer

lt Switch android layout width  wrap content                       android layout height  wrap content                      android thumb   drawable custom switch inner holo light                      android track   drawable custom switch track holo light                      android textOn   string yes                      android textOff   string no   gt    drawable custom switch inner holo light xml   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state enabled  false  android drawable   drawable custom switch thumb disabled holo light    gt       lt item android state pressed  true   android drawable   drawable custom switch thumb pressed holo light    gt       lt item android state checked  true   android drawable   drawable custom switch thumb activated holo light    gt       lt item                               android drawable   drawable custom switch thumb holo light    gt   lt  selector gt    drawable custom switch track holo light xml   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state focused  true   android drawable   drawable custom switch bg focused holo light    gt       lt item                               android drawable   drawable custom switch bg holo light    gt   lt  selector gt    Next images are 9 paths drawables and they must be in different density  mdpi  hdpi  xhdpi  xxhdpi   As example I give xxhdpi  you can resize they if u needed    drawable custom switch thumb disabled holo light    drawable custom switch thumb pressed holo light    drawable custom switch thumb activated holo light    drawable custom switch thumb holo light    drawable custom switch bg focused holo light    drawable custom switch bg holo light

User · Answer

I use this approach to create a custom switch using a RadioGroup and RadioButton   Preview    Color Resource   lt color name  blue  gt  FF005a9c lt  color gt   lt color name  lightBlue  gt  ff6691c4 lt  color gt   lt color name  lighterBlue  gt  ffcdd8ec lt  color gt   lt color name  controlBackground  gt  ffffffff lt  color gt    control switch color selector  in res color folder    lt selector xmlns android  http   schemas android com apk res android  gt       lt item         android state checked  true          android color   color controlBackground        gt       lt item         android state pressed  true          android color   color controlBackground            gt       lt item         android color   color blue            gt   lt  selector gt    Drawables  control switch background border xml   lt shape xmlns android  http   schemas android com apk res android      android shape  rectangle  gt       lt corners android radius  5dp    gt       lt solid android color   android color transparent    gt       lt stroke         android width  3dp          android color   color blue    gt   lt  shape gt    control switch background selector xml   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state checked  true  gt           lt shape gt               lt solid android color   color blue  gt  lt  solid gt           lt  shape gt       lt  item gt       lt item android state pressed  true  gt           lt shape gt               lt solid android color   color lighterBlue  gt  lt  solid gt           lt  shape gt       lt  item gt       lt item gt           lt shape gt               lt solid android color   android color transparent  gt  lt  solid gt           lt  shape gt       lt  item gt   lt  selector gt    control switch background selector middle xml   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state checked  true  gt           lt shape gt               lt solid android color   color blue  gt  lt  solid gt           lt  shape gt       lt  item gt       lt item android state pressed  true  gt           lt shape gt               lt solid android color   color lighterBlue  gt  lt  solid gt           lt  shape gt       lt  item gt       lt item gt           lt layer-list gt               lt item android top  -1dp  android bottom  -1dp  android left  -1dp  gt                   lt shape gt                       lt solid android color   android color transparent  gt  lt  solid gt                       lt stroke android width  1dp  android color   color blue  gt  lt  stroke gt                   lt  shape gt               lt  item gt           lt  layer-list gt       lt  item gt   lt  selector gt    Layout   lt RadioGroup         android checkedButton    id calm          android id    id toggle          android layout width  match parent          android layout height  wrap content          android layout marginLeft  24dp          android layout marginRight  24dp          android layout marginBottom  24dp          android layout marginTop  24dp          android background   drawable control switch background border          android orientation  horizontal  gt           lt RadioButton             android layout marginTop  3dp              android layout marginBottom  3dp              android layout marginLeft  3dp              android paddingTop  16dp              android paddingBottom  16dp              android id    id calm              android background   drawable control switch background selector middle              android layout width  0dp              android layout height  match parent              android layout weight  1              android button   null              android gravity  center              android text  Calm              android fontFamily  sans-serif-medium              android textColor   color control switch color selector   gt           lt RadioButton             android layout marginTop  3dp              android layout marginBottom  3dp              android paddingTop  16dp              android paddingBottom  16dp              android id    id rumor              android background   drawable control switch background selector middle              android layout width  0dp              android layout height  match parent              android layout weight  1              android button   null              android gravity  center              android text  Rumor              android fontFamily  sans-serif-medium              android textColor   color control switch color selector   gt           lt RadioButton             android layout marginTop  3dp              android layout marginBottom  3dp              android layout marginRight  3dp              android paddingTop  16dp              android paddingBottom  16dp              android id    id outbreak              android layout width  0dp              android layout height  match parent              android layout weight  1              android background   drawable control switch background selector              android button   null              android gravity  center              android text  Outbreak              android fontFamily  sans-serif-medium              android textColor   color control switch color selector    gt   lt  RadioGroup gt

User · Answer

you can use the following code to change color and text     lt org jraf android backport switchwidget Switch                         android id    id th                          android layout width  match parent                          android layout height  wrap content                          app thumb   drawable apptheme switch inner holo light                          app track   drawable apptheme switch track holo light                          app textOn   string switch yes                          app textOff   string switch no                          android textColor   000000                            gt    Create a xml named colors xml in res values folder    lt  xml version  1 0  encoding  utf-8   gt   lt resources gt       lt color name  red  gt  ff0000 lt  color gt       lt color name  green  gt  00ff00 lt  color gt   lt  resources gt    In drawable folder  create a xml file my btn toggle xml      lt selector xmlns android  http   schemas android com apk res android  gt           lt item android state checked  false  android drawable   color red     gt           lt item android state checked  true  android drawable   color green     gt       lt  selector gt    and in xml section defining your toggle button add   android background   drawable my btn toggle   to change the color of textOn and textOffuse   android switchTextAppearance   style Switch

User · Answer

You can use Android Material Components     build gradle   implementation  com google android material material 1 0 0    layout xml    lt com google android material button MaterialButtonToggleGroup         android id    id toggleGroup          android layout width  match parent          android layout height  wrap content          app checkedButton   id btn one way          app singleSelection  true  gt        lt Button             style   style Widget MaterialComponents Button OutlinedButton              android id    id btn one way              android layout width  0dp              android layout weight  1              android layout height  wrap content              android text  One way trip    gt        lt Button             style   style Widget MaterialComponents Button OutlinedButton              android id    id btn round              android layout width  0dp              android layout weight  1              android layout height  wrap content              android text  Round trip    gt    lt  com google android material button MaterialButtonToggleGroup gt

User · Answer

switch   lt androidx appcompat widget SwitchCompat      android layout centerVertical  quot true quot       android layout alignParentRight  quot true quot       app track  quot  drawable track quot       android thumb  quot  drawable thumb quot       android id  quot   id switch1 quot       android layout width  quot wrap content quot       android layout height  quot wrap content quot    gt   thumb 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 false quot          android drawable  quot  drawable switch thumb false quot   gt        lt item android state checked  quot true quot          android drawable  quot  drawable switch thumb true quot   gt    lt  selector gt   track 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 false quot  gt           lt shape android shape  quot rectangle quot  gt                lt size android width  quot 24dp quot  android height  quot 12dp quot    gt               lt solid android color  quot  EFE0BB quot    gt               lt corners android radius  quot 6dp quot    gt           lt  shape gt       lt  item gt        lt item android state checked  quot true quot  gt            lt shape android shape  quot rectangle quot  gt                lt size android width  quot 24dp quot  android height  quot 12dp quot    gt               lt solid android color  quot  color colorPrimary quot    gt               lt corners android radius  quot 6dp quot    gt           lt  shape gt       lt  item gt    lt  selector gt   switch thumb true xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt layer-list xmlns android  quot http   schemas android com apk res android quot  gt        lt item gt           lt shape android shape  quot oval quot  gt               lt solid android color  quot  EFE0BB quot    gt               lt size                 android width  quot 10dp quot                  android height  quot 10dp quot    gt               lt stroke                 android width  quot 2dp quot                  android color  quot  color colorPrimary quot    gt           lt  shape gt       lt  item gt   lt  layer-list gt   switch thumb false xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt layer-list xmlns android  quot http   schemas android com apk res android quot  gt        lt item  gt           lt shape android shape  quot oval quot  gt               lt solid android color  quot  color colorPrimary quot   gt               lt size android height  quot 12dp quot                  android width  quot 12dp quot   gt               lt stroke android color  quot  EFE0BB quot                  android width  quot 2dp quot   gt           lt  shape gt       lt  item gt    lt  layer-list gt

User · Answer

You can use the regular Switch widget and just call setTextOn   and setTextOff    or use the android textOn and android textOff attributes

User · Answer

lt Switch         android thumb   drawable thumb          android track   drawable track          android layout width  wrap content          android layout height  match parent    gt

User · Answer

I achieved this     by doing   1  custom 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 ic switch off            android state checked  false   gt       lt item android drawable   drawable ic switch on            android state checked  true   gt   lt  selector gt    2  using v7 SwitchCompat   lt android support v7 widget SwitchCompat     android layout width  wrap content      android layout height  wrap content      android background   null      android button   drawable checkbox yura      android thumb   null      app track   null   gt

[android] How to custom switch button?

Examples related to android

Examples related to android-button

Examples related to android-styles

Examples related to android-switch