Android SDK 23: ToggleButton transparent in old Android versions

Question

I'm using some Toggle buttons in my app with the latest Android SDK 23.1.1. I've just tested on a Samsung Tab 1 tablet with Android 4.0.4 and another tablet with Android 4.2.2, and can see that my Toggle buttons are half transparent in those versions.

A test in a modern Sony Xperia (5.1.1) tablet shows these buttons correctly.

4.0.4 and 4.2.2 units:

5.1.1 unit:

My layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/layout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/layout_info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">

            <TextView
                android:id="@+id/text_rute_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="Indlæser ruter"
                android:textSize="22sp"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/image_running"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="5dp"
                android:src="@drawable/run_stop" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/layout_map"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/layout_info"
            android:background="@color/accent"
            android:paddingTop="1dp">

            <dk.gis34.openlayers.GIS34MapView
                android:id="@+id/map_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </RelativeLayout>

        <LinearLayout
            android:id="@+id/layout_plov_salt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/layout_button"
            android:orientation="vertical"
            android:paddingLeft="5dp">

            <ToggleButton
                android:id="@+id/button_plov"
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:drawableRight="@drawable/toggle"
                android:textOff="Plov Fra"
                android:textOn="Plov Til" />

            <ToggleButton
                android:id="@+id/button_salt"
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:drawableRight="@drawable/toggle"
                android:textOff="Salt Fra"
                android:textOn="Salt Til" />
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/layout_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:paddingBottom="5dp">

            <Button
                android:id="@+id/button_logging"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="START"
                android:textSize="18sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/button_stop"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:text="AFSLUT"
                android:textSize="18sp"
                android:textStyle="bold" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

Any ideas? Thanks

Answer 1

Wow, these were some silent 24 hours... There's probably no good answer to this question but a workaround.

Well, here is mine. I've dropped the ToggleButtons and made a simple implementation with normal Buttons.

Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/layout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/layout_info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">

            <TextView
                android:id="@+id/text_rute_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="Indlæser ruter"
                android:textSize="22sp"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/image_running"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="5dp"
                android:src="@drawable/run_stop" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/layout_map"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/layout_info"
            android:background="@color/accent"
            android:paddingTop="1dp">

            <dk.gis34.openlayers.GIS34MapView
                android:id="@+id/map_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </RelativeLayout>

        <LinearLayout
            android:id="@+id/layout_plov_salt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/layout_button"
            android:orientation="vertical"
            android:paddingLeft="5dp">

            <Button
                android:id="@+id/button_plov"
                android:layout_width="125dp"
                android:layout_height="wrap_content"
                android:drawableRight="@drawable/toggle_off"
                android:textStyle="bold" />

            <Button
                android:id="@+id/button_salt"
                android:layout_width="125dp"
                android:layout_height="wrap_content"
                android:drawableRight="@drawable/toggle_off"
                android:textStyle="bold" />
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/layout_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp">

            <Button
                android:id="@+id/button_logging"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="START"
                android:textSize="18sp"
                android:textStyle="bold" />

            <Button
                android:id="@+id/button_stop"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:text="AFSLUT"
                android:textSize="18sp"
                android:textStyle="bold" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

Code:

m_ButtonPlov.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {

        boolean plov = !(m_Pref.getBoolean("PLOV", false));
        m_Editor = m_Pref.edit();
        m_Editor.putBoolean("PLOV", plov);
        m_Editor.apply();

        updateUI();
    }
});

m_ButtonSalt.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {

        boolean salt = !(m_Pref.getBoolean("SALT", false));
        m_Editor = m_Pref.edit();
        m_Editor.putBoolean("SALT", salt);
        m_Editor.apply();

        updateUI();
    }
});

private void updateUI() {
    boolean plov = m_Pref.getBoolean("PLOV", false);
    if (plov) {
        m_ButtonPlov.setText("Plov til");
        m_ButtonPlov.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.toggle_on, 0);
    } else {
        m_ButtonPlov.setText("Plov fra");
        m_ButtonPlov.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.toggle_off, 0);
    }

    boolean salt = m_Pref.getBoolean("SALT", false);
    if (salt) {
        m_ButtonSalt.setText("Salt til");
        m_ButtonSalt.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.toggle_on, 0);
    } else {
        m_ButtonSalt.setText("Salt fra");
        m_ButtonSalt.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.toggle_off, 0);
    }
}

Result: