ConstraintLayout Live Templates.

I found a cool trick that allows me to prepare ConstraintLayout xmls way faster and with less typing so I thought I’d share.

Android Studio / Intellij allows you to quickly and easily add custom live templates. I use that feature a lot.

whenever I recognize anything resembling boilerplate.. I select it and hit “Save as live template”. (I use it so much I have a shortcut for it)

some turned out to be more useful than others..

but my favorites by far is the entire suite I prepared for dealing with ConstraintLayout.

below is almost my entire collection, I bolded out the Abbreviation I use, and added the template right after.

also at the bottom I added a link to import all those + a few more that help me handle chaining constraints.

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

self explanitory, I use this whenever I want to constraint a View to all the edges of the ConstraintLayout.

over:
app:layout_constraintBottom_toBottomOf=”@+id/$ID$”
 app:layout_constraintEnd_toEndOf=”@+id/$ID$”
 app:layout_constraintStart_toStartOf=”@+id/$ID$”
 app:layout_constraintTop_toTopOf=”@+id/$ID$”

I use this one when I want to completely constraint a View to another View.

below:
app:layout_constraintEnd_toEndOf=”@+id/$ID$”
 app:layout_constraintStart_toStartOf=”@+id/$ID$”
 app:layout_constraintTop_toBottomOf=”@+id/$ID$”

I use this one to place a View directly below another View, and constraint it horizontally to the same View as well. 
similarly I have above, tostart and toend

above:
app:layout_constraintBottom_toTopOf=”@+id/$ID$”
 app:layout_constraintEnd_toEndOf=”@+id/$ID$”
 app:layout_constraintStart_toStartOf=”@+id/$ID$”
tostart:
app:layout_constraintBottom_toBottomOf=”@+id/$ID$”
 app:layout_constraintEnd_toStartOf=”@+id/$ID$”
 app:layout_constraintTop_toTopOf=”@+id/$ID$”
toend:
app:layout_constraintBottom_toBottomOf=”@+id/$ID$”
 app:layout_constraintStart_toEndOf=”@+id/$ID$”
 app:layout_constraintTop_toTopOf=”@+id/$ID$”

but it doesn’t end here!! centerv and centerh, to center a View relative to the parent.

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

or horizontal and vertical to do the same, only relative to a View.

vertical:
app:layout_constraintTop_toTopOf=”@+id/$ID$”
 app:layout_constraintBottom_toBottomOf=”@+id/$ID$”
horizontal:
app:layout_constraintStart_toStartOf=”@+id/$ID$”
 app:layout_constraintEnd_toEndOf=”@+id/$ID$”

after all those, I also noticed that the result is that adding just one constraint also required a lot of typing just to trigger the correct auto complete, so I added a bunch more one liners, and I used only the initials to make it fast.

tt: app:layout_constraintTop_toTopOf=”@+id/$ID$”
tb: app:layout_constraintTop_toBottomOf=”@+id/$ID$”
bb: app:layout_constraintBottom_toBottomOf=”@+id/$ID$”
bt: app:layout_constraintBottom_toTopOf=”@+id/$ID$”
ss: app:layout_constraintStart_toStartOf=”@+id/$ID$”
ee: app:layout_constraintEnd_toEndOf=”@+id/$ID$”
se: app:layout_constraintStart_toEndOf=”@+id/$ID$”
es: app:layout_constraintEnd_toStartOf=”@+id/$ID$”

and I added a few more for the special case of constraining to the parent

ttp: app:layout_constraintTop_toTopOf=”parent”
bbp: app:layout_constraintBottom_toBottomOf=”parent”
eep: app:layout_constraintEnd_toEndOf=”parent”
ssp: app:layout_constraintStart_toStartOf=”parent”

Link to the templates:

how to import:
https://www.jetbrains.com/help/idea/sharing-live-templates.html

Important!! remember to be careful when downloading stuff from strangers on the internet!