Creating Onboarding Flow with MotionLayout

The Android platform offers the ability to completely customise components that are not available in the prebuilt widgets and layouts or modify some existing components to meet our needs. However, making apps more accessible with complex UI requires some additional effort and sometimes nearly impossible. Fortunately, the Android team are continuously working to help us resolve some of these constraints by adding new classes and support libraries to the platform, such as ConstraintsLayout

The Onboarding Flow

The onboarding flow(see gif below) comprises of three screens with two control buttons and a progress dot indicator. Each screen incorporates details about that specific screen, encased in a bubble background.

Onboarding flow

Why using MotionLayout?

At a glance at the gif, using MotionLayout may appear irrelevant to you, but allow me to elaborate. First of all, before MotionLayout, I felt terrible at animations on Android, especially when dealing with custom views. I’d build it by creating a custom view along with the texts and images to a canvas.

The Onboarding Layout

Earlier, I stated that the onboarding comprises of three screens. Which sounds like I’d also need three separate layouts, but with MotionLayout, it is possible to use a single layout for these screens using constraint set for each screen. Cool, right?

Onboarding design and blueprint

Animating the screens

By default, MotionLayout uses MotionScene, a separate file containing the animation specifications needed to transition from the start-position to the end-position of our screen.

A software engineer designed in Sierra Leone 🇸🇱 and assemble in Norway 🇳🇴. Soccer, music, photography and IoT enthusiast.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store