AndroidPub
Published in

AndroidPub

Android Onboarding Hop Animation

You have a fantastic feature in your application that requires your users to swipe a view up to open it. But your users do NOT use it. WHY?! Of course, because they are not aware of that awesome feature. Let’s help them discover that feature.

Hop Your Feature

It is so intuitive since users need to swipe it to use it. Hop it! Let people know that the view has more things to show.

Maybe it is because of our evolutionary action. We react to moving things around us. 🤔 Probably that’s why the Android team designed the default android launcher with that animation.

Lazy Option: Use the new Hopper library.

Let’s Try

We will start trying to ‘hop’ a simple TextView just to see how easy the animation implementation is. It is applicable to other views as well. So it is enough to know how to ‘hop’ a TextView.

One Hop

val animation = textViewHop
.animate()
.translationYBy(-40f)
.setDuration(200)

animation.withEndAction {
textViewHop.animate().translationYBy(40f).duration = 200
}

Thanks to the lovely <withEndAction> method we are able to animate the view to the opposite direction of the first animation. If you try to do it with AnimatorListener your second animation will also trigger itself and the view you are trying to animate will animate out of the screen. It is fun to watch.

How to loop this?

Now we have the basic animation. How are we going to repeat itself? Handler FTW.

Java version;

animationHandler.post(new Runnable(){
@Override
public void run(){
//Hop animation
animationHandler.postDelayed(this, 1000);
}
}
);

‘this’ in the ‘postDelayed’ method refers to the Runnable object in java.

Kotlin simple version;

animationHandler.post(object : Runnable {
override fun run() {
// Hop animation
animationHandler.postDelayed(this, 1000)
}
})

Kotlin slightly more complicated version;

private val animationHandler = Handler()
private lateinit var animationRunnable: Runnable

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
animationRunnable = Runnable { animationFunction() }
animationHandler.post(animationRunnable)
}
private fun animationFunction() {
val animation = textViewHop
.animate()
.translationYBy(-40f)
.setDuration(200)
animation.withEndAction {
textViewHop.animate().translationYBy(40f).duration = 200
}
animationHandler.postDelayed(animationRunnable, 1000)
}

Basically, what we did is getting the runnable object globally. You can also pass it as a parameter to the ‘animationFunction’ method. It will work as long as you give the runnable object to the handler to run with a delay in the runnable itself. (I hope I didn't make it complicated.)

Edit: All the code that you need is in the bottomsheetonboarding project. If you want a quicker answer, here it comes;

Kotlin version:

animationHandler.post(object : Runnable {
override fun run() {
val animation = linearLayoutBottomSheet
.animate()
.translationYBy(-40f)
.setDuration(200)
animation.withEndAction {
linearLayoutBottomSheet.animate().translationYBy(40f).duration = 200
}
animationHandler.postDelayed(this, 1000)
}
})

Java version:

animationHandler.post(new Runnable() {
@Override
public void run() {
ViewPropertyAnimator viewPropertyAnimator =
linearLayoutBottomSheet.animate().translationYBy(-40f).setDuration(200);
viewPropertyAnimator.withEndAction(new Runnable() {
@Override
public void run() {
linearLayoutBottomSheet.animate().translationYBy(40f).setDuration(200);
}
});
animationHandler.postDelayed(this, 1000);
}
});

The result:

Our result gif shows a bottom sheet animation. It is done with the same approach.

Check out the sample project on the GitHub. Do not forget to leave a star to the project if you were able to learn something. https://github.com/EfeBudak/bottomsheetonboarding

Note: Thanks Tulio for pointing out that it is possible to refer the anonym object in Kotlin as ‘this’, too.

If you have any questions, suggestions, objections then leave a comment.

--

--

--

The (retired) Pub(lication) for Android & Tech, focused on Development

Recommended from Medium

Android Studio Audio Player [Part 7] Integrating c++ codes in.

[Notice] 16/5 Surprise Coupon Number Event💌

Creating An Audio Player With Android Studio

10 Techniques To Check Android Rooted Device (Update)

Spot your UI jank using CPU profiler in Android Studio

Mapping data between layers

Delivering a million downloads every week

[Notice] 6/5 Surprise Coupon Number Event💌

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
efe budak

efe budak

Android Developer @Teckro.com

More from Medium

Language Change Programmatically in Kotlin, Grow Your Apps Audience Using Localization…

[요약] Google I/O 2022 What’s new in Jetpack

Shimmer effect in android

Bytecode transformations: The Android Gradle Plugin