Skip to content

Latest commit

 

History

History
119 lines (92 loc) · 6.84 KB

README.md

File metadata and controls

119 lines (92 loc) · 6.84 KB
Raw

ConstraintLayout-Sample

Android Arsenal

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.