Loading...
Home
  • Tech Blogs
  • Videos
  • Conferences
    • Droidcon News
    • Upcoming Conferences
    • Become a Partner
    • Past Events
    • Keep Me Informed
    • Diversity Scholarships
  • Community
    • droidcon Team
    • How to Hold a Droidcon
  • Android Careers
Sign In

Global CSS

 

Android MotionLayout: Creating the Twitter Splash Screen (Part II)

 

 
Waseef Akhtar
Android Developer at Degoo Backup AB.
Published: July 10, 2020
Tweet
Share
 

 

I didn’t plan to write this at first since my last tutorial covers pretty much everything about MotionLayout I intended to write about.

But..

I received questions on social media about this one action several times, which is about how to move to next screen after our animation is complete. I thought it’d be easy to figure out on your own but when I looked around, I figured that there aren’t very many resources for MotionLayout yet.

Also, my last tutorial is a bit long to follow for beginners (I tend to keep beginners in mind when writing blog posts and make it as detailed as possible for them to understand since I’ve noted that experienced developers tend to skim through a tutorial to find the information they’re looking for anyway. So it’s a win-win) ;)

So without further ado, let’s jump right in.

 

Recap

If you’ve followed my last tutorial (which is the main tutorial on how MotionLayout works), you’d have a screen looking like this: 👇

 

Image for post

 

Previous Post

 

Android MotionLayout: Creating the Twitter splash screen in the simplest way possible

Remember the Twitter’s “oh so famous” splash screen that everyone talked about and had their version to imitate it…

proandroiddev.com

 

The animation currently does not have an end and it loops back and forth through the animation. But for moving to the next screen, we need to have an end to our transition.

 

Disable Animation Loop 🔁

In order to move to the next activity, we need to make one tiny change to our motion; that is to stop the reverse loop and make it animate only once, to do so:

  1. Open activity_main_scene.xml
  2. Add the following property in your OnClick tag:

 

 

Note: Running at this stage will trigger the forward animation, but not the reverse animation.

 

New Activity 🖼

Next, we need a new activity that the current activity moves to once the motion is completed, for that;

  1. Create a new blank activity and name it SecondActivity:

 

Image for post

 

Image for post

 

  1. Open activity_second.xml.
  2. Change the activity’s background color to white:
  3. Create a new TextView and write anything that you like (so we know that the screen is actually moved to a new screen).

You’ll now have an activity looking like this:

 

 

The Magic 🎩

We want to move to next activity only when the motion ends. In order to figure out when it does, we need some kind of listener on our MotionLayout to let us know about the states our motion goes through (for instance, start, resume, pause, end).

Turns out, MotionLayout already has a built-in listener that can help us listen 👂 to the motion states as it performs.

To implement that:

  1. Open activity_main.xml.
  2. Create an ID for the MotionLayout (which helps us reference it in our MainActivity class), like so:

 

 

  1. Open MainActivity.kt.
  2. Add the following lines in your onCreate just before the closing curly bracket:

 

 

Note: What we accomplish here is that we first set a listener on our motionLayout to know each state of our transition. Then, on transition completed, we call startActivity to call the new activity we created.

Since we want to move to next activity only when the motion is finished, we’re calling startActivity in onEnd and not in any other state methods.

 

Run the app and see the new action!

 

Image for post

 

Looks great so far, but we’re not entirely there yet. Why you ask? Here are some things to fix:

  1. In the animation above, notice that the next activity does not give the feeling of fading into the next screen because our activity starts with a slide up transition.
  2. While in second activity, if we press the back button, our activity moves back to our Splash screen, and we never want that to happen.

 

The Fix 🔧

Fixing the starting activity transition

To fix this issue, I’d like to keep it simple for the tutorial by just overriding the windowAnimationStyle. To do so:

  1. Open styles.xml.
  2. Create a new WindowAnimationStyle and set it in your base AppTheme, like so:

 

 

Avoid going back to splash screen

In order to fix this issue:

  1. Open AndroidManifest.xml.
  2. In your MainActivity activity tag, set an android:noHistory attribute to true, like so:

 

 

Running the app at this stage solves both the previous issues:

 

Image for post

 

And that’s pretty much it for this post!

 

Bonus 🎈

If you’d like to get rid of the click on image to trigger animation and let it auto transition when the app starts, do the following:

  1. Open activity_main_scene.xml.
  2. Remove the OnClick tag from the Transition tag.
  3. Add a new attribute in your transition tag: motion:autoTransition=”animateToEnd”

You’ll now have your XML looking like this:

 

 

Happy coding! 💻

 

Source code for the Final Version

 

waseefakhtar/MotionLayoutTwitter

Android MotionLayout: Creating the Twitter splash screen in the simplest way possible …

github.com

 


Have something to say? Leave me comments on Twitter, retweet, like or follow: ✌️

 

 


If you enjoyed this, you might also be interested in other stories that I recently published:

 

Android Material Component: An easy approach to Navigation Drawer

The Navigation is a powerful component in Android Development which provide easy access to destinations in your app…

proandroiddev.com

 

Android Material Component: Toolbar vs DisplayCutout

With Android 9 (API level 28), Google officially started supporting what’s famously known as the notch, a cutout…

proandroiddev.com

 

 

Tags: Programming, AndroidDev, Android App Development, Motion Design, Kotlin

 

View original article at: 


 

Originally published: June 17, 2020

Android News
Evolution of Android Update SystemEvolution of Android Update System
Evolution of Android Update SystemEvolution of Android Update System

By Ivan Kuten

So, how can you update Android on mobile devices? While developing software for Smart TVs and Android-based set-top boxes, we’ve narrowed it down to four ways, discarding some very exotic options:

By ProAndroidDev -
Android News
Happy Railway
Happy Railway

By Hadi Lashkari Ghouchani

This post is on the tail of Railway Oriented Programming in Kotlin by Antony Harfield. So you need to read it first and continue here. As it’s obvious I really liked it and tried it out. It needs every process have a result like

By ProAndroidDev -
Android News
Unit Tests and Concurrency
Unit Tests and Concurrency

By Stojan Anastasov

Once Retrofit added RxJava support, RxJava became my go-to concurrency framework for writing Android apps. One of the great things about RxJava is the excellent testing support. It includes TestObserver, TestScheduler, RxJavaPlugins so you can switch your schedulers in tests.

By ProAndroidDev -
Android News
When Compat libraries will not save you
When Compat libraries will not save you

By Danny Preussler

And why you should avoid using the “NewApi” suppression! The idea of “Compat” libraries was probably one of the key aspects of Android dominating the mobile space. Other than with iOS, Android users often could not update their operating system after a new version launch, simply as their phones won’t allow them to, the Android problem of fragmentation.

 

By ProAndroidDev -
droidcon News

Tech Showcases,

Developer Resources &

Partners

/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/home-details/EmployerBrandingHeader
EmployerBrandingHeader
https://jobs.droidcon.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/jobs-droidcon/jobs.droidcon.com
jobs.droidcon.com

Latest Android Jobs

http://www.kotlinweekly.net/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/kotlin-weekly/Kotlin Weekly
Kotlin Weekly

Your weekly dose of Kotlin

https://proandroiddev.com/
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/pad/ProAndroidDev
ProAndroidDev

Android Tech Blogs, Case Studies and Step-by-Step Coding

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Zalando/Zalando
Zalando

Meet one of Berlin's top employers

/detail?content-id=/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
/portal/rest/jcr/repository/collaboration/Groups/spaces/droidcon_hq/Documents/public/employerbranding/Academy for App Success/Academy for App Success
Academy for App Success

Google Play resources tailored for the global droidcon community

Follow us

Team droidcon

Get in touch with us

Write us an Email

 

 

Quicklinks

> Code of Conduct

> Terms and Conditions

> How to hold a conference

> FAQs

> Imprint

Droidcon is a registered trademark of Mobile Seasons GmbH Copyright © 2020. All rights reserved.

powered by Breakpoint One