Save time and improve productivity by using Live Templates for ConstraintLayout

With more than 2.5 billion active android devices today, it has become a challenging task to create a fully responsive user interface (UI) for Android developers. Each device comes with different screen sizes, density, aspect ratio etc. But everyone wants to their apps to look exactly same on all devices.

As Android ecosystem started growing year by year, Google started focusing more on solving problems of developers rather than adding new features. This led to the beginning of ConstraintLayout introduced first at Google IO 2016.



ConstraintLayout is a android.view.ViewGroup to efficiently arrange layouts for all sorts of screen sizes across different versions of Android without any nesting and complicated hierarchies and in a very flexible and easier way.

In this series of multiple articles, we are going to learn about different tricks and tips of ConstraintLayout and how to create awesome layouts on Android.


😐 ConstraintLayout in Normal Way

ConstraintLayout brings us a with a number of attributes and properties called as Constraints to help us make complex layouts. These attributes have big names such as layout_constraintTop_toTopOf or layout_constraintStart_toEndOf and so on. For the beginners, this might get confusing and maybe overwhelming. Here’s how a TextView is center on the whole screen.

Centering a TextView in ConstraintLayout

You can see that just to view the correct suggestion in auto-complete, we need to enter many characters. So, if you prefer XML / Text view more than Design view, then continue reading this article and see you can speed up working with ConstraintLayout.


🚒 Live Templates for Rescue

Live Templates are the code snippets that you can insert into code by typing their abbreviation and pressing tabor enter. You can view them in File -> Settings -> Editor -> Live Templates section in Android Studio.

Live Templates in Android Studio Settings

As you can see in the image above, there are already many templates such as Toast , visible added by Android Studio. You can create your own templates by clicking on the plus (+) button on the top right or import the ones from the internet.

You can read more about Live Templates here.

Live Code Templates in Android Studio
Code completion can improve your productivity by reducing how much you have...
wajahatkarim.com

I’m going to share few live templates in this article to accelerate the work with ConstraintLayout and show you how they will work.


➕ Importing ConstraintLayout Live Templates

First, download the ConstraintLayout Live Templates from the following link.

ConstraintLayout Live Templates
Download the ZIP file from my Today I Learned Github repository. - wajahatk...
github.com

  1. Choose File > Import Settings from the menu.

  2. Specify the path to the archive with the exported live template configuration.

  3. In the Import Settings dialog, select the Live templates checkbox and click OK.

  4. After restarting Android Studio, you will see the imported live templates on the File > Settings > Editor > Live Templates > ConstraintLayout Templates page in Android Studio.

ConstraintLayout Live Templates in Android Studio Settings

Now, let’s try some of these and see what happens.


✏️How to Use — Some Examples

center

The center template will put any view in the center of parent in the layout. Let’s try the TextView example now with center abbreviation. Instead of typing app:layout_constraintStart_toStartOf , app:layout_constraintEnd_toEndOf , app:layout_constraintTop_toTopOf , and app:layout_constraintBottom_toBottomOf , we will simply type center and press Enter. And voila.

Typing ‘center’ automatically adds all constraints to center the view

The center template adds these lines in your XML layouts.

app:layout_constraintTop_toTopOf=”parent” app:layout_constraintBottom_toBottomOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:layout_constraintEnd_toEndOf=”parent”


centerh

The ceneterh positions your view in the center of the parent horizontally by adding these lines.

```app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”```

centerv

The **centerv **positions your view in the center of the parent vertically by adding these lines.

app:layout_constraintTop_toTopOf=”parent”
app:layout_constraintBottom_toBottomOf=”parent”

vertical

The **vertical **will position your view in the center of another **View **instead of *parent *vertically by adding these lines.

app:layout_constraintTop_toTopOf=”@+id/VIEW_ID_GOES_HERE”
app:layout_constraintBottom_toBottomOf=”@+id/VIEW_ID_GOES_HERE”

Please note the **VIEW_ID_GOES_HERE **in the above code snippet. This will be asked by Android Studio by showing all the most relevant IDs in the suggestions box as shown below.


horizontal

Same as **vertical **but for the horizontal. This will position your view in the center horizontally to another view by adding these lines.

app:layout_constraintStart_toStartOf=”@+id/VIEW_ID_GOES_HERE”
app:layout_constraintEnd_toEndOf=”@+id/VIEW_ID_GOES_HERE”

📃 ConstraintLayout Live Templates in One Place

I’ve created a table document below to describe all the ConstraintLayout templates with their descriptions. You can try out on your compiler and see how they work. You can even customize their names, their values or even add your own new templates in **Live Templates settings **in Android Studio.

Once again, download the ConstraintLayout Live Templates from the following link and enjoy the faster implementation of complex layouts through ConstraintLayouts.

ConstraintLayout Live Templates
Download the ZIP file from my Today I Learned Github repository. - wajahatk...
github.com


If you liked this article, you can read my new articles below:

Build a One-on-One Android Chat App using Kotlin
Learn how to create a chat app in Android with CometChat Pro
link.medium.com

📆 Reflections on 2018 — My Year In Review
A Year of Open Source, Public Speaking, New Job, New House, and the Big NEW...
link.medium.com


Wajahat Karim is a graduate from NUST, Islamabad, an experienced mobile developer, an active open source contributor, and co-author of two books Learning Android Intents and Mastering Android Game Development with Unity. In his spare time, he likes to spend time with his family, do experiments on coding, loves to write about lots of things (mostly on blog and medium) and is passionate contributor to open source. In June 2018, one of his library became #1 on Github Trending. His libraries have about 2000 stars on Github and are being used in various apps by the developers all around the globe. Follow him on Twitter and Medium to get more updates about his work in Writing, Android and Open Source.

Also, if you have any questions you’d like him to answer, contact him through his website at wajahatkarim.com with DEAR WAJAHAT in the subject line.