Geek Culture
Published in

Geek Culture

OnBoarding Animation at HealthifyMe

Onboarding completion animation in HealthifyMe app

We at healthify focus on giving a plan which is best suited for the user. To achieve this, at the time of onboarding we ask users a few questions regarding their age, weight, and if they do any physical exercise or do they have any injury? After completing all answers we show an onboarding completion screen, which has some animations as you can see in the above video. We focus on user interaction to make our app more user-friendly.

Today in this article, we will learn how we can achieve that.

Step 1: Add few basic libraries in your project along with Glide to load the icon image.

implementation 'com.github.bumptech.glide:glide:4.11.0'
implementation 'com.google.code.gson:gson:2.8.6'

Step 2: Design screens.

Here for the initial screen, we have a title text, and then 3 steps to set up the user plan.

We can make the icons reusable by creating them in a new file. The image is surrounded by a progress bar. That progress bar has 3 stages.

a) Default.
b) Intermediate.
c) Complete.

Below is the code for the icon layout.

#layout_loading_progress_with_icon_ and_text.xml

#activity_main.xml

Step 3: Initially set 1, 2, 3 inside icon and fetch Data.

fl_progress_1.tv_ob_loading.text = 1.toString()
fl_progress_2.tv_ob_loading.text = 2.toString()
fl_progress_3.tv_ob_loading.text = 3.toString()

fetch data from API which we want to show on the screen. For example, I am taking a sample JSON.

Convert Json to gson and store in class name OnboardingUiDataModel

Pass json data in setUpUi Method.

private fun setupUi(data: OnboardingUiDataModel?, animate: Boolean = true) {
}

Set screen title from JSON data.

Step 4: SetUp Loading state

  1. Here first we hide the text view inside the icon which shows step count.
view.tv_ob_loading.text = ""

2. Then change progress bar drawable and rotate it through AccelerateDecelerateInterpolator.

private val interpolator = AccelerateDecelerateInterpolator()view.iv_ob_loading.animate().alpha(1f).setDuration(if (animate) 1000 else 0)
.setInterpolator(interpolator).start()

3. Set imageView through any image library. We are using Glide here.

val iconRes = icon?.iconRes ?: 0
if (iconRes != 0)
view.iv_ob_loading.setImageResource(iconRes)
else
BaseImageLoader.loadImage(this, icon?.icon, view.iv_ob_loading)

loadImage() is a method to load imageUrl in passed imageView through glide.

4. Change progress bar drawable state by indeterminateDrawable.

val pbObLoading = view.pb_ob_loading
val bounds = pbObLoading.indeterminateDrawable.copyBounds()
progressDrawable?.bounds = bounds
progressFinalDrawable?.bounds = bounds
pbObLoading.indeterminateDrawable = progressDrawable

5. Animate Text, Set text content and animate it while showing on the screen.

text1.visibility = View.VISIBLE
text1.text = icon?.loadingText
text1.animate().alpha(1f).setDuration(if (animate) 1100 else 0)
.setInterpolator(interpolator).start()
text2.visibility = View.VISIBLE
text2.text = icon?.finalText
text2.animate().alpha(1f).setDuration(if (animate) 1100 else 0)
.setInterpolator(interpolator).start()

This text layout contains two textView. One is Loading text, second is final text. After 600ms we will remove loading text and shift final text by side of the loading icon and change the progress bar to final drawable.

After the animation is ending we are combining the first animation with the second one, so everything happens sequentially.

Check the complete code for setupLoadingStart() method HERE.

Step 5: Setting Loading animation for all 3 states.

private fun setupLoadingStart(
view: View, //included progress bar view in main xml
icon: Icon?, //icon data
text1: TextView,
text2: TextView,
animate: Boolean = true,
combine: (() -> Unit)? = null // next animation
)

So for combine argument, we will pass the 2nd loading animation in the First animation argument, and the 3rd loading animation in 2nd animation end.

Now when 3rd animation is ending we will show the ending animation which you can see below.

Step 6: Ending animation, moving icons to Up in a horizontal sequence, hiding title.

Hide text from existing Layout.

Clone a new layout that will contain a new ending layout.

Change cl_ob_loading constraint set with a new layout and show transition using the below code.

Check the complete Code for MainActivity Here.

Bravo! We did it.

The basic thing to make cool animation is to Divide it into chunks and implement it step by step. Always read what’s new in the market so maybe what you were trying to implement using old methods was complicated, but something new is easier with less code.

Things to improve code quality

  1. I hardcoded values in XML, just to write that in one file. But you never do that, always use diff resource file to access it, so you can reuse it at multiple places and changes can also be made easily.
  2. Basic business logic can have tests.
  3. You can write UI tests as well.
  4. Instead of putting all animation code in your MainActivity use abstraction. We did that.

DO you have any other idea to implement the same animation which is better? How else would you tackle the issue of UI component reusability, Code Optimization? If yes, please do share with us in the comment section. You can as well write me back at karishma.agr1996@gmail.com. The same applies if you have any queries.

Thank you for reading. 👏 I hope you’ve found this article helpful. Your claps are really appreciated to help others find this article 😃 .

--

--

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