Android Fundamentals: ConstraintLayout

Course Overview
Hi. My name is Rebecca Franks, and welcome to my course, Android Fundamentals: ConstraintLayout. I am an Android developer at Over, and a Google Developer expert for Android, and I've been developing Android apps for over 6 years now. ConstraintLayout is evolving into such an advanced layout mechanism with so many new features being added all the time. With these advancements the Layout Editor in Android Studio is getting even more powerful. Learning how to use the Layout Editor and ConstraintLayout is essential to creating a great Android app. In this course we are going to learn how to use ConstraintLayout and cover a lot of the different features of it. Some of the major topics that we will cover include creating different types of constraints and navigating the Layout Editor, different features of ConstraintLayout, such as chains, guidelines, and groups, some of the more advanced features, such as ratios and circular positioning, and finally, we will cover some tips and tricks to working with ConstraintLayout, and by the end of this course you'll know how to create a layout using ConstraintLayout and how to use the Android Studio Layout Editor. Before beginning this course you should be familiar with Android Studio. I hope you'll join me on this journey to learning constraint layout with the Android Fundamentals: ConstraintLayout course at Pluralsight.

Basic Features of ConstraintLayout - Constraints and Bias
Let's take a look at the basic features of ConstraintLayout focusing on constraints and bias. In this module we will learn in depth about constraints and bias. We will cover what a constraint is and the different ways in which you can use constraints. We will also cover horizontal and vertical bias. So what is a constraint? A constraint is a relationship between two views that controls how the views will be positioned. As you can see in this image, we have a Button and a TextView. The Button has two constraints. The top constraint is constrained to the parent, and the start constraint is also constrained to the parent view. We then have a TextView that is constrained to the end of the button using its start constraint. It also has a top constraint to the parent view. The great part about adding constraints in the Layout Editor is that you can still edit your constraints via XML, should something go wrong. This also makes it easy to review code on a third-party tool, as you will still be able to ream the XML that is generated. This is an example of the XML of the Button from the previous slide. We can see that the last two lines refer to constraints. The first constraint defines the top constraint to the view, and is constrained to the parent. The second constraint defines the start constraint and is constrained to the start of the parent view. Let's have a look at how we can make constraints in Android Studio.

Using Chains in ConstraintLayout
Let's talk a bit about Using Chains in ConstraintLayout In this module you will learn about using chains in ConstraintLayout. More specifically, you will learn about horizontal and vertical chains and the different chain modes that are available for you to use. A chain is a group of views that are linked to each other with bi-directional position constraints. In this example both views have a constraint to one another, therefore creating a horizontal chain. Chains help you to evenly distribute views inside a layout. You'll see that a chain can either be a horizontal chain or a vertical chain. Chaining a view does not mean it can't be part of another chain. A view can be part of both a horizontal and a vertical chain, making it easy to build good layouts. Another thing to note about these two different chains is that the chain does not align the views in that direction. You still need to include other constraints. For example, a top or bottom constraint needs to be added to the views in the horizontal chain. With chains there are a few different chain modes that distribute the views inside the chain with different styles. The different modes are spread, packed, spread inside, and weighted. We will go into more detail in the demo.

Optimizing Your Layouts with Guidelines and Groups
Let's take a look at how we can optimize our layouts using guidelines and groups. In this module we will learn about the two different concepts; creating guidelines, and creating groups in ConstraintLayout. We will also see how these two concepts can help neaten up our layout files. A guideline is a visual guide that is visible in the Layout Editor, but not visible when running on a device. You can think of a guideline like a gridline that you may be used to seeing in a design program, like Sketch or Photoshop, and you generally align things to the guideline. A guideline can be used to align multiple views with similar pairings. A guideline can be horizontal or vertical. In this example on the left we have a vertical guideline that has an offset of 16dp from the start of the screen. We have a TextView and a Button that are both aligned to the guideline. This will neaten up our layout files, so that we don't have the duplicated margin values all over the place. Here is how a guideline is created in XML. It acts as a normal view in the Layout Editor, but has the property of constraintGuide_begin on it. This indicates that the guideline is a beginning guideline, and we will cover more on this later. It also has a value of 16dp. This guideline is also a vertical guideline, as indicated by the Android orientation property on it. Your guidelines should also be given Android IDs, so that they can be referenced by other views in your layout.

Next Steps in Your ConstraintLayout Journey
We have now covered most of the different aspects of ConstraintLayout. Let's do a quick course recap and discuss what's next in your ConstraintLayout journey. We first learnt about the importance of ConstraintLayout, and a bit of history as to where the layout came from. Then we looked at how to get started with ConstraintLayout, and we added basic constraints and did a walkthrough of the Layout Editor. We then went on to looking at different types of constraints that can be created; normal or standard, top, bottom, start, and end constraints, center constraints, and baseline constraints. Finally, we looked at how we can use horizontal and vertical bias to position a view with a tendency towards a certain side of a view. We then looked into using chains by creating horizontal and vertical chains in our layouts. We also learnt about the different chain modes, such as packed and spread. We learnt how to optimize our layout files by grouping views together and controlling visibility of the group. We also removed duplicate margin values by creating guidelines and aligning views to the guideline. We then took a look at some of the more advanced features of ConstraintLayout, such as barriers, ratios, and circular positioning of items, and finally, we covered some tips and tricks to working with ConstraintLayout by working with wrap_content, the pack and expand buttons, the layout optimizer, and the Convert to ConstraintLayout tool. So where to next? Hopefully this course has given you more insight into working with ConstraintLayout, and you feel comfortable to create a layout using it. I encourage you to try and create more complex layouts using ConstraintLayout, and the different features that you have learnt in this course. Please take some time to rate this course on Pluralsight and share it if you have found it useful. Thank you very much.