Constraint layout for different screen sizes
In my beginnings, as Android Developer I have learned to use Linear Layouts and Relative Layouts. At the time I thought the Android Developers do not need anything else related to views because everything seemed perfect in my eyes. Next, to me, I had a colleague doing iOS. With the time I realized that he was faster at creating views when we had to build the same view. He was not a magician, so asked him to learn more. He explained to me that he uses Constraint layouts for views and he could use only one view for all different screen sizes. Instead, I had to create different views to make the view to look good on different screens. Sometime later I learned that Google I/O introduced C.L.
How could we create a single view that can look good on different devices?
Well, let’s start.
As first, we need to import constraint-layout at grandle:
compile ‘com.android.support.constraint:constraint-layout:1.0.2’Also, we are going to use Guidelines.
At any view that I create, I add four guidelines at every corner of the view like the image below.
Then let’s add a button which gets constraint by our four guidelines.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:id="@+id/guidelineTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.02"/>
<android.support.constraint.Guideline
android:id="@+id/guidelineLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.02"/>
<android.support.constraint.Guideline
android:id="@+id/guidelineRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.98"/>
<android.support.constraint.Guideline
android:id="@+id/guidelineBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.98"/>
<Button
android:id="@+id/btnHappy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
android:text="Happy Button :)"
app:layout_constraintBottom_toTopOf="@+id/guidelineBottom"
app:layout_constraintEnd_toStartOf="@+id/guidelineRight"
app:layout_constraintStart_toStartOf="@+id/guidelineLeft"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>The example above was a little taste.
Let’s create a login view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
android:id="@+id/guidelineTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
<android.support.constraint.Guideline
android:id="@+id/guidelineLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.2"/>
<android.support.constraint.Guideline
android:id="@+id/guidelineRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.8"/>
<android.support.constraint.Guideline
android:id="@+id/guidelineBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.8"/>
<android.support.constraint.ConstraintLayout
android:id="@+id/consraintLayoutLoginView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toTopOf="@+id/guidelineBottom"
app:layout_constraintEnd_toStartOf="@+id/guidelineRight"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/guidelineLeft"
app:layout_constraintTop_toTopOf="@+id/guidelineTop"
app:layout_constraintVertical_bias="0.0">
<android.support.constraint.Guideline
android:id="@+id/guidelineLoginView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2" />
<android.support.constraint.Guideline
android:id="@+id/guidelineLoginView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.4" />
<android.support.constraint.Guideline
android:id="@+id/guidelineLoginView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.6" />
<android.support.constraint.Guideline
android:id="@+id/guidelineLoginView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<EditText
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:hint="Username"
app:layout_constraintBottom_toTopOf="@+id/guidelineLoginView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guidelineLoginView1" />
<EditText
android:id="@+id/button9"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:hint="Password"
app:layout_constraintBottom_toTopOf="@+id/guidelineLoginView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guidelineLoginView2" />
<Button
android:id="@+id/button10"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Login"
app:layout_constraintBottom_toTopOf="@+id/guidelineLoginView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/guidelineLoginView3" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>I have used the same techniques as in the earlier example. This time I have created a container for the login items and inside of it I have also added three horizontal guidelines.
This is how the login view looks on different screens.
Conclusion
Constraint layout gives the possibility to build the views faster in Android and with the help of guidelines this feature becomes more powerful.
