material-components / material-components-android-motion-codelab

Codelab: Building Beautiful Transitions with Material Motion for Android

The Material motion system for Android is a set of transition patterns within the MDC-Android library that can help users understand and navigate an app, as described in the Material Design guidelines.

This repo houses the source for the Material motion system codelab, during which you will build Material transitions into an example email app called Reply.

The starter code is available on the default develop branch, and the complete code is available on the complete branch, which can you can checkout by running git checkout complete.

material-components-android-motion-codelab's Issues

Project is far too out-of-date to be useful

After checking out the project with the github url, the project was unable to compile due to incompatibility with new kotlin versions. I updated all the versions within the project, but then the Transformations classes and other weren't available. This entire course needs to be refreshed with more recent version of Kotlin, Transformations, etc.

HTML not parsed correctly in the documentation

Seems like the > symbol is getting escaped in the documentation at Get familiar with the sample app code page.

screenshot:

How would this work with Compose?

Since I am having a hybrid application at the moment, I need to use Material Motion with Fragments. (Motion isn't out yet for Compose anyways I think) I followed the exact same steps as in the Codebase, but I get the following error:

java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from android.view.ViewOverlay

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    sharedElementEnterTransition = MaterialContainerTransform().apply {
        drawingViewId = R.id.nav_host_fragment
        duration = resources.getInteger(R.integer.tempory_motion_duration_large).toLong()
        scrimColor = Color.TRANSPARENT
        setAllContainerColors(requireContext().themeColor(R.attr.colorSurface))
    }
}

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    return inflater.inflate(
        R.layout.fragment_add_visit, container, false
    ).apply {
        findViewById<ComposeView>(R.id.compose_view).setContent {
            MyTheme {
                ...
            }
        }
    }
}

MenuBottomSheetDialogFragment runtime exception

This Fragment has not the default constructor, so when config-changes occur, the exception is caused.

/com.materialstudies.reply E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.materialstudies.reply, PID: 18131
    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.materialstudies.reply/com.materialstudies.reply.ui.MainActivity}: androidx.fragment.app.Fragment$InstantiationException: Unable to instantiate fragment com.materialstudies.reply.ui.MenuBottomSheetDialogFragment: could not find Fragment constructor

Appcompat:1.3.0 causing crash

When updating to 'androidx.appcompat:appcompat:1.3.0' the email item to detail screen transition crashes. One of my other app uses 1.3.0 and runs fine but when I add an extra layout or even a menu with more than two items the app crashes. In case of the codelab example app this only happens after updating to appcompat:1.3.0. Also the crash does not apply to every email to detail transition.

java.lang.IndexOutOfBoundsException: Index: 6, Size: 6 at java.util.ArrayList.get(ArrayList.java:437) at androidx.fragment.app.FragmentTransitionImpl.setNameOverridesReordered(FragmentTransitionImpl.java:183) at androidx.fragment.app.DefaultSpecialEffectsController.startTransitions(DefaultSpecialEffectsController.java:665) at androidx.fragment.app.DefaultSpecialEffectsController.executeOperations(DefaultSpecialEffectsController.java:114) at androidx.fragment.app.SpecialEffectsController.executePendingOperations(SpecialEffectsController.java:294) at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2202) at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:2106) at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:2002) at androidx.fragment.app.FragmentManager$5.run(FragmentManager.java:524) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:233) at android.app.ActivityThread.main(ActivityThread.java:8010) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:631) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:978)

Crash with java.lang.IllegalArgumentException: Unique transitionNames are required for all sharedElements

Branch complete
On click on MaterialCardView of  HomeFragment#onEmailClicked get crash:

    java.lang.IllegalArgumentException: Unique transitionNames are required for all sharedElements
        at androidx.fragment.app.FragmentTransaction.addSharedElement(FragmentTransaction.java:595)
        at androidx.navigation.fragment.FragmentNavigator.navigate(FragmentNavigator.java:212)
        at androidx.navigation.fragment.FragmentNavigator.navigate(FragmentNavigator.java:58)
        at androidx.navigation.NavController.navigate(NavController.java:933)
        at androidx.navigation.NavController.navigate(NavController.java:867)
        at androidx.navigation.NavController.navigate(NavController.java:1006)
        at com.materialstudies.reply.ui.home.HomeFragment.onEmailClicked(HomeFragment.kt:117)
        at com.materialstudies.reply.databinding.EmailItemLayoutBindingImpl._internalCallbackOnClick(EmailItemLayoutBindingImpl.java:219)
        at com.materialstudies.reply.generated.callback.OnClickListener.onClick(OnClickListener.java:11)
        at android.view.View.performClick(View.java:6294)
        at android.view.View$PerformClick.run(View.java:24770)
        at android.os.Handler.handleCallback(Handler.java:790)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loop(Looper.java:164)
        at android.app.ActivityThread.main(ActivityThread.java:6494)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)

app:fabAlignmentMode="end" makes all the buttons overlap in bottom app drawer.

I am trying to set the FAB on the end alignment but it makes all the action buttons overlap on the nav button.

Unique transitionNames are required

In Section 4 at this point in the CodeLab:

Try re-running the app. Pressing back after opening an email will collapse the email back into the list. Nice! Let's keep improving the animation.

The app crashes with this IllegalArgumentException:

java.lang.IllegalArgumentException: Unique transitionNames are required for all sharedElements

    at androidx.fragment.app.FragmentTransaction.addSharedElement(FragmentTransaction.java:595)
    at androidx.navigation.fragment.FragmentNavigator.navigate(FragmentNavigator.java:212)
    at androidx.navigation.fragment.FragmentNavigator.navigate(FragmentNavigator.java:58)
    at androidx.navigation.NavController.navigate(NavController.java:1049)
    at androidx.navigation.NavController.navigate(NavController.java:935)
    at androidx.navigation.NavController.navigate(NavController.java:1128)
    at com.materialstudies.reply.ui.home.HomeFragment.onEmailClicked(HomeFragment.kt:106)
    at com.materialstudies.reply.databinding.EmailItemLayoutBindingImpl._internalCallbackOnClick(EmailItemLayoutBindingImpl.java:208)
    at com.materialstudies.reply.generated.callback.OnClickListener.onClick(OnClickListener.java:11)
    at android.view.View.performClick(View.java:7356)
    at android.view.View.performClickInternal(View.java:7322)
    at android.view.View.access$3200(View.java:846)
    at android.view.View$PerformClick.run(View.java:27804)
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:7073)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:494)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:964)

5. Add Container Transform transition from FAB to compose email page

There is no Java code in this example.