Programmatically Update View Constraints in Constraint Layout

Eric Diaz
Eric Diaz
May 3 · 2 min read

Constraint layout is by far one of the most versatile ViewGroups in the Android framework, However, the Kotlin code needed to update the constraints of a view programmatically can be a bit wordy. I have created a Constraint Layout Kotlin Extension that will make that process much easier to apply and cleaner to look at in code. Let’s get started!

Constraint Instructions

Here we have the ConstraintInstructions interface that has two simple implementations, ConnectConstraint and DisconnectConstraint.

ConnectConstraints takes 4 parameters that help describe the view you're looking to constrain and to what.

  1. startID — the resourceId of the view your looking to constrain.
  2. startSide — the side of the view passed as startID that you want to constrain. The values passed into the *side parameters should be constants from the ConstraintSet class. Common one are : ConstraintSet.START, ConstraintSet.TOP, ConstraintSet.END, or ConstraintSet.Bottom.
  3. endID — the resourceId of the view your looking to constrain to. Remember, usually, views are constrained to either another view or to parent, So if you want to constrain the startID view to another view, you would pass in the resourceId of that view. If you want to constrain to the parent, then pass in 0.
  4. endSide — the side of the view passed as endID that you want to constrain the startID view to.

DisconnectConstraint only has 2 parameters that describe the view and the constrained side of that view to clear.

  1. startID — the resourceId of the view your looking to remove a constraint from.
  2. startSide — the side of the view passed as startID that you want to remove a constraint from. This follows the same pattern as before by only corresponding to constants in the ConstraintSet class.

For better understanding, let’s see an example.

In XML, to constrain, we describe the sides and the view/parent to attach to. In the ImageView we apply app:layout_constraintTop_toBottomOf=”@id/title”, which is the same as saying;

This should read very similarly; The only thing that isn’t mentioned in XML is the view reference for startID because it’s the view we are applying the attribute to.

The Extension that puts it all together

Here we have an extension function that accepts a list of ContraintInstuctions and applies them to the child views of a ConstraintLayout. We start by creating a ConstriantSet Object and clone() the current constraints of the layout. Then we iterate through the instructions and match on class type. Whenever we want to connect constraints, we use the ConstraintSet function connect(); which accepts the same parameters we have in ConnectConstraint. If instead, we want to remove constraints from a view, we use the ConstraintSet function clear() and pass the same parameter in DisconnectConstraint. Lastly, we apply the new ConstraintSet changes to the layout and BOOM! We can quickly and neatly connect and disconnect constraints programmatically.

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store