Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Android Transitions
Search
Bryan Herbst
February 06, 2016
Programming
0
470
Android Transitions
A tour of the Transitions framework in Android
Bryan Herbst
February 06, 2016
Tweet
Share
More Decks by Bryan Herbst
See All by Bryan Herbst
Semantics in Jetpack Compose
bherbst
0
12k
Kotlin Multiplatform
bherbst
0
810
Android App Architecture & Navigation
bherbst
0
2k
What's in the Android Toolbox
bherbst
0
500
Gradle Deep Dive
bherbst
2
1.9k
Actions with Google
bherbst
0
1.4k
Databinding in Android
bherbst
0
430
Activities Vs. Fragments
bherbst
0
340
Android Transitions
bherbst
0
60
Other Decks in Programming
See All in Programming
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
33k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
200
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
690
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
360
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
440
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
A better future with KSS
kneath
239
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GraphQLとの向き合い方2022年版
quramy
49
14k
Bash Introduction
62gerente
614
210k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Adaptive Systems
keathley
43
2.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Transcript
Transitions Bryan Herbst Android Engineer @ Target
Abrupt transitions are jarring
Smooth transitions provide continuity
Smooth transitions keep users engaged
Smooth transitions delight users
“In the world of material design, motion describes spatial relationships,
functionality, and intention with beauty and fluidity.”
Android Transitions Activity to Activity Fragment to Fragment
Scene to Scene (Views)
Hold on… Requires API 21
Hold on… Progressive enhancement, graceful degradation
Hold on… Support APIs offer default behavior
on older versions
Scenes Snapshot of a ViewGroup
Scene transition TransitionManager.beginDelayedTransition(rootView, new Fade()); button.setVisibility(View.INVISIBLE);
What is this black magic?
How it works 1. beginDelayedTransition() => Take a snapshot of
ViewGroup 2. Update Views 3. On next layout pass, Android takes another snapshot and creates animations
How it works 1. beginDelayedTransition() => Take a snapshot of
ViewGroup
How it works 1. beginDelayedTransition() => Take a snapshot of
ViewGroup 2. Update Views
Transition types Fade Explode Slide ChangeBounds
AutoTransition Fade Move Resize
What about property animation? ObjectAnimator.ofFloat(button, "alpha", 1f, 0f) .start();
What about property animation? button.animate().alpha(0f);
What about property animation? Fine if you want to think
about Views individually
What about property animation? Fine if you want to think
about Views individually Scenes allow us to think in groups
Activities With shared elements
Activity Transitions- setup Request Window.FEATURE_ACTIVITY_TRANSITIONS and Window.FEATURE_CONTENT_TRANSITIONS in both
Activities
Activity Transitions- setup Set a transition name on
the View in both Activities
What are these transition names? An ID for the transition
framework
Rule #1 All animating Views must have a transition name
Rule #2 All transition names must be unique within a
layout
Not a rule #1 Transition names don’t need to match
between layouts
Activity Transitions- setup Create a Bundle with ActivityOptions .makeSceneTransitionAnimation(activity,
sharedView, viewTransitionName) .toBundle();
Activity Transitions- setup Set your Transitions
Activity Transitions- setup Call startActivity(intent, transitionBundle);
Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of
Views and transition names.
Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of
Views and transition names. The sharedView is the original view in our current layout (the starting state)
Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of
Views and transition names. The sharedView is the original view in our current layout (the starting state) The viewTransitionName is the name of the corresponding view in the new layout (the ending state)
Activity transitions magic Captures Views in first Activity, then second
Activity
Activity Transitions use the Window e.g. getWindow().setEnterTransition(new Fade());
Four transition types Enter Exit Reenter
Return
Four transition types Enter
Four transition types Exit
Four transition types Reenter
Four transition types Return
Four transition types x2 with Shared elements
Or not Stick with enter and return for shared elements
Shared exit and reenter Allow for animation before the transition
Sample Exit, shared enter, enter
Sample Reenter, shared return, return
A note on timing Because sometimes Views don’t exist right
away
Delayed transitions postponeEnterTransition(); startPostponedEnterTransition();
WARNING! Blocks transition
WARNING! Blocks transition
WARNING! Prefetch or find clever alternatives
Fragment example
Transition setup setExitTransition(new Fade()); Fade out non-shared elements
Transition setup newFrag.setSharedElementEnterTransition(new AutoTransition()); AutoTransition shared elements
Transition setup newFrag.setEnterTransition(new Fade()); Fade in non-shared elements
Making the transition fragmentManager.beginTransaction() .replace(R.id.container, newFrag) .addSharedElement(sharedView, "transitionName") .commit();
What about delayed transitions? Ugh. It isn’t good in
Fragments.
I didn’t want to animate that!
Targets- includes <fade> <targets> <target android:includeId="@id/fancyWidget"/> <target android:includeClass=“com.example.FancyWidget"/> <target android:includeName=“fancyWidget"/>
</targets> </fade>
Targets- excludes <fade> <targets> <target android:excludeId="@id/toolbar"/> <target android:excludeClass=“android.support.v7.widget.Toolbar"/> <target android:excludeName="toolbar"/>
</targets> </fade>
Support for <21
Support for <21 ActivityOptions => ActivityOptionsCompat .makeSceneTransitionAnimation(activity, view, name)
Support for <21 startActivity(intent, transitionBundle); Has existed since API 16!
Support for <21 Transition names android:transitionName="name" is ignored on
older versions ViewCompat.setTransitionName(view, “name);
Support for <21 Delaying transitions supportPostponeEnterTransition(); supportStartPostponedEnterTransition();
Support for <21 Specifying transitions The only place we need
a version check if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setEnterTransition(new Fade()); }