How to avoid nested containers inside constraintlayout.

Often in the design, there are layouts that look like this: Most of the developers have no problem to implement this layout, but often when people see a CONTAINER WITH A DIFFERENT BACKGROUND

COLOR AND SOME NESTED VIEWS INSIDE IT, they choose to wrap everything in a LINEARLAYOUT/RELATIVELAYOUT. As result we see XML which is using CONSTRAINTLAYOUT as the parent, but not in an

efficient way. BUT THERE IS A BETTER WAY! Have a look! There are 3 nested LINEARLAYOUTS inside one simple layout, and two of them have ANDROID:LAYOUT_WEIGHT. The problem is that in the same

way a complex web page can slow download time, your layout hierarchy if too complex can also cause performance problems. > “Using nested instances of LinearLayout can lead to an 

excessively > deep view hierarchy. Furthermore, nesting several instances > ofLinearLayout that use the layout_weight parameter can be > especially expensive as each child needs to 

be measured twice. This > is particularly important when the layout is inflated repeatedly, > such as when used in a ListViewor GridView.” This was one of the reasons why

CONSTRAINTLAYOUT was introduced. There is the way how to replace three LINEARLAYOUTS with expensive WEIGHTS: We can just make <VIEW /> with a different background color and constraint

it to other views to avoid nesting. Similarly, all nested views can also be extracted from containers with weights and constrained to something. Whether you constraint to widgets such as

IMAGEVIEW/BUTTON etc you cannot use padding for the <VIEW/> because of that you should use fixed height or wrap these widgets in <FRAMELAYOUT/> This approach is very easy to use,

improves layout performance and code readability. Enjoy!