Android selector with image and text

Question

I have a button which I give a color, image and text like this:

android:background="@color/green"
android:drawableLeft="@drawable/custom_routes_start_button_icon"
android:text="@string/custom_route_start"

This is the unselected state and want the selected state to be something like this:

android:background="@color/red"
android:drawableLeft="@drawable/custom_routes_stop_button_icon"
android:text="@string/custom_route_stop"

For all I know its not possible to give an item in selector a text or drawableLeft (only drawable). Does anybody know a nice way to achieve this? Maybe another xml file where te selector could refer too?

Answer 1

I'm not sure if ToggleButton(or even checkbox) would fit your use case. You can indeed use selector for your drawable(left,right,top,bottom), use a background with selctor and even different text for your two states.

In effect you can define a selector one for your background (/res/color/custom_color.xml)

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

and one for your drawableLeft(/res/drawable/custom_drawable.xml).

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

and finally your ToggleButton definition as

android:background="@color/custom_color"
android:drawableLeft="@drawable/custom_drawable"
android:textOn="@string/custom_route_start"
android:textOff="@string/custom_route_stop"

You might have to play with styles to make it appear as you want.

Though this is a late answer,hope someone finds it useful.

Answer 2

You should use two Buttons and only ever show one of them. Use android:visibility in XML and setVisibility() to show/hide the buttons.

So, at first make the start button visible and hide the stop button. When the user presses the start button, hide the start button and show the stop button. When the user presses the stop button, hide it and show the start button again.

Answer 3

you can change this by code:

write below code in xml file:

 android:background="@color/green"
 android:drawableLeft="@drawable/custom_routes_start_button_icon"
 android:text="@string/custom_route_start" 

and on buttonClick event:

    yourButton = (TextView) findViewById(R.id.yourButton);

    yourButton.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            Drawable checkImg = getApplicationContext().getResources().getDrawable(
                       R.drawable.custom_routes_stop_button_icon);
            yourButton.setCompoundDrawablesWithIntrinsicBounds(checkImg, null, null,
            null);
            yourButton.setBackgroundColor(red);
            yourButton.setText(custom_route_stop);
        }
    });

you can also place this code onTouchlistener:

 yourButton.setOnTouchListener(new OnTouchListener() {
        boolean isTouch = false;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                Drawable checkImg = getApplicationContext().getResources().getDrawable(
                       R.drawable.custom_routes_stop_button_icon);
                yourButton.setCompoundDrawablesWithIntrinsicBounds(checkImg, null, null, null);
                yourButton.setBackgroundColor(red);
                yourButton.setText(custom_route_stop);  
            }
            else {
                Drawable checkImg = getApplicationContext().getResources().getDrawable(
                       R.drawable.custom_routes_start_button_icon);
                yourButton.setCompoundDrawablesWithIntrinsicBounds(checkImg, null, null, null);
                yourButton.setBackgroundColor(green);
                yourButton.setText(custom_route_start);
            }
            return false;
        }
    });