Cannot render MaterialButton with android.material:1.1.x

Question

Whenever I use MaterialButton, I get the following exception in the xml preview:

java.lang.IllegalArgumentException: java.lang.ClassCastException

I have upgraded to android studio 3.4 and to com.google.android.material:material:1.1.0-alpha05

Version 1.0.0 works but any 1.1.x doesn't.

Is this a problem with the IDE or the library?

-

For reference, the full stacktrace:

java.lang.ClassCastException@d8dc5d1
    at sun.reflect.GeneratedMethodAccessor893.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at android.animation.PropertyValuesHolder_Delegate.callMethod(PropertyValuesHolder_Delegate.java:108)
    at android.animation.PropertyValuesHolder_Delegate.nCallFloatMethod(PropertyValuesHolder_Delegate.java:143)
    at android.animation.PropertyValuesHolder.nCallFloatMethod(PropertyValuesHolder.java)
    at android.animation.PropertyValuesHolder.access$400(PropertyValuesHolder.java:38)
    at android.animation.PropertyValuesHolder$FloatPropertyValuesHolder.setAnimatedValue(PropertyValuesHolder.java:1387)
    at android.animation.ObjectAnimator.animateValue(ObjectAnimator.java:990)
    at android.animation.ValueAnimator.animateBasedOnTime(ValueAnimator.java:1339)
    at android.animation.ValueAnimator.doAnimationFrame(ValueAnimator.java:1471)
    at android.animation.ValueAnimator.pulseAnimationFrame(ValueAnimator.java:1490)
    at android.animation.AnimatorSet.pulseFrame(AnimatorSet.java:1163)
    at android.animation.AnimatorSet.handleAnimationEvents(AnimatorSet.java:1146)
    at android.animation.AnimatorSet.doAnimationFrame(AnimatorSet.java:1046)
    at android.animation.AnimationHandler.doAnimationFrame(AnimationHandler.java:146)
    at android.animation.AnimationHandler.access$100(AnimationHandler.java:37)
    at android.animation.AnimationHandler$1.doFrame(AnimationHandler.java:54)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)
    at android.view.Choreographer.doCallbacks(Choreographer.java:761)
    at android.view.Choreographer_Delegate.doFrame(Choreographer_Delegate.java:66)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.renderAndBuildResult(RenderSessionImpl.java:563)
    at com.android.layoutlib.bridge.impl.RenderSessionImpl.render(RenderSessionImpl.java:425)
    at com.android.layoutlib.bridge.BridgeRenderSession.render(BridgeRenderSession.java:120)
    at com.android.ide.common.rendering.api.RenderSession.render(RenderSession.java:151)
    at com.android.ide.common.rendering.api.RenderSession.render(RenderSession.java:133)
    at com.android.tools.idea.rendering.RenderTask.lambda$null$8(RenderTask.java:755)
    at java.util.concurrent.CompletableFuture$AsyncSupply.run(CompletableFuture.java:1590)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)

EDIT This happens only when the button style is not set OR the defaulted:

@style/Widget.MaterialComponents.Button

Setting as unelevated style works for example, so as a work around I'm using the tools namespace to show unelevated button style.

Edit 2 the app theme parent is already correctly set as Theme.AppCompat.Light.DarkActionBar. This is an IDE issue as it is running well on my emulator and device. I have also done a clear cache & invalidate, clean build, rebuild... (the standard things we do when faced with weird IDE problems)

Edit 3 Still no luck with the latest A.S. 3.4.1!

Answer 1

Update3: This is finally fixed in Studio 3.5beta2! We did it guys! 🥳

Update2: I've filed an issue here: https://issuetracker.google.com/issues/132562197. Please star for visibility.

Update: This is a cleaner workaround since we don't have to litter tools:style throughout our xml layouts. This has stopped working for me for no apparent reason, I've had to revert to my original workaround described below.

---

Here's a workaround till we get an actual fix, based on Gautham's discovery:

Add this style to your styles.xml:

<!--  For the sake of xml preview not breaking  -->
    <style name="UnelevatedButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">
    </style>

Add it to your Buttons like so:

<Button
        ...
        tools:style="@style/UnelevatedButton"
        style="@style/ActualButtonStyle"
        />

Note that the ordering of the two is important, the tools line needs to come first.

You can update your UnelevatedButton to match your ActualButtonStyle for the sake of having previews consistent with your actual runtime buttons.

Answer 2

I'm attempting to reproduce this issue currently, but I need more information. My current hypothesis is that it's related to button elevation (based on the animation calls in the stacktrace), which is also why unelevated button works as expected.

Could you please file an issue at https://issuetracker.google.com/issues/new?component=439535&template=1121918 with the component name and description, as well as the information requested there?

Answer 3

amitav13's solution has one major problem, when you reformat the code the default rules will rearrange all the attributes and then everything breaks again.

Instead, until this is fixed, my proposal is to create a separate application theme for using in preview windows, in this example this Theme is called AppTheme.PreviewFix. Simply select this theme in Preview / Design panes.

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <attr name="buttonStyle" format="reference" />
</resources>

styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="buttonStyle">@style/AppTheme.Button</item>
    </style>

    <style name="AppTheme.PreviewFix" parent="AppTheme">
        <item name="buttonStyle">@style/AppTheme.Button.PreviewFix</item>
    </style>

    <style name="AppTheme.Button" parent="Widget.MaterialComponents.Button"/>

    <style name="AppTheme.Button.PreviewFix" parent="Widget.MaterialComponents.Button.UnelevatedButton"/>
</resources>

my_layout.xml

<com.google.android.material.button.MaterialButton
        style="?buttonStyle"
        ...
</com.google.android.material.button.MaterialButton>