Design Flexible Layouts With Constraints

Part 1: Positioning

Constraint means restriction/limitation. ConstraintLayout allows you to create flexible layouts with providing constraints to widgets to position and size them.

There are different types of constraints available. Let’s discuss some of them

1. Center Position : An amazing thing about ConstraintLayout is how it deals with “constraints” which cannot be satisfied. Say if you have provided TextView constraints horizontally/vertically from both sides. So both constraints cannot be satisfied at same time. In that case widgets acts as they are being pulled from both sides . Hence, they remain in center of container.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

Centered TextView

2. Bias : It is attribute by which you can tweak the positioning to favor one side over another in conditions where constrains cannot be satisfied(such as in Center positioning).The bias attribute can used for both horizontal as well as vertical axis.

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:text="Press me"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintVertical_bias="0.6"
    app:layout_constraintHorizontal_bias="0.3"
    app:layout_constraintTop_toTopOf="parent" />

In above example, the app:layout_constraintVertical_bias=”0.6" indicates that the button is biased 60% from top rather than 50%(center by default) and app:layout_constraintHorizontal_bias=”0.4" indicates that button is biased 40% from start/left, i.e, left and bottom are shorter.

layout with Horizontal bias(30%), vertical bias(60%) and with horizontal & vertical bias applied together(30% & 60%), respectively.

3. Circular Position: We can constraint a widget center relative to another widget in circle(with radius and an angle) .The angles and radius are measured using center point of widgets. The following attributes are used:

• layout_constraintCircle
• layout_constraintCircleRadius : By default value is 0
• layout_constraintCircleAngle: By default value is 0

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:text="Button 1"
    android:background="@color/colorAccent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintHorizontal_bias="0.4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="20dp"
    android:text="Button 2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintCircleAngle="120"
    app:layout_constraintCircleRadius="180dp"
    app:layout_constraintCircle="@id/button1" />

without defining radius and angle

with radius equal to 180dp

with radius = 180dp and angle = 120°

That’s all for precise positioning in ConstraintLayout.

For next part check out Part 2

Suggestions are always invited!! Happy Coding