Constraint Layout

  In the blog Creating the onScreen Monitor Using CardView I had created the monitors to view the wave properties in this blog we will create the UI of controlling panel that will be used for that monitors with multiple buttons for both analog and digital waveforms. Which layout to choose? In today’s world, there are millions of Android devices present with different screen sizes and densities and the major concern of an Android developer is to make the layout that fits all the devices and this task is really difficult to handle with a linear or relative layout with fixed dimensions. To create a complex layout with lots of views inside the parent using linear layout we have to make use of the attribute layout_weight for their proper stretching and positioning, but such a complex layout require a lot of nesting of weights and  android tries to avoid it by giving a warning : Nested Weights are bad for performance This is because layout_weight attribute requires a widget to be measured twice[1]. When a LinearLayout with non-zero weights is nested inside another LinearLayout with non-zero weights, then the number of measurements increases exponentially. So, to overcome this issue we will make use of special type of layout “Constraint Layout” which was introduced in Google I/O 2016. Features of Constraint Layout:- It is similar to Relative Layout as all views are laid out according to their relationship with the sibling, but it is more flexible than Relative Layout. It helps to flatten the view hierarchy for complex layouts. This layout is created with the help of powerful tool provided by Android which has a palette on the left-hand side from where we can drag and drop the different widgets like TextView, ImageView, Buttons etc. and on the right-hand side it provides options for positioning, setting margins and other styling option like setting color, change text style etc. It automatically adjusts the layout according to the screen size and hence doesn’t require the use of layout_weight attribute. In following steps, I will create the controlling panel for Wave generator which is a complex layout with lots of buttons with the help of constraint layout. Step 1: Add the dependency of the Constraint Layout in the Project To use Constraint layout add the following to your build.gradle file and sync the project dependencies { implementation "com.android.support.constraint:constraint-layout:1.1.0" } Step 2: Applying Guidelines to the layout Guidelines[3] are anchors that won’t be displayed in your app, they are like one line of a grid above your layout and can be used to attach or constraint your widgets to it. They are only visible on your blueprint or preview editor. These will help to position and constraint the UI components on the screen easily. For adding guidelines : As shown in Figure 1 Right-click anywhere on the layout -> Select helpers -> Select horizontal or vertical guideline according to your need. And for positioning the guideline we have to set the value of attribute layout_constraintGuide_percent…