How to create a custom toggle button with an image on it that also scales correctly for each density in android

Question

Here's what i'm trying to do:

• Create a toggle button.
• The toggle button's background color will be one color when on, one color when off.
• The toggle button will have an image centered over everything.
• The toggle button may have 3 on states, off, on, on, on, wherein each on state is for greater sensitivity for example and I may want to show that in the button some how.
• I'd like the button dimensions dialed in exactly for mdpi and have it scale for all other densities.
• I want the image centered on the button to stretch too using the appropriate density image of course.

What would be the cleanest approach to do all of this, least number of headaches and most compatible for devices? Is making the entire button background an image best? One for the on state and one for the off for each density. Would using a button and overlaying an image onto it be a better approach and control the buttons background color property for the on/off states? Maybe creating an XML in the "drawable" folder is an option.

Answer 1

Android has a pretty specific way to deal with the various pixel-densities of android phones which is to provide a separate bitmap for each pixel-density-category you wish to support (extra-high, high, medium..)

Please view this page for how to support multiple pixel densities with your images. http://developer.android.com/training/multiscreen/screendensities.html

Answer 2

Even the built in two-state toggle button requires an onClick method to handle click events, for that reason I would argue that it is no more complex to have a regular button which handles visual toggling in an onClick method of its own.

Since you want the option of using images I will use an ImageButton for the example.

The XML for an ImageButton with a custom color:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/toggleButton"
    android:layout_marginTop="152dp"
    android:layout_centerHorizontal="true"
    android:src="@drawable/state0"
    android:onClick="onToggleClick"
    android:background="@color/red"/>

Color assets should be defined in a new XML values file ( see http://developer.android.com/guide/topics/resources/more-resources.html#Color)

The onClick method to handle toggling the visuals of the button looked like this in the example I built for myself:

public void onToggleClick(View view){
    toggleState = (toggleState+1)%3;
    switch(toggleState){
        case 0:
            toggleButton.setImageResource(R.drawable.state0);
            toggleButton.setBackgroundColor(0xffff0000);
            break;
        case 1:
            toggleButton.setImageResource(R.drawable.state1);
            toggleButton.setBackgroundColor(0xff00ffff);
            break;
        case 2:
            toggleButton.setImageResource(R.drawable.state2);
            toggleButton.setBackgroundColor(0xffff00ff);
            break;
    }
}

Please don't hardcode the colors as hex values, make variables for them, in your final project.

For reference hex colors are in the form of 0xAARRGGBB

To the comment:

If you would like to pair text and an image on the same button android supports that in XML. It would look something like this to have an icon to the left of a button:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_text"
android:drawableLeft="@drawable/button_icon"
... />
source: http://developer.android.com/guide/topics/ui/controls/button.html

But then you wouldn't be able to switch the image with the method of the ImageButton class.