Posted on

Android ConstraintLayout take 2 pt.2


Android ConstraintLayout take 2 pt.2

Designed by Freepik

Let’s continue with replacing all our Android layouts to ConstraintLayout. In previous post we looked at how to replace FrameLayout and Relative/Percent layouts. The only thing left is LinearLayout. Let’s get to it!

Let’s just recap. The most valuable thing FrameLayout gives is ability to overlay views and position them to center on another. That’s what you can do with setting constraints. Check the previous blog for that.

LinearLayout Rows

One of the most valuable things LinearLayout gives in creating horizontal/vertical rows of some heigh or width. Most common is 56dp height row with center vertical content. If you’re making it for RecyclerView row, then just set CoordinatorLayout height to 56dp. But if it’s a row in root layout then you’ll need some boundaries.

Boundaries are required to position row content center vertically to it. If your row goes under another view, you’ll just need one Space object, otherwise create two. That what it would look like

Android ConstraintLayout take 2 pt.2

As you see from arrows at the right, 56dp is the Space object top margin. In goes under the ImageView which isn’t on the screenshot. I use top ImageView as top boundary and Space as a bottom one. With LinearLayout you’d need 3 levels of layouts. One for root, another for horizontal row and third one for vertical textviews. With ConstraintLayout it’s just one layer.

LinearLayout Weight

Another great feature of LinearLayout is weights. In ConstraintLayout it’s implemented with chains. Chains is when two or more views connect sides to each other. Although Design Mode chain editing available only on Android 2.3 which is still in beta for now. That’s what it looks like

Android ConstraintLayout take 2 pt.2

You still can create chains in AS 2.2, but not through Design mode. At the screenshot above I have equal spread of views and they have a wrap content size. If I want to give views weight, we set dimension to match constraints and set layout_constraintHorizontal_weight or vertical.

Android ConstraintLayout take 2 pt.2

This is still those three text views, but first one is with match constraints width and weight of 1, others have wrap content size.

Bug

There’s this annoying bug where biases keep changing to some messed up values even after deleting them in XML. That’s annoying, that’s why it’s not production use ready yet, but you can learn the thing and apply immediately when it’s stable release up there.

Run Side By Side

There’s lots of new features in Android Studio 2.3, so it’s better to have two versions side by side. That’s what I have – one for development, another for learning new features. Because most likely beta AS isn’t the best choice for development.

Although it obvious that in March – April, whenever there’s AS 2.3 rolling out, probably stable ConstraintLayout 1.0 will be at the same time as a core feature. Then we’ll all switch completely to one with Design Mode. It’s pretty raw now yet, I still don’t use it in production and don’t recommend.  That’s why it’s great to have two IDE’s versions to prepare for new features and don’t be like OMG! so many new features!

Those are layouts that can be left and never used again when there’s stable one rolled out: FrameLayout, LinearLayout, GridLayout, RelativeLayout, PercentFrame/RelativeLayout.

Others are gonna remain. Like CoordinatorLayout, this is still great as of behaviors.

 

Alright, it’s coming really soon. Very excited! Thanks for reading. Recommend you using latest 2.3 version. Don’t forget to subscribe, follow me on G+, Twitter, Facebook and share with friends if you think they will benefit from it!