Always use Constraint Layout for creating Complex layouts
Android Studio provides us with the number of layouts and it might be a bit confusing to choose the most suitable one for your job. Well, each layout has its own benefits but when it comes to complex, dynamic and responsive views you should always choose Constraint Layout.
Constraint Layout was added to Android Studio 2.2 in 2016 and it became the default layout of Android Studio because of its simplicity and ease of creating complex layouts.
First, let’s talk about layouts and what might be the need to introduce a new layout?
Layouts are basically blueprints, we need to position the views in some particular fashion on the screen.
Since Android runs on a variety of devices that have different screen sizes, the positioning of widgets should be dynamic so as to perform some basic scaling and resizing to adjust UI to different screens. Else it would be a tedious task to make UI for different screens and devices and surely these new type of upcoming foldable phones would be a nightmare for the developers!
Although we have to put some extra effort to ensure our UI gracefully adapts for each type of screen.
So now let's say we need to build a complex layout, so we can use a simple layout like a Linear/ Frame/Table Layout or a complex layout like a Relative/Grid layout.
But the problem with simple layout is that we have to build view hierarchies for complex positioning and this will have performance issues.
So if not simple layout, we can still use a Relative Layout but the problem is without a good layout editor Relative Layout would be hard to use or maintain. Hence, we required a new layout with a great UI builder to easily build complex layouts for us.
So here comes the Constraint Layout for our needs-
Constraint Layout simplifies creating complex layouts in Android by making it possible to build most of your UI using only the visual editor in Android Studio.
Constraint Layout comes with some powerful tools with the help of which you can define complex layouts without having deep nesting. So it flattens the view hierarchy and gives better performance.
It wouldn’t be wrong to say that Constraint Layout is just a more advanced version of Relative Layout. They even have comparable sets of XML attributes:
Now let's see how it works!
In Constraint Layout, you can connect all the view components to each other and place them on screen. The best part is that you do not have to define any orientation or relation of view components and just need to connect one horizontal and one vertical constraint.
So these constraints can be built entirely by drag-and-drop instead of XML or Java code with the help of great Layout Editor.
Layout Editor has this amazing feature known as Inspector.
Inspector gives us the iconified view of a single widget. We can set margins for each side of constraint here, we can also use sliders to adjust the bias when you have both sides constrained horizontally or vertically.
The editor has two modes of Design Surface which are normal design surface and the blueprint design surface. We can select any one or both of them. The blueprint mode is just an X-ray of design mode which shows us all the constraints and margins. It is helpful as it shows the information pertaining to the widgets of the layout.
Inference and Autoconnect are some of the magical tools of this UI builder which automatically creates constraints for us after we place the widgets at the desired position.
Inference calculates the probability of all available connections and then it goes through some algorithms to decide the connections of constraints which will be most suitable for the desired layout.
Let’s see how simple it is-
Design the widgets as per your required layout on the screen.
After you are done, go on and press that magical wand on the toolbar.
And Voila!
We have every component constrained as per the desired layout.
If you are not happy with some of the constraints go ahead and change it manually, the editor is flexible with all the changes.
Also if there are some of the constraints before, the inference tool respects the constraint and creates the new constraints accordingly.
So, This was just an introduction to some of the features and tools of Layout Editor. For more details check out the link to this developer’s guide-
Thanks for Reading!
