murraycu / android-galaxyzoo

This Android app lets you classify Galaxy Zoo subjects. It is available in the Google Play Store: https://play.google.com/store/apps/details?id=com.murrayc.galaxyzoo.app . Try beta versions early here: https://play.google.com/apps/testing/com.murrayc.galaxyzoo.app . See also the iPhone app for Galaxy Zoo: https://github.com/murraycu/ios-galaxyzoo/
GNU General Public License v3.0
11 stars 13 forks source link

Material design: ToggleButtons don't have the ripple effect #2

Closed murraycu closed 9 years ago

murraycu commented 9 years ago

On the "Odd" question, there are toggle buttons for "Ring", "Lens or arc", etc. When running on Android 5.0 (API 21) these should have the ripple effect. A ToggleButton with the normal style would have the ripple effect, but ours doesn't because we have specified a different background for the checked state, by using a style, because the default style is so unsuitable:

    <style name="GalaxyZooToggleButtonStyle" parent="GalaxyZooButtonStyle">
        <item name="android:background">@drawable/question_answer_checkbox_background</item>
    </style>

https://github.com/murraycu/android-galaxyzoo/blob/master/app/src/main/res/values/styles.xml#L77

whose background drawable is a :

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Strangely, we need to use android:drawable, not android:color even when specifying
    a color. -->
    <item android:state_checked="true"
        android:drawable="@color/color_accent" />
    <!-- Default State -->
    <item android:drawable="@android:color/transparent" />
</selector>

https://github.com/murraycu/android-galaxyzoo/blob/master/app/src/main/res/drawable/question_answer_checkbox_background.xml

That style is specified in the ToggleButton's layout XML: https://github.com/murraycu/android-galaxyzoo/blob/master/app/src/main/res/layout/question_answer_checkbox.xml

It works for the regular buttons, such as "Done", which just uses: style="?android:attr/borderlessButtonStyle" in it's layout xml: https://github.com/murraycu/android-galaxyzoo/blob/master/app/src/main/res/layout/question_answer_button.xml Incidentally, we don't use a style for that because there is no way to use an attribute (the borderlessButtonStyle) as a style parent.

murraycu commented 9 years ago

I dug around in the Android themes and styles to try to understand how the ripple works on normal buttons, and tried to do something similar, but all I get is the normal button ripple with no visible checked state, even if my selector is nearly empty: https://github.com/murraycu/android-galaxyzoo/commit/07b027d4bf51ff9e964a3fcecf4413c613868652

murraycu commented 9 years ago

Since this change https://github.com/murraycu/android-galaxyzoo/commit/a8b3fd474cb4792473654077a8e42d5be1055868 even the regular buttons (such as Done, or Smooth) didn't have the ripple. This adds it back to the regular buttons: https://github.com/murraycu/android-galaxyzoo/commit/39b84cece2f383eaa86d3abcb4f8313379705765

murraycu commented 9 years ago

And this adds the ripple to the ToggleButtons: https://github.com/murraycu/android-galaxyzoo/commit/65235c5df272e8015aee7f73f32a0901de6dfc38