Popularity
3.0
Stable
Activity
0.0
Stable
102
6
43

Description

A demo app to showcase constraint layout implementation in Android

Programming language: Java

ConstraintLayout-Sample alternatives and similar packages

Based on the "Data binding" category.
Alternatively, view ConstraintLayout-Sample alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of ConstraintLayout-Sample or a related project?

Add another 'Data binding' Package

README

ConstraintLayout-Sample

A demo app to showcase constraint layout implementation in Android

Build a Responsive UI with ConstraintLayout

Add following library to your app gradle file.

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

Some basic features 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 if ConstraintLayout: a. layout_constraintTop_toTopOf — Align the top of the desired view to the top of another. b. layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another c. layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another. d. layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another. e. layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another. f. layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another. g. layout_constraintLeft_toLeftOf — Align the left of the desired view to the right of another. h. layout_constraintRight_toTopOf — Align the right of the desired view to the top of another. i. layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another. j. layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another. k. layout_constraintRight_toRightOf — Align the right of the desired view to the right of another.
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 is to position a view along the horizontal axis using a bias value, this will be relative to it’s constrained position. For example: app:layout_constraintHorizontal_bias="0.5" will center a view horizontally. Using Vertical Bias: This is to position a view along the vertical axis using a bias value, this will be relative to it’s constrained position. For example: app:app:layout_constraintVertical_bias="0.5" will center a view vertically.

4. How to resize a view? Using app:layout_constraintWidth_default="wrap" (with width set to 0dp) .If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them)

All of the above steps can be found inside the demo app. Constraint Layout is kinda complex to learn (atleast for me) so I just wanted to start off with a very very basic version of it and go from there. And this app is the result.

Some of the articles I followed while implementing this can be found here and here and here

Sample App