AnimatedNavDecoration

AnimatedNavDecoration is an implementation of NavDecoration that provides the Navigation AnimatedVisibilityScope for shared elements. It also allows for indepth customization of its AnimatedContent through a AnimatedNavDecorator. AnimatedNavDecoration is the default NavDecoration used by Circuit.

How this works:

• The DecoratedContent method is called to render content by the Navigation system in Circuit, given the current navigation state.

• The decoratorFactory is called to obtain and remember an AnimatedNavDecorator instance.

• On the obtained decorator, AnimatedNavDecorator.updateTransition is called passing the current navigation arguments and back stack depth.

• An AnimatedContent container is then created on the returned Transition.

• Using the decorator and animatedScreenTransforms, build the AnimatedContent transitionSpec. This will compare each of the available transforms and select the first one that is able to handle the current transition. If no AnimatedNavigationTransform is able to handle the transition, then the default transition provided by the AnimatedNavDecorator.defaultTransform will be used.

• Then for each of the applicable AnimatedContent states the Navigation is created and the AnimatedNavDecorator.Decoration is used to render the content.

Examples

Using this AnimatedNavDecorator.Factory for the CustomDecorator in the AnimatedNavDecorator example.

class CustomAnimatedNavDecoratorFactory() : AnimatedNavDecorator.Factory {
  override fun <T : NavArgument> create(): AnimatedNavDecorator<T, *> {
    return CustomDecorator()
  }
}

You can customize the default AnimatedNavDecoration when building a Circuit instance by providing the CustomAnimatedNavDecoratorFactory to the Circuit.Builder. You can also add an AnimatedScreenTransform for a specific Screen.

Circuit.Builder()
  .addUiFactories()
  .addPresenterFactories()
  .addAnimatedScreenTransform(CustomScreen::class, CustomScreenAnimatedTransform)
  .setAnimatedNavDecoratorFactory(CustomAnimatedNavDecoratorFactory())
  .build()

You can also customize the AnimatedNavDecoration for a specific NavigableCircuitContent by providing it with an AnimatedNavDecorator.Factory. The provided AnimatedNavDecorator.Factory will override any existing NavDecoration for that NavigableCircuitContent.

NavigableCircuitContent(
  navigator = navigator,
  backStack = backStack,
  decoratorFactory = remember { CustomAnimatedNavDecoratorFactory() },
)

Parameters

See also