Android: create a toggle button with an image and no text.

Question

Is it possible to create a toggle button on Android that has an image but no text? Ideally, it would look like this:

I saw similar entries in which the answer was to change the background, but I want to save the Holo Light layout and just change the text with the image.

I need to be able to programmatically change the image source,

Any ideas how I will do this?

If this is not possible, is there a way in which you can turn the regular button on and off?

Answer 1

• Is it possible to replace the switching text with an image

  No, we cannot, although we can hide the text by overriding the default style of the toggle button, but still this will not give us the toggle button that you want, since we cannot replace the text with an image.

• How to make a normal toggle button

  Create ic_toggle file in res/drawable

   <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@drawable/ic_slide_switch_off" /> <item android:state_checked="true" android:drawable="@drawable/ic_slide_switch_on" /> </selector> 

  Here @drawable/ic_slide_switch_on and @drawable/ic_slide_switch_off create the images.

  Then create another file in the same folder, name it ic_toggle_bg

   <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+android:id/background" android:drawable="@android:color/transparent" /> <item android:id="@+android:id/toggle" android:drawable="@drawable/ic_toggle" /> </layer-list> 

  Now add to your own theme (if you do not have one styles.xml file in the res/values/ folder)

   <style name="Widget.Button.Toggle" parent="android:Widget"> <item name="android:background">@drawable/ic_toggle_bg</item> <item name="android:disabledAlpha">?android:attr/disabledAlpha</item> </style> <style name="toggleButton" parent="@android:Theme.Black"> <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item> <item name="android:textOn"></item> <item name="android:textOff"></item> </style> 

  This creates a custom toggle button for you.

• How to use it

  Use your style and background in your presentation.

    <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"/> 

Answer 2

ToggleButton inherits from TextView so you can display drawings on four borders of text. You can use this to display the icon you want on top of the text and hide the actual text

 <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" /> 

The result compared to the usual ToggleButton looks like

The second parameter should use ImageSpan to actually replace the text with an image. It looks a little better since the icon is in the correct position, but cannot be done directly with the xml layout.

You create a simple ToggleButton

 <ToggleButton android:id="@+id/toggleButton3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="false" /> 

Then set the "text" programmatically

 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 is in the middle here - the icon is located a little lower, as it replaces the text.

Answer 3

create toggle_selector.xml in res / drawable

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

apply selector to the toggle button

 <ToggleButton android:id="@+id/chkState" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/toggle_selector" android:textOff="" android:textOn=""/> 

Note: to remove the text that I used in the above code

 textOff="" textOn="" 

Answer 4

I know that this is a little late, however for all who are interested, I created a custom component, which basically is an image selector button, available for drawing state, as well as background

https://gist.github.com/akshaydashrath/9662072