/Android Constraint Layout Tutorial – Part 1

Android Constraint Layout Tutorial – Part 1

Video: Android Constraint Layout Tutorial – Part 1


This my constraint layout First we use a single widget. i.e. Text View This is top node to set the position of selected widget from top of any layout. This is right node This is left node This is bottom node Okay, we wish to make it in center from parent layout i.e. Constraint Layout Just drag it to left edge of parent layout And drag the right node to right ends of it's parent top to top of parent and bottom to bottom TextView widget in bottom No matter which screen size is It will always be in bottom now write some thing here and see the changes After taking the width of it's parent layout, the text automatically jump to next line.

This is wrap content for TextView width You can make it to match constraint. Click here, this is static size, means manually entered size. Click here again, this is now match constraint, TextView take the size of its parent. It has margin of 8dp from left and right of it's parent. This is how our constraint layout. But the size of TextView will not change, because it constraint to parent width. Now make some complex design with Constraint Layout, Let's start Here is the TextView for title. Drag it's top node to parent top, left node to parent left. Another TextView Now this TextView will go bottom of the title TextView adding the constraint between this TextView and title TextView Click on top node and drag And drop on bottom node of title TextView If the top TextView change it's position i.e. it's margin change Second TextView automatically manage the constraint.

READ  Easy Steps For Installing Rasbian Stretch On Your Raspberry Pi

This is my title TextView, enter Text: "Enter Name" And this is my second TextView, but I need EditText here. I will take a EditText We can use this plus button to add constraint on respective sides. Add margin 8dp Set the top constraint of EditText Also set the right constraint for EditText, it will take whole width of it's parent. We need to match the constraint for it's width Now change the orientation of our layout If we need to add another widget top of this TextView Simply add some margin to top, to get some space for temporary. Add a new TextView widget here Make it horizontally center of it's parent. Now change the title TextView top constraint from parent to new created TextView's bottom node. Edit text has margin with it's parent.

If I move the title TextView from left position. EditText will stay on the same position. We need to change the constraint of EditText from parent to title TextView Now change the margin to zero Now, EditText will move horizontally(only from left) with title TextView Add another TextView Same thing Another EditText widget Now, if title TextView left margin get changed, every widget after this TextView move from left with title TextView We are adding 3 button to demonstrate the Linear Layout behavior with Constraint Layout We don't need any Linear Layout Add three button here. You may take more button, for now this is okay Make the top position of each button same. Click on three button by pressing Shift Key Right Click on it Chain -> Create horizontal chain width, position equally distributed You can add more button Right Click-> Chain -> Insert in Horizontal Chain Set the top position and margin will zero Rename all button to see some special behavior You can easily change the position of this button Right Click -> Chain -> Move right horizontal chain See, how it's working You can remove single button from chain Right Click -> Chain -> Remove from horizontal chain Now this button removes from horizontal chain Now change the top for 4th button, Delete it.

READ  🌟 FIDGET SPINNER TOYS🌟 SAY NO!! $0 Free Hand Spinner Games w/ FGTEEV Dad & Kids (Top 5 iPad Apps)