Can you set the background color on a toggle button without covering up the toggle?

Question

I have a ToggleButton. I want the background to be clear, like in the default alarm app for the days of the week. The code below covers the toggle with the clear color. Is there any way to keep the toggle and change the background color without rolling my own toggle button? If not, that would be pretty poorly throughout, imo. Also, do I really have to define a clear color here or is there a built in clear color I could be using in my xml?

 <ToggleButton
    android:background="@drawable/clear_toggle_button"
    android:id="@+id/btn_sunday"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:textOn="SUN"
    android:textOff="SUN"
/>

This is my colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="clear">#ffffff00</color>
</resources>

This is my color state list xml in the drawable folder.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_focused="true"
        android:state_pressed="false"
        android:drawable="@color/clear" />
    <item
        android:state_focused="true"
        android:state_pressed="true"
        android:drawable="@color/clear" />
</selector>

Mcmillian

Answer 1

I want the background to be clear..

Transparent? Yes, android does have a color defined for that. You can access it as:

@android:color/transparent

Or, in code:

Color.TRANSPARENT

@android:color/transparent is defined in res/values/colors.xml:

<color name="transparent">#00000000</color>

The alpha bits (first and second) are zero.

But, your definition for color clear:

<color name="clear">#ffffff00</color>

is not transparent. You can visualize transparent as any color with its alpha set to zero. In your definition of clear, the alpha bits are full-blown to ff - 255 - opaque.

Your color definition produces this:

Is there any way to keep the toggle and change the background color without rolling my own toggle button?

The thing is: the background color and the toggle is one drawable. The whole 'on' state is represented by one single drawable, and so is the 'off' state. You cannot simply change the color without losing the toggle feedback. To change anything about the default ToggleButton's background, you will have to provide alternate drawables for each state.

I want the background to be clear, like in the default alarm app for the days of the week..

Setting the background to transparent will not work then. I would suggest that you go through the source code and resources involved in the making of a ToggleButton. For example, the on and off states of a ToggleButton are represented by drawable resources. So, if you decide to change the background, you will need to provide ToggleButton with at least two drawables: one for each state.

Look at how the default alarm app does it. The ToggleButtons being used for days are defined as:

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_gravity="center"
    android:padding="0dp"
    style="@style/body"
    android:textColor="@color/clock_gray"
    **android:background="@drawable/toggle_underline"**
    android:clickable="false"
    android:singleLine="true"/>

The drawable toggle_underline is a state-selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:state_window_focused="true"
          android:drawable="@drawable/toggle_underline_activated"/>
    <item android:state_checked="true"
          android:drawable="@drawable/toggle_underline_activated"/>
    <item
          android:drawable="@drawable/toggle_underline_normal"/>
</selector>

As you can see, when the ToggleButton is set to on or checked ( or when it is pressed), @drawable/toggle_underline_activated is set to the background. Otherwise, @drawable/toggle_underline_normal is used - state is off.

toggle_underline_activated and toggle_underline_normal are both 9-patch drawables.

toggle_underline_activated.9.png:

toggle_underline_normal.9.png:

You can get these drawables (and more) here: Link.

So, you can either create your own 9 patch drawables with transparent background, and use them with a state-selector drawable - or you can look at the default alarm clock project and use the drawables from its drawable-XXXX folders.

Apocynthion

Nice. Oops, mixed up my alpha bytes. Where do you find the code for the alarm app? I thought it was closed source for some reason. ALso, I made my own colors.xml. Is it supposed to be generated automatically when creating a new project? – Mcmillian

@TylerPfaff I think colors.xml auto-generation is IDE dependent: in case of Android Studio, the file is not generated for you. From what I can remember, eclipse does create colors.xml when you start a new project. – Apocynthion

@TylerPfaff The alarm app is open source. Go here: Link. Look for platform/packages/apps/DeskClock. You will also find source for other android apps at that link. – Apocynthion

@TylerPfaff By the way, the filename colors.xml does not dictate that all colors must go there. Even if you create a file named abracadabra.xml, add a <color></color> definition within <resources></resources> tags, you can still use this color without any objection from android. – Apocynthion

Answer 2

If you want to just change the color of the ToggleButton without losing its "Toggle" the way I found is to create a theme for it on your style.xml:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/primary_dark</item>
    <item name="android:textColor">@color/accent</item>
</style>

Then on the xml of your button just set the theme:

    <ToggleButton
            android:id="@+id/part2"
            android:layout_width="60dp"
            android:layout_height="wrap_content"
            android:textOff="B"
            android:textOn="B"
            android:theme="@style/AppTheme.Button"/>

With this I've set the color of the button to my primary_dark color while maintaining it's toggle appearence.

Hope it may help someone.

Waits

Answer 3

Try this

<ToggleButton android:background="@color/buttoncolor" android:id="@+id/togglebutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOn="ON" android:textOff="OFF"/>

Create values/color.xml

<color name="buttoncolor">#FF4000</color>

Lishalishe

No this doesn't work, that was the crux of the question. – Mcmillian