Posted on

Android ConstraintLayout take 2


Android ConstraintLayout take 2
Designed by Freepik

 

Hey there, before I tried to use Android ConstraintLayout a few times and it was just so much pain. Recently there was a new beta 5 version release, let’s see what there’s now.

I’m using Android Studio 2.3 beta 4 and feel like Design mode improved. Now I’m starting to see that it’s going to be a faster way of creating layouts.  Let’s see at the many things that impressed me and which already better than Text editor.

Prefilled attributes

One great thing about ConstraintLayout and Design Mode in general is prefilled attributes, which means you need to type less. Most important ones are displayed in properties side bar. Switching between wrap content, match parent is one mouse click away.

Android ConstraintLayout take 2

Wrap content, fixed, which is dp size and match constraints. Although it’s more action required to make our view’s width/height to match parent. As is comes from the layout name, it’s all about constraints. In XML it’s those 3 lines for match parent width

constraintTop/Bottom and height of 0dp for height match parent.

In Design Mode you ether right click on view and set Center Horizontally in Parent and then set width to 0dp or click on the arrows from screenshot above and set to match constraints. That’s your regular match parent. And make sure there’s no margins set.

When you right click one a view there’s an Expand Horizontally/Vertically option as well, although sounding like it should actually make match parent, it does some weird hardcoded width/height in dp to the device you’re currently testing in. Which I get no clue why would you use this option yet.

Once again in the Properties side bar you have all your attributes prefilles, you don’t need to type anything. You can click view all properties to show them all. Of course it’s an inconvenient way to write your layouts. Only useful if you’re researching available attributes. What you should do there is add the ones you use most often to favorites. This will make those appear in Properties side bar by default if it wasn’t there. Speed is everything!

Android ConstraintLayout take 2Android ConstraintLayout take 2

Zoom In

One more thing is that it’s really hard to create constraints when there’s many views. That’s why I zoom from 33% up to 50% in Design Mode to see in more details. Otherwise setting constraints will be a big pain for you causing lots frustration. Zoom in

Bugs

Well, beta 5 feels already much better, it’s the most close to release than what was released in May of last year. But there’s still bugs up there. One of which is remaining margins in Design Mode. You set margins to 0 in Design Mode, but it does nothing sometimes, it’s because margin remains. That’s why you still need to go to Text Mode and check XML code. No other bugs found so far.

Aspect Ratio

This one is just amazing! What you basically get with ConstraintLayout is PercentegeRelativeLayout on steroids. It’s never been easier to set ImageView aspect ratio. Just look at it!

First you need to set one of sides to 0 dp – ether width or height or set to match constraints in the square selector. And then click on the edge of this square in Properties.

But this feature available from Android Studio 2.3 only

Android ConstraintLayout take 2      Android ConstraintLayout take 2

 

 

 

After which you’ll have ratio box. One again you need to set at least width/height to match constraints/ 0dp for this angle to appear. It won’t work if you have both fixed size dimensions. And it works for any view type of course. No typing required, no switching to percent layouts, super easy and fast!

It Can Lie

It might sound weird, but I’ve never seen using tools namespace (true for IDE preview only) for positioning a view. Apparently it’s needed for ConstraintLayout, so sometimes I go to XML and remove absolute position attribute, so it doesn’t confuse me with irrelevant view position.

It’s Not Hardcoded

Although as it might feel from using Design Mode it’s not hardcoded. At least you shouldn’t make it. Let’s say we have this top FloatingActionButton.

And we set top backdrop image aspect ratio to 16:9, which means that its height is varies depending on device. So we cant hardcode margin top for this FAB. And we’ve never did. In CoordinatorLayout it’s those two attributes

In ConstraintLayout it’s those two lines

Or in Design Mode attach top constraint to the bottom of app bar and bottom constraint as well. Which makes center of your view align the bottom of app bar.

Missing Chain

No, this one is not about chains. It’s about what was missing in RelativeLayout – centerOf attribute. Sometimes you want to position a view in center of other view using RelativeLayout. It’s impossible, you’ll have to wrap the whole thing with a FrameLayout. No more! Using constraints from above you can position it center of anything, not only parent! And everything is super quick and easy to do in Design Mode

Core Principle

That’s where my core ConstraintLayout Principle comes from. Don’t set view position by moving it (dragging it), set it by setting constraints. After you set constraints you can drag it, then it’s bias values changing, which isn’t hardcoded. And beware of hardcoded generated dimensions. In all the other aspects Android ConstraintLayout is already super easy and way way faster that any other text-based layout. Most of all, it’s flat, which means it’s great for Design Mode.

 

Alright, today I had a very positive experience with ConstraintLayout than before. Totally recommend you start writing with it in Design Mode if you haven’t yet. It’s definitely already something that I  can and will be using in my apps. Hope those key things help you get started with it. You can save bunch of time already just by not having to type attributes. All the most important are in the side bar, if you want to add some more there – add them to favorites.

At its core it has the feeling of PercentRelativeLayout with great improvements. OK, thanks for reading. Don’t forget to subscribe, follow me on G+, Twitter, Facebook and share with friends if you think they will benefit from it!