How to use ConstraintLayout in Xamarin.Android

Introduction:
ConstraintLayout is to help reduce the number of nested views, which will improve the performance of our layout files. The layout class also makes it easier for us to define layouts than when using a RelativeLayout as we can now anchor any side of a view with any side of another, rather than having to place a whole view to any side of another.

Requirements:

This article source code is prepared by using Visual Studio Community for Mac (7.3.2). And it is better to install latest visual studio updates from here.
This sample project is Xamarin.Android project and tested in emulator.

Description:

This article can explain you below topics:

1. Why we need to use ConstraintLayout?
2. Exploring ConstraintLayout properties.

3. How to use ConstraintLayout to align child views in Xamarin.Android?

1. Why we need to use ConstraintLayout?

If you also develop iOS applications, constraint is a very well down feature. In addition to iOS constraint features, ConstraintLayout is the first layout that is used by tool (LayoutManager) is essentially a defined rule for a view which declares it’s positioning and alignment on screen. This user experience designed for Android Studio only.

Highlights of ConstraintLayout:

Best addition to iOS constraints.
ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups).
We can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.
Easier for us to define layouts than when using a RelativeLayout as we can now anchor any side of a view with any side of another, rather than having to place a whole view to any side of another.
ConstraintLayout is available in an API library that's compatible with Android 2.3 (API level 9) and higher.

2. ConstraintLayout properties:

For example, the attributes of a relative layout allow us to position a view using:

layout_toRightOf
layout_toLeftOf
layout_toTopOf
layout_toBottomOf

However, the ConstraintLayout features several more attributes:

layout_constraintTop_toTopOf — Align the top of the desired view to the top of another.
layout_constraintTop_toBottomOf — Align the top of the desired view to the bottom of another.
layout_constraintBottom_toTopOf — Align the bottom of the desired view to the top of another.
layout_constraintBottom_toBottomOf — Align the bottom of the desired view to the bottom of another.
layout_constraintLeft_toTopOf — Align the left of the desired view to the top of another.
layout_constraintLeft_toBottomOf — Align the left of the desired view to the bottom of another.
layout_constraintLeft_toLeftOf — Align the left of the desired view to the left of another.
layout_constraintLeft_toRightOf — Align the left of the desired view to the right of another.
layout_constraintRight_toTopOf — Align the right of the desired view to the top of another.
layout_constraintRight_toBottomOf — Align the right of the desired view to the bottom of another.
layout_constraintRight_toLeftOf — Align the right of the desired view to the left of another.
layout_constraintRight_toRightOf — Align the right of the desired view to the right of another. If desired, attributes supporting start and end are also available in place of left and right alignment.

3. How to use ConstraintLayout to align child views in Xamarin.Android?

We need to follow below steps to use ConstraintLayout in Xamarin.Android

Step 1: Create the new Xamarin.Android project.

Launch Visual Studio for Mac.
On the File menu, select New Solution.
The New Project dialog appears. The left pane of the dialog lets you select the type of templates to display. In the left pane, expand Android > App > General > Android App and click on Next.
Enter your App Name (Ex: ConstraintLayoutSample). And click on Next button.
You can choose your project location like below.

Step 2: Adding ConstraintLayout Package
We need to add "Xamarin.Android.Support.Constraint.Layout" package to support ConstraintLayout in our Xamarin.Android project. So to add this package right on Packages > Add Packages.

Search for ConstraintLayout and add package by accepting licence.

After package should add to project like below.

Step 3: How to use ConstraintLayout?

Now we are ready to use ConstraintLayout and it's properties. So to make UI Open your Main.axml file from project and add your code for the same.

Demo 1:

For example if you want to align Button with Horizontal center:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

If you want to align Button with Vertical center:

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"

And full code to align Button vertical, horizontal center in ConstraintLayout

<?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"
tools:context="com.example.user.myapplication.MainActivity">
<Button
android:id="@+id/btnOne"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Demo 2:

For example, there is two button(Button1& Button2). And "Button1" need to be in vertical & horizontal center and "Button2" need to be below of Button1.

<?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"
tools:context="com.example.user.myapplication.MainActivity">
<Button
android:id="@+id/btnOne"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btnTwo"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button2"
app:layout_constraintLeft_toLeftOf="@id/btnOne"
app:layout_constraintTop_toBottomOf="@id/btnOne" />
</android.support.constraint.ConstraintLayout>

Reference:

https://developer.android.com/training/constraint-layout/index.html

You can directly work on below sample source code to understand ConstraintLayout.

FeedBack Note: Please share your thoughts, what you think about this post, Is this post really helpful for you? Otherwise, it would be very happy, if you have any thoughts for to implement this requirement in any other way? I always welcome if you drop comments on this post and it would be impressive.

Follow me always at @Subramanyam_B
Have a nice day by Subramanyam Raju :)