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:

https://drive.google.com/file/d/1ESEfSDYAxKMJcE8Pn4Uc9IKzbbkDOgbH/view?usp=sharing

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!

edit 2020–5–30 : changed “@+id/… to “@id/…

as suggested in the comments Reem Halamish

and updated download link with the change.