No compatibility with MdcTheme

[davidvavra]

We are using MdcTheme for theme compatibility between our XML-UI and Compose UI. Clicking on section in Showkase UI crashes the app with this exception:

java.lang.IllegalArgumentException: createMdcTheme requires the host context's theme to extend Theme.MaterialComponents
        at com.google.android.material.composethemeadapter.MdcTheme.createMdcTheme(MdcTheme.kt:167)
        at com.google.android.material.composethemeadapter.MdcTheme.createMdcTheme$default(MdcTheme.kt:156)
        at com.google.android.material.composethemeadapter.MdcTheme.MdcTheme(MdcTheme.kt:91)
        at com.jll.jet.common.ui.theme.JetPreviewKt.JetPreview(JetPreview.kt:12)

I could workaround the issue with overriding the theme in AndroidManifest.xml like this:

<activity
  android:name="com.airbnb.android.showkase.ui.ShowkaseBrowserActivity"
  android:label="ShowkaseBrowserActivity"
  android:theme="@style/Theme.Jet"
  tools:replace="android:theme" />

(Theme.Jet inherits from Theme.MaterialComponents)

I'm wondering if the library itself could support this.

[vinaygaba]

We actually have a test to verify exactly this - https://github.com/airbnb/Showkase/blob/0106b8bfa60b6a0bac32840a00d1fa67c6045f38/showkase-browser-testing/src/main/java/com/airbnb/android/showkase_browser_testing/TestComposables.kt#L14

Not sure if you were doing something different 🤔

[davidvavra]

I have tried the exact composable from the test in our app (without the workaround):

E: FATAL EXCEPTION: main
    Process: com.jll.mya.dev, PID: 10324
    java.lang.IllegalArgumentException: createMdcTheme requires the host context's theme to extend Theme.MaterialComponents
        at com.google.android.material.composethemeadapter.MdcTheme.createMdcTheme(MdcTheme.kt:167)
        at com.google.android.material.composethemeadapter.MdcTheme.createMdcTheme$default(MdcTheme.kt:156)
        at com.google.android.material.composethemeadapter.MdcTheme.MdcTheme(MdcTheme.kt:91)
        at com.jll.jet.common.ui.view.loading.ScreenLoadingKt.TestComposable1(ScreenLoading.kt:30)

[davidvavra]

The root cause is that your activity has a theme Theme.App.NoActionBar which doesn't inherit from Theme.MaterialComponents

[borsini]

@davidvavra did you find a solution (other than the Manifest one) to setup a MaterialTheme in the showkase browser?

[davidvavra]

@borsini See the workaround I mention in the first post

[vinaygaba]

Trying to figure out what the right solution here should be. I feel like even if I were to inherit Material, it would still break if you were using a custom Theme. So the correct solution to me is overriding the Activity theme in the manifest like @davidvavra pointed out above.

<activity
  android:name="com.airbnb.android.showkase.ui.ShowkaseBrowserActivity"
  android:label="ShowkaseBrowserActivity"
  android:theme="@style/YOUR_THEME"
  />

Any thoughts or alternate suggestions @davidvavra @borsini??

[davidvavra]

I think the Activity theme should inherit from Theme.MaterialComponents by default. It could break when using a custom theme, but then you are probably aware of it. But I don't see a point of setting a custom theme. The Activity has its own design and it doesn't have to look similar to the host app.