Skip to main content

Animating All Layout

caution

Transition.allLayout() may cause unexpected transitions because it adds transitions to ALL components present in the layout tree, which may include components higher than the target component in the hierarchy. Please use it carefully.

The Transition.allLayout() method enables all layout changes to be easily animated without having to assign transitionKeys to all components:

useTransition(Transition.allLayout().animator(ANIMATOR))

The following key points apply to Transition.allLayout():

  1. Targets AnimatedProperty.X, Y, HEIGHT and WIDTH of all components present in the layout tree.
  2. Can be used to define Change transitions only. To define the Appear and Disappear transitions, transitionKeys still need to be assigned.
  3. Could be used as a part of more complex choreography.

The following example can be found in Litho Sample App -> API Demos -> Animated Badge:

useTransition(
    Transition.parallel<Transition.BaseTransitionUnitsBuilder>(
        Transition.allLayout().animator(ANIMATOR),
        Transition.create(Transition.TransitionKeyType.GLOBAL, TRANSITION_KEY_TEXT)
            .animate(AnimatedProperties.WIDTH)
            .appearFrom(0f)
            .disappearTo(0f)
            .animator(ANIMATOR)
            .animate(AnimatedProperties.ALPHA)
            .appearFrom(0f)
            .disappearTo(0f)
            .animator(ANIMATOR)))

The following animation shows the above 'AnimatedBadge' in action.