{
  "$type": "site.standard.document",
  "canonicalUrl": "https://segunfamisa.com/posts/constraint-layout-in-android",
  "description": "Quick intro to the new layout editor and ConstraintLayout in Android",
  "path": "/posts/constraint-layout-in-android",
  "publishedAt": "2016-05-30T09:05:30.000Z",
  "site": "at://did:plc:a5mekodp4afxadlpr4hp2wci/site.standard.publication/3mm2oa7vz5327",
  "tags": [
    "android",
    "layouts",
    "constraint layout",
    "android studio"
  ],
  "textContent": "<p align=\"center\">\n\t<img src=\"/images/constraintlayout-header.png\">\n</p>\n\nLast week, also during the Google I/O conference, Google introduced a new set of tools for Android developers. Among them is a new Layout editor and a new layout called the ConstraintLayout.\nThe ConstraintLayout was said to be a new tool to empower developers create very flat ui-hierarchies for their complex layout.\n\nI've been playing around and exploring the new thing and I'll summarize my findings in this post.\n\nTo be able to access these new features, you need to be running Android Studio 2.2 Preview and Java 8.\nYou can head over to the canary channel to download it. Be sure to run it in parallel with your stable version. It's still in Preview!\n\nLayout Editor & Constraints Overview.\nThe new layout editor in Android Studio 2.2 Preview is specially built for the ConstraintLayout.\nYou can specify the constraints manually, or automatically reference within the layout editor.\n\nOverview of Constraints?\nA constraint is the description of how a view should be positioned relative to other items, in a layout.\nA constraint is typically defined for one or more sides by connecting the view to:  \n\n   An anchor point, or another view,\n   An edge of the layout,\n   Or An invisible guide line.\n\nSince each view within the layout is defined by associations to other views within the layout, it's easier to achieve flat hierarchy for complex layouts.\n\nIn principle, the ConstraintLayout works very similar to the RelativeLayout, but uses various handles (or say anchors) for the constraints.\n\n<div>\n    <p align=\"center\">\n        <img src=\"/images/constraint-layout-fig-b.png\" alt=\"Figure B.\" style=\"width:320px; height:auto;\">\n    </p>\n    <p align=\"center\">\n        <a href=\"https://codelabs.developers.google.com/codelabs/constraint-layout/index.html#3\">(Source) </a>\n    </p>\n</div>\n\n   Resize handle. The resize handle is the !alt text seen in the corners of the figure above, and it's used to resize the view.\n\n   Side handle. The side handle is the !alt text in the figure above, and it's used to specify the location of a widget. E.g using the left side handle to always be aligned to the right of another view, or the left of the ConstraintLayout itself.\n   Baseline handle. The baseline handle is the !alt text in the figure above. It is used to align the text of a view by the baseline of the text on another view.\n\nGetting started with ConstraintLayout\n\nSetup\nEnsure that you're running the AS 2.2 preview, and Android Support Repository version 32 or higher, it's required before you can use the ConstraintLayout. Let's get started.\n\n  First, you need to add the constraint layout library to your app's dependencies within your build.gradle file:\n\n  Sync your project.\n\nAdd Constraints\n\nThere are typically two ways to create ConstraintLayout in AS. You can create a new XML layout\nand select the root element to be a ConstraintLayout or convert an existing layout into a ConstraintLayout as shown in the image below:\n\n<p align=\"center\">\n\t<img src=\"/images/constraintlayout-covert.png\">\n</p>\n\nOnce you have the ConstraintLayout setup, what is next is to add the constraints to the views within that layout.\n\nAs an example, drag an ImageView to the layout. The new layout builder will immediately ask to add a drawable or resource, select one from the options and press ok.\nAlso drag a TextView unto the layout.\n\nTo create a constraint, drag the top side handle on the ImageView to the top of the ConstraintLayout.\nYou can also drag from the top side handle of the TextView to the bottom handle of the ImageView\n\nUsing the Inspector Pane\nNow that we're able to add constraints, we will need to use the inspector. It's on the right hand side of the layout builder and it lists various properties of the selected widget. Typically, it looks as shown below:\n\n<p align=\"center\">\n\t<img src=\"/images/constraintlayout-inspector-pane.png\">\n</p>\n\nYou can use the sliders to move the view by percentage along the x and y axes.\nYou can also control the dimensions of the view from the inspector pane, by altering the values corresponding to the layout_width and layout_height fields.\n\nTaking a closer look at the square widget on the inspector pane. It contains some more control over the dimensions of the views.\n\n<p align=\"center\">\n\t<img src=\"/images/constraintlayout-inspector-widget.png\">\n</p>\n\nThere are other modes of controlling the size of the view. Clicking on the inner lines in the image above help you cycle through the other modes.\n\n   Fixed mode: !alt text This allows you specify the width and height of the view.  \n\n   Any size: !alt text This mode allows the image to fill up all the space required to fulfill that constraint. You can look at this like _\"match constraint\"_  \n\n   Wrap content: !alt text This just expands to fill the content of the view. E.g text or image\n\nUsing Auto-connect to add constraints.\nAutoconnect as the name suggests, automatically creates connections between views/widgets. It tries to create connections to neighboring views/widgets.  \nTo enable autoconnect, look out for the !alt text icon on the top bar of the layout editor.\n\nLast words\nThis post is not exhaustive of the ways to create and use the ConstraintLayout but it's meant to just serve as a primer. I will be sharing how to use Inference to create constraints at a later date. I hope you check out the references and further reading for more.\n\nAs of today, there isn't any documentation for ConstraintLayout but I guess it's in the works. Please check the section below for more info on how to use it.\n\nReferences and Further reading.\n   http://tools.android.com/tech-docs/layout-editor\n   https://codelabs.developers.google.com/codelabs/constraint-layout/#0\n   http://android-developers.blogspot.com.ng/2016/05/android-studio-22-preview-new-ui.html\n\nIf you have comments/suggestions or corrections, please don't hesitate to drop a comment below :)\n\nPlease share if it has helped you get a grasp of the ConstraintLayout.\n\nCheers.",
  "title": "Intro to the new ConstraintLayout in Android"
}