Android Transition Framework: Getting Started

Think about the last Android app you used. What aspect impressed you the most? Was it the user experience? All users appreciate an app that’s easy to use and blazing fast with cool animations.

With Google’s Android Transition Framework, you can add style, elegance and screen transitions to user interactions.

Android Transition Framework allows you to:

Getting Started

Creating a Transition

Click the Download Materials button at the top or bottom of this tutorial. Unzip the iSellTransition.zip folder.

Now, launch Android Studio 3.3.1 or greater and select Open an existing Android Studio project to import the starter project.

Choose iSellTransition-Starter inside the iSellTransition folder and click Open.

The iSellTransition-Starter project contains the necessary classes and utilities to make an e-commerce app. It has three main packages:

Android Transition Framework offers many ways to create beautiful animations or override default ones. In the next section, you’ll create a transition and animate transitions between activities. Unleash that power now.

First, modify the default Activity Transition Animation by adding a single line of code inside SplashActivity, right before calling finish():

• Animate automatically from starting view to ending view by providing the layouts.
• Use predefined common animations such as Translate, Resize and Fade.
• Load built-in animations from layout resource files.
• Apply one or many animation effects to a view group at once.
• Use scenes loaded from complex layouts or generated programmatically.
• Control an animation’s lifecycle and progress providing the callbacks.
• Create custom transition animations.

Getting Started

Click the Download Materials button at the top or bottom of this tutorial. Unzip the iSellTransition.zip folder.

Now, launch Android Studio 3.3.1 or greater and select Open an existing Android Studio project to import the starter project.



Choose iSellTransition-Starter inside the iSellTransition folder and click Open.



The iSellTransition-Starter project contains the necessary classes and utilities to make an e-commerce app. It has three main packages:



• data: Model/data classes.
• ui: User interfaces related to classes.
• util: Common utility classes shared throughout the app.
Note: Kotlin Android Extensions are used for View Binding in this project. Views are referenced directly using their id instead of findViewById() throughout the project.

Android Transition Framework offers many ways to create beautiful animations or override default ones. In the next section, you’ll create a transition and animate transitions between activities. Unleash that power now.

Creating a Transition

First, modify the default Activity Transition Animation by adding a single line of code inside SplashActivity, right before calling finish():

Getting Started

Click the Download Materials button at the top or bottom of this tutorial. Unzip the iSellTransition.zip folder.

Now, launch Android Studio 3.3.1 or greater and select Open an existing Android Studio project to import the starter project.



Choose iSellTransition-Starter inside the iSellTransition folder and click Open.



The iSellTransition-Starter project contains the necessary classes and utilities to make an e-commerce app. It has three main packages:



• data: Model/data classes.
• ui: User interfaces related to classes.
• util: Common utility classes shared throughout the app.
Note: Kotlin Android Extensions are used for View Binding in this project. Views are referenced directly using their id instead of findViewById() throughout the project.

Android Transition Framework offers many ways to create beautiful animations or override default ones. In the next section, you’ll create a transition and animate transitions between activities. Unleash that power now.

Creating a Transition

First, modify the default Activity Transition Animation by adding a single line of code inside SplashActivity, right before calling finish():

• data: Model/data classes.
• ui: User interfaces related to classes.
• util: Common utility classes shared throughout the app.
Note: Kotlin Android Extensions are used for View Binding in this project. Views are referenced directly using their id instead of findViewById() throughout the project.

Android Transition Framework offers many ways to create beautiful animations or override default ones. In the next section, you’ll create a transition and animate transitions between activities. Unleash that power now.

Creating a Transition

First, modify the default Activity Transition Animation by adding a single line of code inside SplashActivity, right before calling finish():

Note: Kotlin Android Extensions are used for View Binding in this project. Views are referenced directly using their id instead of findViewById() throughout the project.

Android Transition Framework offers many ways to create beautiful animations or override default ones. In the next section, you’ll create a transition and animate transitions between activities. Unleash that power now.

Creating a Transition

First, modify the default Activity Transition Animation by adding a single line of code inside SplashActivity, right before calling finish():

overridePendingTransition(android.R.anim.slide_in_left, android.R.anim.slide_out_right)

Build and run the project.

Adding this line overrides the default enter and exit animations by referencing the existing slide-in and slide-out animations in the Android library. Easy!

Switching Activities with Shared Elements

One the most popular features of Android Transition Framework is sharing elements such as image and texts between activities during transitions.

Implement this complex animation with two simple steps:

Open content_details.xml and insert into priceTextView:

1. Update onItemClick() from ListActivity.kt:

   override fun onItemClick(item: Item, itemView: View) {
     val detailsIntent = Intent(this, DetailsActivity::class.java)
     detailsIntent.putExtra(getString(R.string.bundle_extra_item), item)
   
     // 1 - Start Activity with shared-transition animation
     val activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
       this@ListActivity,
       Pair.create<View, String>(                   //2
         itemView.findViewById(R.id.itemImageView), // 3
         getString(R.string.transition_image)),
       Pair.create<View, String>(
         itemView.findViewById(R.id.itemPrice),
         getString(R.string.transition_price)))
     startActivity(detailsIntent, activityOptions.toBundle())
   }
   

2. Open fragment_details.xml from the res ▸ layout package and add a transition name to itemImageView:

   android:transitionName="@string/transition_image"
   

   Open content_details.xml and insert into priceTextView:

   android:transitionName="@string/transition_price"
   

override fun onItemClick(item: Item, itemView: View) {
  val detailsIntent = Intent(this, DetailsActivity::class.java)
  detailsIntent.putExtra(getString(R.string.bundle_extra_item), item)

  // 1 - Start Activity with shared-transition animation
  val activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
    this@ListActivity,
    Pair.create<View, String>(                   //2
      itemView.findViewById(R.id.itemImageView), // 3
      getString(R.string.transition_image)),
    Pair.create<View, String>(
      itemView.findViewById(R.id.itemPrice),
      getString(R.string.transition_price)))
  startActivity(detailsIntent, activityOptions.toBundle())
}

android:transitionName="@string/transition_image"

android:transitionName="@string/transition_price"

Ready for magic? The output is awesome! Build and run again.

So smooth! Time to break it down:

1. UseActivityOptionsCompat.makeSceneTransitionAnimation() to specify the view and transition name as a Pair passed as Bundle from ListActivity to DetailsActivity.
2. Share multiple Pairs of View and String as arguments to that function. This is equivalent to sharing itemImageView and itemPrice views along with their transition names.
3. Specify itemImageView from fragment_details.xml as a final view for transition animation. Repeat the same steps for priceTextView in content_details.xml.