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.
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: -
- Add the latest ConstraintLayout Library to your Android Studio
- Go to Tool> Android > SDK Manager
- Click on SDK Tool
- Under Support Repository select the “ConstraintLayout for Android” and “Solver for ConstraintLayout”
- Click on Apply and OK
- 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
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.
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 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.