Learn Android — Creating Layouts — 2
The world’s most popular mobile OS — from phones and watches to cars and TVs.
Welcome to the Learn Android series. I’m going to share with you, weekly, why and how to start with Android and build your portfolio. I’ll share with you explanations and code snippets on how to implement the most important and basic things in Android.
In the previous article, we learned how to create layouts in XML using the LinearLayout as parent. In this article, we will again focus on creating layouts, but this time using the latest introduction — the ConstraintLayout.
Constraint Layout uses the concept of constraints to align views. The main advantage of using this layout is that, it reduces the hierarchy tree for complex layouts as compared to for example, with Linear Layout, which has a lot of nested view groups and components.
To define a view’s position, we need to add at least two constraints — one vertical and one horizontal. Nowadays, the Constraint Layout library is already added when we create a new repository / project. But if you want to add one to an older project, you can proceed as follows —
- In your module-level “build.gradle” file, include —
2. Add the library as a dependency in the same “build.gradle” file —
3. In the sync notification, click Sync Project with Gradle Files.
We can also convert an existing Linear Layout to Constraint Layout with a single click. To do that, we first need to open the layout file and then in the Component Tree, we just need to right-click on the LinearLayout parent and select Convert LinearLayout to ConstraintLayout option.
The main constraints for any view are —
- start — to — startOf : refers to the positioning of Constraint from current view’s left to the left of destination view whose ID we need to provide as a value.
- start— to — endOf : refers to the positioning of Constraint from current view’s left to the right of destination view whose ID we need to provide as a value.
- end— to — endOf: refers to the positioning of Constraint from current view’s right to the right of destination view whose ID we need to provide as a value.
- end— to — startOf : refers to the positioning of Constraint from current view’s right to the left of destination view whose ID we need to provide as a value.
- top — to — topOf : refers to the positioning of Constraint from current view’s top to the top of destination view whose ID we need to provide as a value.
- top — to — bottomOf : refers to the positioning of Constraint from current view’s top to the bottom of destination view whose ID we need to provide as a value.
- bottom — to — topOf : refers to the positioning of Constraint from current view’s bottom to the top of destination view whose ID we need to provide as a value.
- bottom — to — bottomOf : refers to the positioning of Constraint from current view’s bottom to the bottom of destination view whose ID we need to provide as a value.
We can also create constraints to “parent” view. After creating constraints, we see two types of lines — zigzag style and chain style line.
For example, if we want to center a view with respect to the parent, the constraints we will apply to the component are highlighted in bold —
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.android.myapplication.MainActivity">
<View
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>Now, let us create the similar layout that we created in the previous article. Here is the snapshot —
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.android.myapplication.MainActivity">
<View
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#2196F3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#F44336"
app:layout_constraintEnd_toStartOf="@id/view3"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/view1" />
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#4CAF50"
app:layout_constraintEnd_toStartOf="@id/view4"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/view2"
app:layout_constraintTop_toBottomOf="@id/view1" />
<View
android:id="@+id/view4"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="#FF9600"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/view3"
app:layout_constraintTop_toBottomOf="@id/view1" />
<View
android:id="@+id/view5"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="@android:color/darker_gray"
app:layout_constraintEnd_toStartOf="@id/view6"
app:layout_constraintHorizontal_weight="3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/view3" />
<View
android:id="@+id/view6"
android:layout_width="0dp"
android:layout_height="128dp"
android:background="@color/colorAccent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toEndOf="@id/view5"
app:layout_constraintTop_toBottomOf="@id/view3" />
</android.support.constraint.ConstraintLayout>Notice, how the hierarchy is reduced to flat one compared to the Linear Layout hierarchy, which might even get deeper and deeper as the complexity of the layout increases.
Also, are you thinking why have I used different attributes “left and right” instead of “start and end” while centering an element? The reason is that “start and end” can be used universally, whereas, “left and right” changes meaning when we want to distribute app in different languages which support RightToLeft writing compared to the common convention, like Arabic.
Constraint Layout uses similar weighted attributes as compared to Linear Layout. But is eases the arrangement of the subsequent child views without the need to create nested views for responsive arrangement as in Linear Layout parent view group. This helps us achieve the same goal in a fewer lines of code and also reduces the memory load on the mobile device to render the hierarchy.
We can also create Constraint Layout views using the Design Tab. As we hover to the top, bottom, start or end of the views, a hollow circle is displayed which indicates that the constraint can be dragged and dropped to the destination view. This automatically generates the code for us. But it’s always better to use the Text tab and write our own code so that we can modify it on our own terms.
For more information about Constraint Layouts, visit the official Android Documentation website!
