New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
murraycu opened this Issue Oct 27, 2014 · 3 comments

Comments

Projects
None yet
1 participant
@murraycu
Copy link
Owner

murraycu commented Oct 27, 2014

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

This comment has been minimized.

Copy link
Owner

murraycu commented Oct 27, 2014

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:
07b027d

murraycu added a commit that referenced this issue Feb 10, 2015

Add the regular Ripple effect to the buttons.
* app/src/main/res/drawable-v21/question_answer_checkbox_background_ripple.xml:
  Add a ripple drawable for Lollipop and later (API v21) as an alternative
  to question_answer_checkbox_background.xml.
* app/src/main/res/layout-v21/question_answer_button.xml:
  Add this alternative for Lollipop and later, to use the ripple
  background instead of the regular background.

We have to specify this manually, because we have specified a custom
background, to avoid the fake button margins that Android normally
uses via its background drawable.

See github issue:
#2
@murraycu

This comment has been minimized.

Copy link
Owner

murraycu commented Feb 10, 2015

Since this change
a8b3fd4
even the regular buttons (such as Done, or Smooth) didn't have the ripple.
This adds it back to the regular buttons:
39b84ce

@murraycu

This comment has been minimized.

Copy link
Owner

murraycu commented Feb 10, 2015

And this adds the ripple to the ToggleButtons:
65235c5

@murraycu murraycu closed this Feb 10, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment