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.