How to design pages and user interface using ConstraintLayout

In previous tutorials, we got acquainted with  user interface design in Android, which were about different types of widgets, views, Layout, ViewGroup, LinearLayout, and RelativeLayout. In addition, there are other components in Android systems that can be used to design graphical interfaces and user interfaces. Another of these components that can be used to  design different types of pages is ConstraintLayout. In this part of the tutorial, we also want to tell you how to create pages and user interfaces using ConstraintLayout. It is recommended that you follow this tutorial article.

It should be noted that this layout has a shorter life and more flexibility compared to other layouts and can reduce the size and time of programming and XML file codes. It should be noted that if the code size is reduced, the page loading speed will increase, which will improve performance. So far, we know the advantage of using ConstraintLayout is that it will reduce the amount of code and increase the loading speed.

All you will learn in this part of the tutorial are as follows:

What is ConstraintLayout?
How to build pages and user interface using ConstraintLayout
What are connection lines and nodes in ConstraintLayout?
How to determine the distances from the left and bottom using Bias
How to determine the width and height of Widgets or Views
Remove Constraints
How can other ViewGroups be converted to ConstraintLayout?
How to  create Constraints automatically  How to set the default Margin distance
Use Baseline to align text widgets.
Use the Chain to create the same distances.
How to implement different styles for Chain
Autoconnection to Parent
What are the uses of Pack and Expand options?
Use Distribute to connect widgets automatically.
Edges
How to set Baselines automatically
How to align views with Guideline
Use the Barrier to set the range for widgets.
Delete, show, or change View by Group.
Use Flow to change the layout.
How to move widgets in groups using Layer

What is ConstraintLayout?

ConstraintLayouts  were introduced to the market by Google in 2016, and the main goal of Google in introducing this layout was to be able to design complex and flat layers simultaneously. With this component, we no longer need to nest many RelativeLayout and LinearLayouts to finally create a multi-part page. Therefore, using ConstraintLayouts to design pages can reduce the amount of code inserted and  increase the loading speed of pages. In this case, the user interface design will be improved.

Component Studio and ConstraintLayout features have been added since Android 2.2. Beta 1 was also the name of the original version. Note that using ConstraintLayout, we can adjust the status and placement of all view/widgets relative to them. For example, we can place TextView below ImageView to be completely in the center of the page. This means that ConstraintLayout is very flexible and more flexible in designing user interfaces, like responsive page design.

How to create pages and user interface using ConstraintLayout

In this section, we want to focus on the constraint layout android example and work on it.

To do this, follow the steps below:

1- First, we  create a new project in Android Studio  and choose the desired name for it. The name of choice for this project is in this part of the ConstraintLayout tutorial.

2- The activity needed for this project and we must choose it is Empty Activity.

3- The language used in this tutorial and project is Java. Select it to continue.

4- It should be noted that the library of this layout that is needed is located inside the dependencies block that exists in the build.Gradle (app) file.

5- Default Layout This project is ConstraintLayout by default, and this can also be seen in the Component Tree.

It should be noted that the preview environment can be displayed in both the Design and Blueprint modes. But in this part of the tutorial, we want to use Design mode.

What are connection lines and nodes in ConstraintLayout?

By default, in the center of the page is a TextView called Hello World! Is located.

6- Place the mouse on TextView.

7- We will see that TextView is connected to the four edges of the page using four lines.

8- Click on TextView.

9- After clicking on TextView, we will see that the connected lines have become more colorful, and the common points that connected them have become a circle.

10- Each of these circles, located at the points where the lines are connected, is called a node.

11- We need to check the XML code.

12- The codes that should be in the activity_main.xml section are as follows:

Bottom to bottom of a parent means below TextView to connect to the parent's bottom. The other three parts will be like this: the four lines from the top and bottom and the right and left will be the same distance. In this section, we did not use numbers to specify distances, and we can say that their distances from the right and left and up and down will be proportional to the screen size.

13- We delete one of the lines.

14- There are two ways to delete lines: in design mode, we can select one of the lines we want to delete and then select the delete option. And the other way is in code mode, for which we must remove the layout_constraintTop_toTopOf attribute from Text View.

15- After deleting the line, we will see that TextView is horizontally in the center and center of the page but vertically at the bottom of the page.

16- To place the widget in the center of the page, we need to add the layout_constraintTop_toTopOf attribute in the code editor and give it a parent value.

17- Another way to place the widget in the center of the page is to move it to the center of the page in a design using Drag & Drop.

18- Click on the Attributes option on the right side of the design environment to see more details.

How to determine the distances from the left and bottom using Bias

On the left and at the bottom next to the numbers, there are two options that we can use to determine the distance from the four directions. The feature that can determine the distances is called Bias, and it is noteworthy that in this section, we do not use px and dp units, but we determine the number of distances based on percentage. Both must be 50 Bias to be in the center of the page.

19- Drag the widget slightly to the left.

20- After doing this, we see that the Horizontal Bias number will change.

21- It should be noted that in the Visual and Design environment, numbers are determined from 0 to 100 and in codes from 0 to 10.

22- Then, we must put the preview screen in Landscape mode.

23- However, we will see that the widget is closer to the left, which shows the constraint layout flexibility.

How to determine the width and height of Widgets or Views

Note that the width and height of the layouts are initially wrap_content, which means that the size of the content inside is entered.

24- If we move and hold the mouse on horizontal distances, the Wrap Content will be displayed. Click on it.

25- After doing this, the phrase Fixed will be displayed.

26- When we want to consider a certain width and height for the widget and do not let the height and width depend on the size of the screen, we use this mode.

27- Click on the horizontal space again.

28- In this case, the spacing type will change to Match Constraints.

29- Go to New - Layout Resource file.

30- Add a new layout to the project with the desired name layout_two.xml.

31- Drag a button between the tools and place it inside the page.

32- In MainActivity.java, put the layout_two files instead of activity_main.

33- The code that should be in the MainActivity.java section is as follows:

34- We are implementing the project.

35- After executing the project, we will see that unlike  the Preview Android Studio, where the button was located in the center of the page, after executing the project, we will see that it will be located in the corner of the page.

36- The codes that should be in the layout_two.xml section are as follows:

Note that the layout_editor_absoluteX and layout_editor_absoluteY features are used in the Android Studio preview screens.

37- We connect the nodes of the lines from the left and right to both sides.

38- After this, we will see that it is located horizontally in the center of the page.

39- layout_editor_absolutes will also be activated with no connection lines in that direction.

40- If we add two lines, left and right layout_editor_absoluteX will be deleted, and layout_editor_absoluteY will remain.

After entering the above codes, we will see the + symbol, which means there is no connection between these nodes. Note that if we click on +, in addition to creating connection lines, the margin will be added to the value we defined in layout_editor_absoluteY.

In other words, layout_marginTop replaces layout_editor_absoluteY.

Remove Constraints

Clear All Constraints can be used to remove all connections in layouts between widgets, which removes all connections. We can use this feature when we have made some changes and connections on the page between widgets, and we want to delete them all at once. This feature can remove the connections made between widgets.

It can also be used if we want to convert a layout previously created using ViewGroup and LinearLayout to ConstraintLayout.

How to convert other ViewGroups to ConstraintLayout?

41- To do this, right-click on ViewGroup in the Component Tree section.

42- Then select the Convert RelativeLayout to ConstraintLayout option.

How to automatically create constraints

Note that the operation of the Infer Constraints option is the opposite of the Clear All Constraints option.

If we click on this option, Android Studio will guess the settings and connect the lines.

At the top of the Preview, another option is called Default Margins.

How to set the default Margin distance

The Margin feature determines the distances between different elements in layout designs. It should be noted that the distance between the elements is the same so that the arrangement of the elements is not disturbed. Therefore, the default margin is set to 0 by default.

43- In this part of the tutorial, we change its value and set it to 16dp.

44- First, we add an ImageView to the page.

45- In the Attributes section, set the widget width to 0dp or Match Constraint.

46- We also set its height to 200dp.

47- We also set the scale type property to center crop so that the widget in any size is displayed in the actual size of the image in ImageView, and no space is created around it.

48- Add the top three directions, left and right, to the edges of the screen.

49- After applying the changes, we will see that the image is at 16dp from the edges of the screen. We have already defined this number in the Default Margin section.

50- If any part of the image is not inside the frame, take the edge with the mouse and add it to the frame.

51- Or using another method in  the Constraint Widget section, click on the + icon to the right or left of the ImageView widget.

52- The codes that should be in the layout_two.xml section are as follows:

So far, after applying all the settings, we have added an image to the screen that has 16 dp from three directions on all screens of any size.

53- In the next steps, we want to add an image or icon to the screen with the center of the bottom edge of the image added and ImageView.

54- To do this, place an ImageView on the screen.

55- Add an icon or image and put it in it.

56- Put the following codes in the widget:

57- Connect the nodes at the bottom and top of the icon to the existing ImageView node.

58- After this, we will see that the horizontal center of the second image, which we added later, is in the bottom line of the first image that already existed.

59- Connect the left node to the left node of the big picture.

60- The codes that should be in the layout_two.xml section are as follows:

If we want to add another icon like the image and the icon above, we do the above steps, but with the difference that instead of connecting the left node to the left node of the big image, the right node of the icon to the right node We attach the big picture.

Align text widgets with Baseline.

Another  application  of ConstraintLayout that can be used in user interface designs is Baseline. Using this feature, we can align the two widgets horizontally next to each other.

61- To do this, add a TextView and an EditText to the page.

62- It should be noted that the Baseline feature is not enabled on widgets by default.

63- For this reason, we click on it and select the Show Baseline option.

64- Once we have done this successfully, a section will be added to the middle of EditText.

65- If you drag it to TextView, the Baseline capsule will also appear.

66- Then, release the line drawn from the EditText Baseline widget.

67- Then, we will see that these two widgets are in a horizontal alignment.

If you follow all the steps mentioned in this tutorial carefully, you can easily use the ConstraintLayout capabilities to create lines and connect them.

These lines are used to place different elements and items in the center of the page or the corners.

Everything you learned in this part of the tutorial is as follows:

What is ConstraintLayout?

- How to  design pages and user interface using ConstraintLayout  - What are connection lines and nodes in ConstraintLayout?

- How to determine the distances from the left and bottom using Bias

- How to determine the width and height of Widgets or Views

- Remove Constraints

- How can other ViewGroups be converted to ConstraintLayout?

- How to create Constraints automatically

- How to set the default Margin distance

- Use Baseline to align text widgets.

- Use the Chain to create the same distances.

- How to implement different styles for Chain

- Autoconnection to Parent

- What are the uses of Pack and Expand options?

- Use Distribute to connect widgets automatically.

- Edges

- How to set Baseline automatically

- How to align views with Guideline

- Use the Barrier to set the range for widgets.

- Delete, show, or change View by Group.

- Use Flow to change the layout.

- How to move widgets in groups using Layer