Keyframe Animations with ConstraintLayout and ConstraintSet

Keyframe Animations with ConstraintLayout and ConstraintSet


David Anderson

Related Posts

60 thoughts on “Keyframe Animations with ConstraintLayout and ConstraintSet

  1. mhammad alkhalaf says:

    what about that in JAVA

  2. Yogesh Kurane says:

    So this should be written on any of the click listeners ? What abt reverse animations?
    Like 1st tap to get full screen img.. 2nd tap to exit full screen image..

    Ps: This will be removing a lot of complexity regarding animations now, can't wait to add it to my existing apps on Google play.

  3. Saran Sankaran says:

    What's up with his hand movement in the video?

  4. Sangeeth Nandakumar says:

    Very useful & beautiful

  5. Valour says:

    Why are you talking with hands?

  6. Alexander Osmanov says:

    Animations. Once upon a time a craft. Now 4 lines of code.

  7. Rene Ferrari says:

    Epic 🙂

  8. Gabriel Moreno says:

    Great!

  9. classic ComedyClubE SERIES says:

    Good update

  10. Josef Aguilar says:

    Omg I love ConstraintLayout

  11. TrezeDroid says:

    Very nice!

  12. Jim Pekarek says:

    I'm not sure I've ever been able to call working with Android animations "fun", more "aggravating" or "headache-inducing", but I love the results when it's done well. This looks like a huge step in the right direction! I look forward to trying it out.

  13. Mijael Viricochea Parra says:

    You are killing Java :(… (I love it)

  14. Amjad Omari says:

    WoOoOoOw, that was ammmmazing :D.
    Thanks.

  15. Poke Champ says:

    I'm relatively new to Android and have been using Restraint Layout. Will start experimenting with constraint layout

    Ps: another reason to switch is snack bar works with constraint but doesn't stick with relative if it's not the root layout D:

  16. Guilherme Lima Pereira says:

    Awesome! I liked it so much I had to code, and the final result was very easy to achieve. For the ones looking for the code, here is my version: https://github.com/guuilp/KeyFrameAnimation (any improvements are welcome!)

  17. Hamse Egale says:

    so nice i like it

  18. Hamse Egale says:

    i try this as soon posible

  19. Gabriel Manasseh says:

    Andromeda? Sly. I saw that.

  20. Valentin says:

    Inteseting and useless, if you can't show both suppoted languages, java and kt

  21. Sanket Bhat says:

    Helpful! Can create complex animations without worry!

  22. 章ウ一 says:

    This architecture just feels downright wrong…using layout files to animate?

    It's like UI is overstepping its boundary into logic realm. Shouldn't UI files only be a container for data to fill in and code for controlling when/where/how the UI appears on screen?

    Here's a scenario – suppose we want to chain animations so animation C happens after animation B which happens after animation A.

    Going by this layout file approach, it means we have to create layout for animation A -> animation B, then another layout file for animation B -> animation C and finally a third layout file for animation C -> final state.

    Does anyone else see how fragile this approach is?

    I'm all for innovation but I just feel this method is making UI overstepping it's purpose.

    I feel the same way about how iOS uses segues in Storyboard files to coordinate navigating from one screen to another, I'm not bashing Android.

  23. Hey Wanderson Jackson says:

    This is soooooo awesomeeee 🙂

  24. Bal0rCIM says:

    or use github.com/dev-labs-bg/transitioner with any layout

  25. Anik kumar Bhushan says:

    good work less code and clever code

  26. Shashanth says:

    Watch this video at the speed of 1.5 and you feel like watching Derek Banas's video tutorial. (That voice) 🙂

  27. Moses Karunia says:

    Next step: rewrite android docs with kotlin!

  28. Oussama Hafferssas says:

    Sweet stuff, thanks Android Team 🙂

  29. Gulzar says:

    Here's my implementation of Whatsapp readby animation using ConstraintLayout https://github.com/gulzar1996/whatsapp-readby-animation

  30. Harsh Patel says:

    M trying… 😍

  31. Liran Barsisa says:

    Are there any samples of this?
    I'd also like to see a sample of being able to do the animation without the need of 2 layouts.

  32. NoamKoKo says:

    Yes! Kotlin for the win!

  33. NoamKoKo says:

    Now explain how I make the transition response to scrolling and any other user progressive events.

  34. Kane says:

    Wow! Java is dying, should we thank Oracle?

  35. زعيمة العفاريت وافتخر says:

    hi android developers , i discover way to bypass google account verification in setup wizard that is Previously Synced with Gmail account (phone locked with gmail account ) , if you interested contact me

  36. Public Static Void says:

    Kotlin sucks ass!!!

  37. Jorge Escobar says:

    Using Kotling code for examples… ouch I think I shall be moving to Kotlin I guess.

  38. Android Brother BD says:

    Thanks for awesome video. Android AIDE tutorial! Android AIDE basic to advanced tutorial in my channel. Visit my channel.

  39. aflynch says:

    Thanks for not showing how to do this in Java…

  40. aflynch says:

    Wow, so this not implemented on the Java side of the framework as of 1/08/18. This really is bull shit. Thanks for fragmenting the code base.

  41. Laux Juggie says:

    Is it only me or this guy looks bald ed sheeran?

  42. Miguel Angel Manzano Melendez says:

    Accede rápido a los ajustes de Volumen de Audio o Medios.
    Download app!
    https://goo.gl/L2ypWV
    #audio #volume #Android #smartphone

  43. BRIGHT STUDIO says:

    where is java ??? wtf's this

  44. Unsupport says:

    why examples on stupid kotlin ? make java!!!!!!!

  45. north border tech training says:

    good content 🙂

  46. Julian Borrero says:

    Nice! Thank you!

  47. Coding in Flow says:

    I tried it, it's really easy to use. Placeholders are nice too.

  48. Mahmood Ali says:

    constraintSet.clone(R.layout.second_keyframe) // Error
    constraintSet.clone(this, R.layout.second_keyframe) // Need context

  49. Jeffrey Liu says:

    Today is google IO 2018, I tried android studio 3.2 canary with androidx, the ConstraintSet class doesn't seem to be working to me. And butterknife would not work, be careful.

  50. 暴雨心奴 says:

    Is there source code?

  51. Sami Sawani says:

    This is convenient!

  52. Guy Dviri says:

    why it's dosn't work within recyclerView viewHolders??

  53. Noa B says:

    Some code in Java:

    ConstraintLayout constraintLayout;

    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.keyframe_one);
    constraintLayout = findViewById(R.id.root_constraint_layout);
    }

    public void animateToKeyframe() {
    ConstraintSet constraintSet = new ConstraintSet();
    constraintSet.load(this, R.layout.keyframe_two);
    TransitionManager.beginDelayedTransition(constraintLayout);
    constraintLayout.setConstraintSet(constraintSet);
    }

    All the views that appear in both keyframes should have the same ids!
    Hope it helps 🙂

  54. Pablo Cegarra says:

    Please, this code… is useless

    fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.keyframe_one)
    constraintLayout = findViewById(R.id.constraint_layout) // member variable
    }

    fun animateToKeyframeTwo() {
    val constraintSet = ConstraintSet()
    constraintSet.load(this, R.layout.keyframe_two)
    TransitionManager.beginDelayedTransition();]
    constraintLayout.apply(constraintSet)
    }

    https://developer.android.com/training/constraint-layout/

  55. Mindaugas Viburys says:

    If you use several states that has shared and different views, this approach will not work.

  56. Benedict Contawe says:

    Is this animation good for animation of color changing?

  57. Youssef Shoaib says:

    What about MotionLayout?

  58. Naalein Grohiik says:

    Holy shit, why am I discovering this now!!

  59. Slobodan Antonijević says:

    Why isn't this working in a Fragment? When I try this in a Fragment I don't even get a flyover the final layout just pops in.

Leave a Reply

Your email address will not be published. Required fields are marked *