Android Create a toggle button with image and no text

Question

is it possible to create a toggle button in Android that has an image but no text  Ideally it would look like this   Ive seen similar posts where the answer was to change the background but i want to preserve the Holo Light layout and just swap the text with an image  I need to be able to programaticallly change the image source  Any ideas how i would make this  If this cant be done  is there a way i can make a normal button toggle on and off

User · Answer

I know this is a little late  however for anyone interested  I ve created a custom component that is basically a toggle image button  the drawable can have states as well as the background  https   gist github com akshaydashrath 9662072

User · Answer

ToggleButton inherits from TextView so you can set drawables to be displayed at the 4 borders of the text  You can use that to display the icon you want on top of the text and hide the actual text   lt ToggleButton     android id    id toggleButton1      android layout width  wrap content      android layout height  wrap content      android drawableTop   android drawable ic menu info details      android gravity  center      android textOff        android textOn        android textSize  0dp    gt    The result compared to regular ToggleButton looks like    The seconds option is to use an ImageSpan to actually replace the text with an image  Looks slightly better since the icon is at the correct position but can t be done with layout xml directly   You create a plain ToggleButton   lt ToggleButton     android id    id toggleButton3      android layout width  wrap content      android layout height  wrap content      android checked  false    gt    Then set the  text  programmatially  ToggleButton button    ToggleButton  findViewById R id toggleButton3   ImageSpan imageSpan   new ImageSpan this  android R drawable ic menu info details   SpannableString content   new SpannableString  X    content setSpan imageSpan  0  1  Spanned SPAN EXCLUSIVE EXCLUSIVE   button setText content   button setTextOn content   button setTextOff content     The result here in the middle - icon is placed slightly lower since it takes the place of the text

User · Answer

Can I replace the toggle text with an image   No  we can not  although we can hide the text by overiding the default style of the toggle button  but still that won t give us a toggle button you want as we can t replace the text with an image    How can I make a normal toggle button   Create a file ic toggle in your res drawable folder       lt selector xmlns android  http   schemas android com apk res android  gt        lt item android state checked  false            android drawable   drawable ic slide switch off    gt        lt item android state checked  true            android drawable   drawable ic slide switch on    gt    lt  selector gt    Here  drawable ic slide switch on  amp   drawable ic slide switch off are images you create   Then create another file in the same folder  name it ic toggle bg   lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android  gt        lt item android id    android id background              android drawable   android color transparent    gt        lt item android id    android id toggle            android drawable   drawable ic toggle    gt    lt  layer-list gt    Now add to your custom theme   if you do not have one create a styles xml file in your res values folder    lt style name  Widget Button Toggle  parent  android Widget  gt      lt item name  android background  gt  drawable ic toggle bg lt  item gt      lt item name  android disabledAlpha  gt  android attr disabledAlpha lt  item gt   lt  style gt    lt style name  toggleButton   parent   android Theme Black  gt      lt item name  android buttonStyleToggle  gt  style Widget Button Toggle lt  item gt      lt item name  android textOn  gt  lt  item gt      lt item name  android textOff  gt  lt  item gt   lt  style gt    This creates a custom toggle button for you  How to use it   Use the custom style and background in your view      lt ToggleButton         android id    id toggleButton          android layout width  wrap content          android layout height  match parent          android layout gravity  right          style   style toggleButton          android background   drawable ic toggle bg   gt

User · Answer

create toggle selector xml in res drawable   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 toggle on  android state checked  true   gt     lt item android drawable   drawable toggle off  android state checked  false   gt   lt  selector gt    apply the selector to your toggle button   lt ToggleButton             android id    id chkState              android layout width  wrap content              android layout height  wrap content              android background   drawable toggle selector              android textOff                android textOn     gt    Note  for removing the text i used following in above code  textOff    textOn

[android] Android: Create a toggle button with image and no text

Examples related to android

Examples related to customization

Examples related to togglebutton