Android Switch Widget: Setting android:track causes thumb and track to not show up

Question

I am having trouble customizing the look of an Android Switch widget. I have custom xml drawables that I want to use for the thumb (the little button part that usually says On or Off) and the track (the background that the thumb slides across). When I set just the thumb using android:thumb, it works fine. When I set the track (whether or not the thumb is set), the switch disappears entirely and I'm left with only the text showing.

Here is my code when just the thumb is applied:

<com.blahblahblah.blah.CustomSwitch
    android:id="@+id/switch_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="Off"
    android:textOn="On"
    android:text="Something Awesome"
    android:textColor="@android:color/black"
    android:thumb="@drawable/custom_switch_thumb" />

Here is what it looks like in the preview window:

And with the track applied:

<com.blahblahblah.blah.CustomSwitch
    android:id="@+id/switch_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textOff="Off"
    android:textOn="On"
    android:text="Something Awesome"
    android:textColor="@android:color/black"
    android:track="@color/track_color" />

Preview window with track applied:

For reference I am using Android Studio 0.2.3 on OSX 10.7.5.

Answer 1

I just stumbled upon the same problem and found a fix through on the HoloEverywhere issue tracker. You'll need to set the <size> of the drawable XML shape you are using.

Not working (the widget is there and I can interact with it, but I can't see it, it's hidden):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">

  <solid android:color="@color/black_50" />
</shape>

Working (not the added <size>):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">

  <solid android:color="@color/black_50" />
  <size android:width="56dp" android:height="20dp" />
</shape>