Constraint Layout Demo

Additional

Language
Java
Version
N/A
Created
May 12, 2018
Updated
Jul 22, 2018
Owner
Anitaa Murthy (anitaa1990)
Contributor
Anitaa Murthy (anitaa1990)
1
Activity
Badge
Generate
Download
Source code
APK file

Announcement

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" />

a. b. c. d. e. f. g. h. i. j. k. l. m. n.

layout_constraintRight_toRightOf  — The right of the widget will be aligned to the right of the parent view.
layout_constraintRight_toLeftOf  — The right of the widget will be aligned to the left of the parent view.
layout_constraintRight_toBottomOf  — The right of the widget will be aligned to the bottom of the parent view.
layout_constraintRight_toTopOf  — The right of the widget will be aligned to the top of the parent view.
layout_constraintLeft_toRightOf  — The left of the widget will be aligned to the right of the parent view.
layout_constraintLeft_toLeftOf  — The left of the widget will be aligned to the left of the parent view.
layout_constraintLeft_toBottomOf  — The left of the widget will be aligned to the bottom of the parent view.
layout_constraintLeft_toTopOf  — The left of the widget will be aligned to the top of the parent view.
layout_constraintBottom_toBottomOf  — The bottom of the widget will be aligned to the bottom of the parent view.
layout_constraintBottom_toTopOf  — The bottom of the widget will be aligned to the top of the parent view.
layout_constraintTop_toBottomOf  — The top of the widget will be aligned to the bottom of the parent view.
layout_constraintTop_toTopOf  — The top of the widget will be aligned to the top of the parent view.
layout_constraintStart_toStartOf  — The start of the widget will be aligned to the start of the parent view.
layout_constraintEnd_toEndOf  — The end of the widget will be aligned to the end of the parent view.

2. Some commonly used attributes in ConstraintLayout: