android layout for older devices

Question

I am totally new in android programming and I was messing around a bit with lay-outs in order to be able to produce an app for an old (android 2.3.3) device. I messed around a lot in the GUI editor in android studio to make (in my opinion) a pretty nice looking GUI. I only then noticed that I was working in API 23. This resulted in a completely messed up GUI for my old device (API 10) and then I started changing everything so that it would look at least as nice for the device I want to develop for.

I worked with a vertically oriented LinearLayout, put some TextViews and a Chronometer in there and the big finale (the cause of my problems) a ToggleButton that changed color as it was clicked. My code for that ToggleButton looks as follows:

<ToggleButton android:id="@+id/toggleButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_margin="10dip"
    android:enabled="true"

    android:background="@drawable/toggle_button"
    android:button="@android:drawable/ic_btn_speak_now"
    android:buttonTint="#FFFFFF"


    android:textAllCaps="false"
    android:textOn="@string/toggle_on"
    android:textOff="@string/toggle_off"
    android:textColor="#FFFFFF"
    android:gravity="center" />

In this code fragment ic_btn_speak_now is some speaker-icon I found in the system-drawables. toggle_button on the other hand was written by me and looks as follows:

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

        <solid android:color="@drawable/toggle_color" />
        <corners android:radius="5dip" />
</shape>

where toggle_color on its turn looks like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#669900"
        android:state_checked="true" />
    <item android:color="#cc0000"
        android:state_checked="false" />
</selector>

This leads to this very nice looking button which works perfectly for API 23, but fails to work for API 10.

I've been looking around already quite a lot and everywhere there are other solutions and other reasons for why certain things don't work. I tried multiple things, but nothing turned out to work. I even omitted the nice shape of my button in the hope I would manage to achieve the color-changing, but I didn't manage to do that either.

My question could thus be asked as follows:

1. What makes that my code does not work for API 10?
2. How could I get my beloved buttons work for API 10?

Every bit of help is appreciated.

Answer 1

I don't know why my code did not work, but I managed to solve it quite easily by changing the shape programmatically. Therefore I made 2 shapes (for each colour one) in my res/drawable folder as follows:

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

        <solid android:color="#cc0000" />
        <corners android:radius="5dip" />
</shape>

This would then be red_toggle.xml and I did the same with another colour to make green_toggle.xml. My ToggleButton was altered to call a onToggle() method when clicked and eventually looked like:

<ToggleButton android:id="@+id/toggleButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_margin="10dip"
    android:onClick="onToggle"

    android:padding="15dp"
    android:background="@drawable/toggle_button"
    android:button="@android:drawable/ic_btn_speak_now"
    android:buttonTint="#FFFFFF"

    android:textAllCaps="false"
    android:textOn="@string/toggle_on"
    android:textOff="@string/toggle_off"
    android:textColor="#FFFFFF"
    android:gravity="center" />

In my Activity, I then have this method onToggle() which does the following:

public void onToggle(View view) {
    //only togglebutton should be calling this method
    if(((ToggleButton) view).isChecked()) {
        toggle.setBackgroundResource(R.drawable.red_toggle);
    } else {
        toggle.setBackgroundResource(R.drawable.green_toggle);
    }
}

and that was actually all I needed...