Since I've been learning how to develop mobile apps for Android, I would like to write posts about some useful things I've run into. It helps me to organize my ideas and it can be useful for developers who are getting started with Android development.
In this post I will talk about the advantages of ConstraintLayout, a tool that completely changed the way I design views for Android apps. Some of the features that I'll get into are:
- ConstraintLayout Overview
- Center Views
- Chain Views
In Part II, I'll make sure to cover Guidelines and other features.
What is ConstrainLayout and why do I need it?
There's a lot of devices with the Android OS with different screen sizes, and this can be an issue for developers...
As we know, the Android OS runs on a great variety of smartphones. According to Statista's article about OS worldwide distribution around 85% of the smartphones in the world run on Android and there are thousands (maybe millions) of different models running with this operating system.
This causes a well known issue for Android developers: building an app that run smoothly and look good in as many devices as possible.
There are ways to address this issue. Goolge released Constraint Layout in the 2016 I/O and this method has been widely recommended by and for developers to design responsive UI.
What is Constraint Layout?
As the official Android developer documentation states, ConstraintLayout allows developers to create complex layouts with a flat view hierarchy, which means there's no need to use nested ViewGroups, which helps for build efficency, memory usage and the device will take less time to create the view.
If used correctly, ConstrainLayout also simplifies designing views that look good when the screen is in landscape mode. It's all about knowing how to connect views with their parents and siblings.
In this tutorial I'll address some of the main features that ConstraintLayout provides using Android's LayoutEditor.
To access the LayoutEditor click on the 'Design' tab.
LayoutEditor overview
Now that you're in the LayoutEditor, you can see I've marked some of the most important sections. From left to right you can see:
-Palette: The palette contains most of the views you may need in your layout. To add a view (such a button) just find it in the Palette and drag it to your Component Tree. For some other views (from example views that come from libraries you added) you may need to go to the Text tab (xml) and add it manually.
-Component Tree: The component tree shows the hierarchy of your nested layouts (if required), the views inside each layout, the views' id and some other features like guidelines or barriers (we'll talk about them later).
-Device you're currently using: I considered it important because sometimes you want to see how the layout changes on bigger or smaller smartphones. The LayoutEditor provides some options to do this. And on the left, you can choose to change the orientation of the screen to landscape.
-Attributes: In this section you define the attributes (such as background, color, style, etc.) of a selected view, just like in the xml. To access more attributes, click on the double-arrow icon on the right. Another important part of Attributes is the square with dots/lines. You'll use it to define constraits and margins for a selected view.
ConstraintLayout features
Now that we've located our tools, it's time to get into what we can do with the LayoutEditor and ConstraintLayout.
The first thing to notice, is the dots that appear on the top, bottom, left and right of each view. By clicking on them and dragging the mouse, you can connect with another views to build your layout.
MatchConstraint, WrapContent or Fixed
When using ConstraintLayout you get to decide the way your view's boundaries (width and height) will be defined. We can edit this by clicking the icons (which might be arrows, a line or a zig-zag line) inside the square that represents our view or simply by editing the height and width attribures. From left to right:
Match Constraint: Match constraint will stretch your view to it's connections. As you can see in the image below, I've connected textView to textView2, and I've selected match_constraint as the width of textView. In the second image, I added a margin of '24' to the right of textview.
Remember that the more constraints you have in a layout, the more responsive it becomes.
Wrap Content: A common attribute on most ViewGroups. This simply means that te ViewGroup will be the size as its content. If we're talking about a TextView, the width will be as long as it's text.
Fixed: By choosing Fixed you define the width and length of the view. It's recommended to use dp over px or in as units, because it considers the density of the smartphone's screen and adapts the view to it. Set it by simply editing the height and width attributes.
Note: Notice that you can choose different options for height and width, for example, your width can be defined by MatchConstraint while your height uses WrapContent, just like in any other ViewGroup.
Center a view
We can center a horizontally or/and vertically by right-clicking it and choosing the center option.
You can also center a view considering the connected views, for example:
In this image, the texView at the left is centered horizontally considering the left constraint (parent) and the right constraint with textView2 (sibling). I've also have added a margin of 16 to both sides.
Chain Views
Using chains is helpful when you have several consecutive views, for example, when you have three buttons at the end of your layout, or when you have a Fragment or Activity for user registration in your app. You can use either vertical or horizontal chains by selecting the veiws you want to chain in your component tree, right clicking and selecting chain.
You can style a chain of views in 4 different ways:
- Spread
- Spread Inside
- Weighted
- Packed
Spread: This is the default style when you choose the chain option. First I centered the three buttons vertically, then I selected the horizontlal chain option.
Spread Inside: To use this option, you'll need to edit the attribute of 'layout_constraintHorizontal_chainStyle' directly form the xml. This is the result of applying a spread_inside horizontal chain to our buttons:
Weighted: When you choose either spread or spread_inside as style, you can set weights by editing each view 'layout_constraintHorizontal_weight' attribute. It works just as the 'layout_weight' in LinearLayout. In order for this to work, you must set the width attributes to match_constraint.
In this image, I've set the width of all of the buttons to match_constraint, and I've added a layout_constraintHorizontal_weight of .5 to the first button and .25 for the other ones, notice how the distribution changes.
Packed: To pack your views, you'll need to edit the attribute of 'layout_constraintHorizontal_chainStyle' (just like with spread_inside) and set it to packed. This is how packed chained views look like:
That's it for this post! any feedback from more experienced developers is always welcome. I'll make sure to upload Part II with more features and also brief tutorials of other Android Development topics.
Happy coding.
Top comments (2)
Until 2 months ago I was using Relative and Linear layout. Since I've got known Constraint layout, It has had a good effect on my coding and helped me a lot with saving time and energy. On the other hand it has made designing very attractive and pleasant. Thank you Miguel for your helpful post.
Glad you find it helpful! I also had the habit of using mostly LinearLayout for everything, but I always felt it was quite inefficient because I would end with a lot of nested LL's. As I began implementing ConstriantLayout my views became 'flatter' and more responsive to different screen sizes.