Skip to main content

Responsive Layout In Android Using Constraint Layout



Create Responsive UI with Constraint Layout, this layout enables us to create a large and complex UI hierarchy in flat view, a major advantage of this layout is that we no longer required nested view group. It is similar to relative layout but more flexible than Relative Layout and you can design the layout with Android Studio Layout Editor very easily. So here is the tutorial to create the flat user interface using Constraint Layout.



1. Introduction


ConstraintLayout is available in API library and it is compatible with  API level 9 and upper version. Its design technique is well supported in Android Studio Layout Editor. Using Android Studio Layout Editor you can create the beautiful layout design by just using the drag and drop rather than writing the complete code in XML files. So, in simple word, we can say that we can create flat, flexible layout with this Layout.

2. Add ConstraintLayout dependency to project


For adding the constraintLayout to your project we need to flow the below-mentioned steps: -Install Constraint Layout Package

  1. Add the latest ConstraintLayout Library to your Android Studio

  2. Go to Tool> Android > SDK Manager

  3. Click on SDK Tool

  4. Under Support Repository select the “ConstraintLayout for Android” and “Solver for ConstraintLayout”

  5. Click on Apply and OK

  6. Click on Finish and then OK


[caption id="attachment_126" align="aligncenter" width="407"] Constrain Layout Install[/caption]

7. Now we need to add the below code to our project level build.gradle file and click on sync project

dependencies {
'com.android.support.constraint:constraint-layout:1.0.1'
}


3. Add Constraint Layout to in XML


For adding the constraint Layout to in your XML files add below XML code to your top-level view.

<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.debugandroid.constraintlayoutdemo.MainActivity">

</android.support.constraint.ConstraintLayout>





4. Adding Constraint to Constraint Layout View


Now click on design tab just after the text mode and start adding the other layout view inside Constraint Layout. Here in below screen shots as you can see that be have added two item one is text View and another one is the button.



In this, as you can see that Text View are connected to left side of the main Layout and similarly on top and button are connected with TextView from the left side and right side with the main layout. It is called constraint for adding the constraint to your view you have to click the view and then click on the anchor point and drag the anchor to other views to connect.
In Constraint Layout, every view must have two constraints one is horizontal and one is vertical. You can create the constraint only between two constraint handlers and an anchor point which have the same baseline.
For removing the constraint click on view and click on constraint handler as given in below screen shots as  I have clicked on TextView constraint handler.

5. Converting Liner Layout to Constraint Layout


For converting the Layout from Linear Layout to Constraint Layout we need to just open the layout XML file in design mode and then right click on the Linear Layout and click on convert view to Constraint Layout. It will automatically convert your Linear Layout to required format using which you can start designing your layout using just drag and drop for creating the decent looking layout for your mobile application.


6. How to enable auto Constraint on or off


Auto Constraint on or off enable us to automatically add the constraint to your layout, for enabling this option you have to right click on Constraint Layout or any view then > Click on Constraint Layout > Turn On/Off Auto Connect

You can check out more about this here.

Comments

  1. […] this fragment, we are going to use the constraint layout, a Recycler View and Button to refresh the list of available network. The layout will look like as […]

    ReplyDelete

Post a Comment

Popular posts from this blog

Flutter How to Start Android Activity from Flutter View

Flutter and Dart is an excellent combination for creating the UI, but for accessing the platform-specific service we need to open platform-specific activity. So lets in this article we will explore how to start an android activity and access the service from Flutter View. Create a Project for this Android Activity Flutter View Demo Create a Project From File menu select the New Flutter Project Enter the project name Select the AndroidX support and click on next After the above, we step click on Finish We will have the following project structure created. Create the Second Activity in Android Just go to the android folder and open it in separate windows. We will have the following project structure. Create the Activity Just right-click on the Kotlin folder and create a blank activity from the menu. If you create the activity then you may be required to upgrade the Gradle and do some import. So Just click on update and wait for the project s

Kotlin Parcelable Array Objects Send To Activity

We know that IPC (Inter Process Communication) between the activity is an extremely important part of any application development. We often required that we need to send some data to other activity. For example, we may be required to send an array of data, data could be an Integer, String, Long, Double, Float or any other custom data objects. So, In this example, we are going to learn how to implement the Kotlin Parcelable Array object to send the data from one activity to second activity. What is Parcel? The parcel class is designed as a high-performance IPC transport. A Parcel can contain both flattened data that will be unflattened on the other side of the IPC, and references to live IBinde r objects that will result in the other side receiving a proxy IBinder connected with the original IBinder in the Parcel. Create Kotlin Parcelable Array Objects Parcelable is API for placing the arbitrary objects into the Parcel. In Actual in android app development, Parcelable is an interface

WordPress Android App with REST API And Retrofit

Retrofit is the library which converts your JSON data into Java object. In this tutorial, we will learn about how to implement the Retrofit to create a WordPress Mobile App. As we all know, WordPress is the one of the biggest CMS (Content Management System) of the world. Wordpress full fill the requirements for all most every type of the website. So, in this tutorial, I am going to learn how to create an Android App using the WordPress REST API and Retrofit. What is Retrofit? If you want to know about Retrofit, I would like to give you just a simple one-line explanation of the Retrofit. It is a library which converts your REST HTTP request to Java interface. We will learn how we can do all these stuff using some very simple steps. Further, you can check the Retrofit Library here . So, In this tutorial, we will use the Retrofit to retrieve all post and there except ( A short Description of Post) form a WordPress website. Prerequisite for using the Retrofit for WordPress Android App Ther