Posted on

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!


  • Andres Garcia

    Love ConstraintLayout !!
    I use it 90% of the time for about a year now but never use the Design UI, always in raw XML.
    Do you build your layouts using the Design UI much?

    • Nice, I use XML as well just because I still use good old layouts haha

      Habit

      Plus I don’t get it, does design mode work with ScrollVIew yet to position bunch of views if they don’t match on screen so you need to scroll in Design Mode to position views?

      In XML you don’t even care about it

      It’s like that Anko, you know. It’s a Koltin new way way to create layouts and there’s many more other ways to create layouts. People just get bored so much in software industry that they solve problems that aren’t needed to be solved and reinvent weels

      Wow, hardcore. XML attributes for ConstraintLayout are so long, plus prefilled/adding to favorite attributes in Design mode is way too awesome not to use it. CL I do only with design mode

      • Andres Garcia

        Yeah true that about the ScrollView in the Design UI.
        Got mates at work annoyed by it.
        Hopefully Google will sort it out soon coz ScrollViews are everywhere