ConstraintLayout-Sample

A demo app to showcase constraint layout implementation in Android

Please checkout the medium article here for a detailed explanation on how to build the above user interface.

Some of the common concepts in ConstraintLayout

1. How to set Aspect Ratio:

Using app:layout_constraintDimensionRatio="H,3:1"

H,3:1 will always make the ImageView appear 3 times wider than height. The prefix H or W tells ConstraintLayout which dimension should respect the ratio. If it is H then it means width will be first computed from other constraints and then height will be adjusted according to the aspect ratio.

<ImageView
    android:id="@+id/image"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintDimensionRatio="H,16:9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

2. Some commonly used attributes in ConstraintLayout:
a. layout_constraintEnd_toEndOf — The end of the widget will be aligned to the end of the parent view. b. layout_constraintStart_toStartOf — The start of the widget will be aligned to the start of the parent view. c. layout_constraintTop_toTopOf — The top of the widget will be aligned to the top of the parent view. d. layout_constraintTop_toBottomOf — The top of the widget will be aligned to the bottom of the parent view. e. layout_constraintBottom_toTopOf — The bottom of the widget will be aligned to the top of the parent view. f. layout_constraintBottom_toBottomOf — The bottom of the widget will be aligned to the bottom of the parent view. g. layout_constraintLeft_toTopOf — The left of the widget will be aligned to the top of the parent view. h. layout_constraintLeft_toBottomOf — The left of the widget will be aligned to the bottom of the parent view. i. layout_constraintLeft_toLeftOf — The left of the widget will be aligned to the left of the parent view. j. layout_constraintLeft_toRightOf — The left of the widget will be aligned to the right of the parent view. k. layout_constraintRight_toTopOf — The right of the widget will be aligned to the top of the parent view. l. layout_constraintRight_toBottomOf — The right of the widget will be aligned to the bottom of the parent view. m. layout_constraintRight_toLeftOf — The right of the widget will be aligned to the left of the parent view. n. layout_constraintRight_toRightOf — The right of the widget will be aligned to the right of the parent view.

Note: Within a ConstraintLayout, side margins for a child view will only take effect if that side is constrained to another view.

  <!-- From the below example you can see that if we need to add a textView below the ImageView, 
       then we need to add  app:layout_constraintTop_toBottomOf="@+id/profile_image" this line.
       Alternatively, if we need to add margin between the imageview and textview, we need to add a
       constraint between the textView and the imageView -->
       
  <android.support.constraint.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    
    <com.an.constraintlayout.views.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="@dimen/profile_item_image_size"
        android:layout_height="@dimen/profile_item_image_size"
        app:layout_constraintHorizontal_bias="0.5"
        android:layout_marginLeft="@dimen/margin"
        android:layout_marginRight="@dimen/margin"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:civ_border_color="@android:color/transparent"
        app:civ_border_width="0dp" />

    <com.an.customfontview.CustomTextView
        android:id="@+id/txt_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/margin"
        android:layout_marginRight="@dimen/margin"
        android:layout_marginTop="@dimen/margin_small"
        android:ellipsize="end"
        android:maxEms="6"
        android:maxLines="1"
        android:textColor="@color/profile_item_name"
        android:textSize="@dimen/font_small"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/profile_image"
        app:textFontPath="fonts/gt_medium.otf" />


</android.support.constraint.ConstraintLayout>

3. How to center a view vertically or horizontally? Using Horizontal Bias: This means that the position of a view along the horizontal axis can be defined using a bias value. For example: app:layout_constraintHorizontal_bias="0.5" will center a view horizontally. Using Vertical Bias: This means that the position of a view along the vertical axis can be defined using a bias value. For example: app:layout_constraintVertical_bias="0.5" will center a view vertically.

4. How to resize a view? Using app:layout_constrainedHeight="true" This will wrap the CardView height according to its contents. Using app:layout_constrainedWidth="true" This will wrap the CardView width according to its contents.

You can checkout some of the other constraints we have not looked at in this article.

• Chains
• Guideline
• Dimension Constraints
• Circular Positioning
• Visibility Behaviour