Material design screen transitions in android

2. SCREEN TRANSITIONS IN
ANDROID
GO FROM A TO B IN STYLE
Created by fromAndrei Diaconu Android Iasi

3. ME

4. CODE ON GITHUB
https://github.com/andreidiaconu/transitions-animate-demo
Presentation (with working video) at https://andreidiaconu.github.io/transitions-animate-demo
bit.ly/screen-anim

5. WHAT IS A SCREEN TRANSITION?

8. WHAT ARE WE DOING TODAY?
8 Stages

9. STAGE 1 - DEFAULT ANIMATION

10. INITIAL SETUP
ACTIVITY A
grid.setOnItemClickListener(
DetailsActivity1.start(GridActivity1.this, imageUrl);
)
ACTIVITY B
static void start(...,String imageUrl){
intent = new Intent(...);
}
void onCreate(){
Picasso
.with(this)
.load(imageUrl)
.into(imageView);
}

12. STAGE 2 - MEASURING
Measure view in A
Send position to B
Resize the image in B

13. SEND POSITION
ACTIVITY A
void onItemClick(){
DetailsActivity2.start(GridActivity2.this, imageUrl, view);
}
ACTIVITY B
static void start(..., View initialView){
...
initialView.getGlobalVisibleRect(initialPosition);
intent.putExtra("initialPosition", initialPosition);
startActivity(intent);
}

15. STAGE 3 - NO DEFAULTS
Make B transparent
No default animations
Plan the animation

16. REMOVE DEFAULTS
STYLES.XML
<style name="AppTheme.Transparent">
</style>
<item name="android:windowBackground">rtransparent</item>
<item name="android:windowIsTranslucent">true</item>
STARTING ACTIVITY
from.overridePendingTransition(0,0);

17. RUN ONLY ONCE
void onCreate() {
if (savedInstanceState==null){
runAnimations();
}
}

19. STAGE 4 - START POSITION
Use translate and scale
Initial position for all views

20. WAIT FOR MEASUREMENTS
runAnimations(){
imageView
.getViewTreeObserver()
.addOnPreDrawListener(
boolean onPreDraw() {
actuallyRunAnimations();
removeOnPreDrawListener(this);
return false;
});
}

21. SET INITIAL POSITION
void actuallyRunAnimations(){
Rect initialPosition = getIntent().getParcelableExtra(...);
imageView.getGlobalVisibleRect(endPosition);
//use initialPosition, endPosition
imageView.setScaleY(...);
imageView.setScaleX(...);
imageView.setTranslationY(...);
imageView.setTranslationX(...);
}

23. STAGE 5 - ANIMATE!
Animate image to final position
Fade background in
Bring other views from the sides

24. ANIMATE THINGS BACK TO NORMAL
imageView.animate()
.scaleX(1)
.scaleY(1)
.translationX(0)
.translationY(0)
.setListener(
void onAnimationEnd() {
actionbar.animate()
.translationY(0)
.start();
}
).start();

26. STAGE 6 - REVERSE
Override closing B
Animate everyhitng in reverse
Close B when on animation end

27. PREVENT FINISH()
@Override
public void finish() {
if (canAnimateBack)
runAnimationsBackwards();
else
super.finish();
}

28. DELAY FINISH()
imageView.animate()
.scaleX(...)
.scaleY(...)
.translationX(...)
.translationY(...)
.setListener(
void onAnimationEnd() {
DetailsActivity6.super.finish();
overridePendingTransition(0, 0);
}
).start();

30. STAGE 7 - LOLLIPOP
Drop everything
Android 5 Screen Transitions
Define shared elements

31. STYLES.XML
<style name="AppTheme.Transitions">
<item name = "windowActivityTransitions" >true</item>
</style>

32. LAYOUT B
<ImageView
...
android:transitionName="shared_image"
/>

33. INTENT BUNDLE
ActivityOptionsCompat
.makeSceneTransitionAnimation(from, initialView, "shared_image")
.toBundle();

35. STAGE 8 - MAGIC
Content exit transition for A
Content enter transition for B
Detaults for exiting B and reentering A

36. EXIT + ENTER CONTENT TRANSITIONS
ACTIVTY A
getWindow().setExitTransition(new Explode());
ACTIVTY B
getWindow().setEnterTransition(new Slide());

38. COMPARISON

40. CODE ON GITHUB
https://github.com/andreidiaconu/transitions-animate-demo
Presentation (with working video) at https://andreidiaconu.github.io/transitions-animate-demo
bit.ly/screen-anim

41. THANK YOU!
QUESTIONS?
bit.ly/screen-anim