Android ConstraintLayout Example

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It’s similar to RelativeLayout in that all views are layered out according to relationships between sibling views and the parent layout, but it’s more flexible than RelativeLayout and easier to use with Android Studio’s Layout Editor.

The ConstraintLayout is also compatible right down to API level 9.

Before going into deeper, checkout my other post on jetpack.

Room Database Android Example [Beginners]

DataStore – Jetpack alternative for SharedPreference

Constraints

A constraint defines a relationship between two widgets in the layout and controls how those widgets will be positioned within the layout.

The aim of the ConstraintLayout is to help reduce the number of nested views, which will improve the performance of our layout files.

For Example, I have created EditText with Constraints.

<EditText android:id="@+id/editText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputType="textPersonName" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

ConstraintLayout features several more attributes:

  • constraintTop_toTopOf — Align the top of the desired view to the top of another.
  • layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
  • layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
  • layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
  • layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
  • layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
  • layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
  • layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
  • layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
  • layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
  • layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
  • layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
  • If desired, attributes supporting start and end are also available in place of left and right alignment.

Chains

What are chains?

Chains are a specific kind of constraint which allows us to share space between the views within the chain and control how the available space is divided between them. The closest analog with traditional Android layouts is weighted in Linear Layout but chains do far more than that, as we shall see.

Creating a chain

There are three possible modes: spread, spread_inside, and packed.

Packed Chain

The final mode is which packed will pack the views together (although you can provide margins to separate them slightly), and then centers the group within the available space.

Packed Chain

Spread Chain

The default mode is spread mode, and this will position the views in the chain at even intervals within the available space.

Spread Chain

The next mode is spread_inside which snaps the outermost views in the chain to the outer edges and then positions the remaining views in the chain at equal intervals within the available space.

spread_inside

Guidelines

A guideline is a visual guide which will not be seen at runtime that is used align other views.

Guidelines can be oriented either horizontally or vertically.

Creating a Guideline

To create a vertical guideline you do so by right-clicking on the blueprint view and selecting from Add Vertical Guideline the context menu.

Using guidelines

Dimensions

Sometimes we need to create views which have a fixed aspect ratio. This is particularly useful with ImageView we need to display images which come from a feed, and we know that any images we get will be a specific aspect ratio.

This allows us to position a view along the vertical axis using a bias value, this will be relative to it’s constrained position.

attribute in our XML like,

app:layout_constraintVertical_bias="0.5"

This allows us to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position.

attribute in our XML like,

app:layout_constraintHorizontal_bias="0.5"

The baseline constraint allows use to align the baseline of multiple textviews, regardless of their text sizes.

Baseline contains handles can only be constrained to another baseline.

Auto-connect allows you to place a view inside the layout editor and have it automatically calculate and set the constraints for you.

Delete Constraints

Delete All Constraints

Let’s do the Example program using ConstraintLayout.

In this Login And Register Example, I am going to create Layout using ConstraintLayout and do Layout Animation Using ConstraintSet.

Setting up

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

And that’s it, Ready to go!

Download the example from GITHUB.

Leave a Reply

Your email address will not be published. Required fields are marked *