ConstraintLayout beginners guide Part I: Designing a repsonsive UI for Android apps
Tags: android, beginners, mobile, ui
Published: 2019-01-10 00:47:35

---
title: ConstraintLayout beginners guide Part I: Designing a repsonsive UI for Android apps
published: true
description: Android is an OS that runs on thousands of different devices, and designing views for its apps can be a problem. Here's how to address that issue using Constraint Layout.
tags: android, beginner, mobile, UI
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ig5pgipoetagsjs45rwp.PNG
---

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](https://www.statista.com/statistics/266136/global-market-share-held-by-smartphone-operating-systems/) 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](https://developer.android.com/training/constraint-layout/) 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](https://developer.android.com/studio/write/layout-editor).

To access the LayoutEditor click on the 'Design' tab.
![Editor tab](https://thepracticaldev.s3.amazonaws.com/i/pu0223s5qmfrvsld7m31.PNG)

###LayoutEditor overview

![Overview](https://thepracticaldev.s3.amazonaws.com/i/ncdkqpjnl9ft7afzdnr7.jpg)

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.

![Boundaries](https://thepracticaldev.s3.amazonaws.com/i/re3vebecryv82d5wt4tb.PNG)

###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:

![Boundaries](https://thepracticaldev.s3.amazonaws.com/i/sae2loda62vekc21psx0.jpg)

**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.

![MatchConstraint](https://thepracticaldev.s3.amazonaws.com/i/ht7svcuyljelhsmbj8l9.jpg)

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.
![Center View](https://thepracticaldev.s3.amazonaws.com/i/1yv9iuox61t0pwyhxqzt.PNG)

You can also center a view considering the connected views, for example: 
![Center View](https://thepracticaldev.s3.amazonaws.com/i/hxeqnaa7euvoxfce3krk.PNG)
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.
![Overview](https://thepracticaldev.s3.amazonaws.com/i/sez4pk0rig8zy8lyx70f.png)
![Overview](https://thepracticaldev.s3.amazonaws.com/i/tok90zls3pstpoz0k1o7.png)

**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:
![Overview](https://thepracticaldev.s3.amazonaws.com/i/9kyl8e41m4qhxm334q2m.PNG)

**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.
![Overview](https://thepracticaldev.s3.amazonaws.com/i/x0cxmvqb8go6huas2mw6.PNG)

**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:
![Overview](https://thepracticaldev.s3.amazonaws.com/i/iyqqj96e41jtjt27opwz.PNG)

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.