My Hexaville
Spead the Word

Android ConstraintLayout ConstraintSet


android constraintlayout constraintsetDesigned by Freepik

 Hi, just watched a I/O talk about ConstraintLayout and learned some interesting stuff that I want to share. If you’re not familiar with ConstraintLayout, check this series of posts first.

 

Constraint Set

So by now you should be familiar with ConstraintLayout basics already. I just want to talk about latest stuff that I found interesting. First you need to use latest version

Finally we don’t need to go to Tools/SDK Manager to download latest version of ConstraintLaout. You should have this line in your project’s build.gradle file.

If you’re using latest Android Studio 3.0 – it’s already in default template of new projects.

Constraint set is basically just a set of layout params. You can apply this set to any ConstraintLayout, it doesn’t have to be a root layout, just any, by acceding it with id.

So basically it’s just two layouts where first is initial and second – one that you’re switching to. But instead of inflating layout you just reposition/resize views. This means that those two layouts got to have same views and ids

Basic Stuff

So that’s a pretty basic animation that you can get.

android constraintlayout constraintset

That’s what second layout looks like

android constraintlayout constraintset

And initial is identical, but second view has visibility of gone. Although it’s not animating some super complex stuff, you can do way more. Here’s Java code

ConstraintLayout#clone has multiple overloaded versions and it takes xml layout or inflated ConstraintLayout widget. Then changeConstraints method is triggered by click on a fab and all we need to call is setTwo.applyTo, first like is to make it animated

So is it useful, where can we use it? It looks like scene transition, so maybe you have some changes in UI that have some complex xml in result state.

Animate Layout Changes

If you know, in LinearLayout there is an amazing attribute

and when you do any changes to its children: add new, delete one, change visibility from gone to visible – it’s animated and looks amazing.

This attribute works for ConstraintLayout as well. So the animation above we can have implemented easy with just that flag, because it was just a visibility change basically. But with ConstraintSet you can do some really complex scene transitions if you have ones in mind

 

That’s all I wanted to say about ConstraintLayout for now, just one extra – in some versions of Android Studio creating chains by attaching one side to another and vice versa didn’t work. But you can always select needed views with mouse, holding it and use right mouse menu to create chains.

android constraintlayout constraintset

 

Once again, if you want to learn everything about ConstrtaintLayout – check this post.

Thanks for reading, don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends if you think they will benefit from it!


About the Author Ihor Klimov

Android developer, love statically typed programming languages and hate JavaScript. This blog is everything that I find exciting about Android development and more. Stay tuned and hope to see you again!

follow me on: