As promised, this is the blog talking about Guidelines inside the ConstraintLayout. It might not be as professional probably, but all ideas or corrections or suggestions are welcome.

Let’s jump to an xml example that i just created, and i will try and explain as much as i can from the xml , see below 🙂 .. 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraint_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/margin_mid_large"
    android:paddingRight="@dimen/margin_mid_large"
    android:paddingTop="@dimen/margin_mid_large">

    <android.support.constraint.Guideline
        android:id="@+id/left_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.0" />

    <android.support.constraint.Guideline
        android:id="@+id/right_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="1.0" />

    <android.support.constraint.Guideline
        android:id="@+id/top_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.0" />

    <android.support.constraint.Guideline
        android:id="@+id/bottom_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.55" />

    <android.support.constraint.Guideline
        android:id="@+id/lower_bottom_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="1.0" />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_guideline"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline"
        app:layout_constraintTop_toTopOf="@+id/top_guideline"
        app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:overScrollMode="never"
        app:layout_constraintBottom_toTopOf="@+id/lower_bottom_guideline"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline"
        app:layout_constraintTop_toTopOf="@+id/bottom_guideline"
        tools:listitem="@layout/item_option_list_individual" />

    <View
        android:id="@+id/trans_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:clickable="true"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@+id/lower_bottom_guideline"
        app:layout_constraintLeft_toLeftOf="@+id/left_guideline"
        app:layout_constraintRight_toLeftOf="@+id/right_guideline"
        app:layout_constraintTop_toTopOf="@+id/top_guideline"
        tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>

The xml as you see has 5 guidelines: left, right, top, bottom and another bottom guideline named “lower_bottom_guideline”. The idea is to display an image in the first 55% of the screen and in the remaining of the screen a recycler view. You can modify this as per your requirements. Some explanations may be well understood when you scroll down to see the final image.

Screen Shot 2560-07-26 at 11.30.21 AM

The guideline “left_guideline” is defined as a vertical line that takes 0% of the screen (thus, it would be on the left side of the screen).

Screen Shot 2560-07-26 at 11.32.41 AM

The guideline “right_guideline” is defined as a vertical line that takes 100% of the screen (thus, it would be on the right side of the screen).

Screen Shot 2560-07-26 at 11.46.51 AM

The guideline “top_guideline” is defined as a horizontal line that takes 0% of the screen (thus, it would be on the top side of the screen).

Screen Shot 2560-07-26 at 12.00.26 PM

The guideline “bottom_guideline” is defined as a horizontal line that takes 55% of the screen (thus, it would be on the 55% from the top). So we would take the top_guideline and this particular guidelines as constraints for any view that you might wish to occupy 55% of the screen.

I am sure you would by now understand the attributes in “lower_bottom_guideline”.

Screen Shot 2560-07-26 at 2.34.25 PM

We assign layout_width and layout_height the value “0dp” because we are defining the constraints below:

app:layout_constraintBottom_toTopOf
app:layout_constraintLeft_toLeftOf
app:layout_constraintRight_toLeftOf: this attributes states that we align the right of the imageView to the left of the invisible guideline that is placed towards the right of the screen
app:layout_constraintTop_toTopOf

Screen Shot 2560-07-26 at 3.03.21 PM

While in the code block above, the RecyclerView takes up the remaining part of the screen, based on the constraints assigned to the layout.

You can add more guidelines to this xml and experiment with it as you please. I hope this is helpful though.

I highly recommend that you read through the link below:

  1. Build a Responsive UI with ConstraintLayout
Advertisements