explaingit

lgvalle/material-animations

13,576JavaAudience · developerComplexity · 2/5Setup · easy

TLDR

A reference guide for Android's built-in Transition Framework with code samples and animated GIFs showing how to animate screen navigation, shared element effects, and layout changes in mobile apps.

Mindmap

mindmap
  root((material-animations))
    Transition types
      Explode
      Slide
      Fade
    Shared elements
      Thumbnail to detail
      Transition names
      Return animation
    Scene transitions
      Scene snapshots
      ChangeBounds
      Auto animate
    Code formats
      Java code
      XML resources
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Copy the Explode, Slide, or Fade transition code into an Android app to animate navigation between two screens

USE CASE 2

Implement a shared element transition so a thumbnail image on a list screen smoothly grows into the full image on a detail screen

USE CASE 3

Use scene transitions to automatically animate layout changes within a single screen when content updates

Tech stack

JavaAndroidXML

Getting it running

Difficulty · easy Time to first run · 30min

Repository is no longer maintained, but code examples remain valid for Android's Transition Framework and are still usable as a reference.

In plain English

This repository is a reference guide for Android's built-in Transition Framework, which lets you add animation to mobile apps when moving between screens or changing what appears on a single screen. The repository is marked as no longer maintained, though the author notes the content remains valid as a learning reference. The framework handles three main scenarios. The first is animating the content of a screen when the user navigates from one activity (a page or screen in an Android app) to another. Three preset animation styles are available: Explode, where elements scatter outward from the center, Slide, where elements enter or exit from one side, and Fade, where elements gradually appear or disappear. You can define these either in XML files stored in your project or by writing code directly in Java. The second scenario is shared element transitions. This is the effect where a small thumbnail image on a list screen appears to grow and travel into its position on a detail screen. Both the origin and destination views must be tagged with the same transition name. The animation is an illusion: the two views remain separate objects in separate layouts, and the framework creates the appearance of movement between them. The third scenario involves animating changes within a single screen. A scene is a saved snapshot of what a layout looks like at a given moment. When you switch between scenes, the framework calculates what changed and animates the differences automatically. Elements can appear, disappear, or shift position with built-in transitions like ChangeBounds, which smoothly resizes and repositions views. The README explains all three scenarios with code samples in both XML and Java formats, and includes animated GIFs showing each transition in action. It also covers return and reenter transitions, which control the animation when the user navigates backward, and how to animate multiple shared elements simultaneously.

Copy-paste prompts

Prompt 1
Using the material-animations guide, write the Java code and XML to add a shared element transition between a RecyclerView item image and a full-screen detail activity in Android
Prompt 2
Show me how to implement the Explode transition when navigating between two Android activities, include both the XML resource approach and the Java code approach from the material-animations reference
Prompt 3
Using the scene transition approach from material-animations, write Java code that animates a layout switching between two states: one showing an input form and one showing a success message
Prompt 4
Based on material-animations, implement return and reenter transitions so that navigating back from a detail screen reverses the shared element animation smoothly
Open on GitHub → Explain another repo

← lgvalle on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.