Implementing a Carousel with MotionLayout in Android

When building a UI that requires a carousel, the author discovered the Carousel component inside MotionLayout and decided to use it to simplify animation handling.

MotionLayout works by defining start and end frames (and optional intermediate frames) using ConstraintLayout syntax, allowing the system to animate between them automatically.

The article focuses on using the Carousel helper, showing a complete example with screenshots and a GitHub demo.

Core concept : a carousel needs three states – previous , start , and next . The start state shows the middle three items (B, C, D). Swiping forward moves B‑C‑D‑E to A‑B‑C‑D, displaying C‑D‑E; swiping backward works similarly. After each animation the layout resets to the start state while the data mapping changes, enabling an infinite loop.

The XML layout for the carousel includes a MotionLayout with five ImageView children and a Carousel widget. Example snippet:

<androidx.constraintlayout.motion.widget.MotionLayout ...>
    <ImageView android:id="@+id/imageView0" .../>
    <ImageView android:id="@+id/imageView1" .../>
    <ImageView android:id="@+id/imageView2" .../>
    <ImageView android:id="@+id/imageView3" .../>
    <ImageView android:id="@+id/imageView4" .../>
    <androidx.constraintlayout.helper.widget.Carousel
        android:id="@+id/carousel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:carousel_forwardTransition="@+id/forward"
        app:carousel_backwardTransition="@+id/backward"
        app:carousel_previousState="@+id/previous"
        app:carousel_nextState="@+id/next"
        app:carousel_infinite="true"
        app:carousel_firstView="@+id/iv2"
        app:constraint_referenced_ids="iv0,iv1,iv2,iv3,iv4" />
</androidx.constraintlayout.motion.widget.MotionLayout>

The MotionScene file defines three ConstraintSet s ( previous , start , next ) that specify the position, rotation, scale, translationZ , and a custom Saturation attribute for each view. For example, the start set contains:

<ConstraintSet android:id="@+id/start">
    <Constraint android:id="@+id/iv1" ... motion:layout_constraintLeft_toLeftOf="@+id/glLeft" motion:layout_constraintRight_toRightOf="@id/glRight">
        <CustomAttribute motion:attributeName="Saturation" motion:customFloatValue="0.0" />
    </Constraint>
    ...
</ConstraintSet>

Two Transition s link the states: forward (drag left) moves from start to next , and backward (drag right) moves from start to previous . Each transition sets a duration of 1000 ms.

In the activity, a Kotlin adapter supplies the carousel items:

carousel.setAdapter(object : Carousel.Adapter {
    override fun count(): Int = 4
    override fun populate(view: View?, index: Int) {
        if (view is ImageView) view.setImageResource(images[index])
    }
    override fun onNewItem(index: Int) { /* optional handling */ }
})

The demo also shows how to animate a black‑and‑white image to color using ImageFilterView with the app:saturation attribute, and how to apply a Y‑axis rotation ( rotationY ) for a flip effect.

Finally, the author notes that while Carousel is powerful for simple, limited‑element carousels, it may become cumbersome for complex pages because three separate layout states must be maintained.