ConstraintLayouts in Android

Transcription

1 B ConstraintLayouts in Android Constrained Layouts are a new addition to Android. These layouts are similar to Relative Layouts, in that all widgets are positioned with respect to other UI elements. However, they are purported to be more flexible than Relative Layout, and Android Studio s layout editor is designed to support the creation of the layout without need to edit the XML directly. They allow a flatter design without the need for nested layouts. In the past, more complex UI designs required the developer to nest layouts within layouts to get the look required for the app. Nesting layouts can have an impact on processing efficiency, and thus ConstraintLayout provides a potential solution. Note that depending on the speed of your machine, this tutorial may be frustrating. Updating the layouts as you make changes often significantly lags your operations. We also found that at times the exact same sequence of steps leads to different results. If you are unsuccessful with placing a widget after several attempts, it may be easiest to delete the widget and start over. Download and Install ConstraintLayout The ConstraintLayout is not currently a part of the standard Android SDK and must be installed separately. The first step is to get the components with the SDK Manager. Choose Tools > Android >SDK Manager. When the SDK Manager opens, select the SDK Tools tab and expand Support Repository. Select ConstraintLayout for Android and Solver for ConstraintLayout. Next, click Show Package Details and note the version (currently at 1.0.2). Click OK and then choose accept and click Finish. The next step is to add a dependency in your app so that you can use the layout. Open build.gradle (Module:app). Add the following line in the dependencies section: compile 'com.android.support.constraint:constraint-layout:1.0.2' When you upgraded to a new version of ConstraintLayout, you will need to return and change the version number to the new version. You will now need to sync the gradle files. Click Sync Now at the top right of the screen. Once the sync is complete, you can begin working with ConstraintLayout. Creating a UI with ConstraintLayout To demonstrate the use of ConstraintLayout, we will rebuild the layout for the Settings activity using this type of layout as the root rather than RelativeLayout. Right-click on the layout folder in the Project Explorer and select New > Layout resource file. In the New Resource File window, type the file name as activity_settings_constraint and type the Root element as android.support.constraint.constraintlayout. Click OK. The layout editor will open. If you get a rendering problem, click refresh (look for it in the rendering error message). Once you get a full layout, you are ready to begin. For your layout design to work correctly, each widget must have a minimum of one horizontal and one vertical constraint. Constraints are relative to other widgets or the parent layout. To start, drag a TextView to the layout. To get your layout to look like Figure B.1, move the TextView around until a horizontal dotted line shows up at its top and a vertical dotted line at its left edge. Working with ConstraintLayout requires working with the Blueprint view and the properties window to the right of it.

2 Figure B.1 ConstraintLayout with TextView. Note the dots on each edge of the TextView in the Blueprint. These are the points where constraints are attached to the widget and are referred to as the constraint handles. The blue squares are the resize buttons. You can click-hold and drag these to create a bigger or smaller widget. The button below the TextView is used to clear all contraints for the widget. At this point the widget does not have any. The below the TextView is used to activate the baseline constraint. A baseline constraint is used to center the widget with another widget. Center your pointer in the center of the top constraint handle. Click and hold and drag toward the top of the blueprint. This can be a little touchy. You want the constraint to point to the solid line on the blueprint. When you get it there, the TextView should move up a little. Next, do the same with the left constraint handle dragging it to the left edge of the screen. These two constraints will ensure that the control stays attached to the top and left sides of the screen. Next, turn your attention to the Properties window to the right of the blueprint. It should look similar to Figure B.2. When done correctly, your properties should look like Figure B.2. Don t worry if it didn t work right the first time. It is fairly easy to redo the constraint. Just click and release in the constraint handle you want to change. The existing constraint will be removed, and you can try again. Note that sometimes it is easier to work in the design rather than the blueprint view. If you are having trouble placing constraints using blueprint, try the design view. It works the same way.

3 Figure B.2 Properties Window with TextView initial constraints. Notice that the distance from the top and left defaults to 8 dp. In the MyContactList app, this distance was set to 15dp. This is easy to change. Click in the TextView and then click on one of the 8s displayed at the top of the Properties panel on the right. Delete the 8 and enter 15 for each constraint. Enter textsortcontact as the id for the widget in the textbox above where you changed the distance for the constraint. Enter Sort Contacts By: in the Text textbox below the constraint display in the Properties panel. Now drag a RadioGroup to the blueprint. Move it below the TextView and to the center of the screen until a dotted line shows up and release. If you don t see a dotted line when you release the widget will position itself to the top left of the screen and be hard to work with. Repeat the previous constraint adding process, except make the top constraint point to the bottom of the TextView. Set the left constraint dimension to 35dp and the top dimension to 10dp, rather than the default 0. Also, at the top of the Properties panel, change the Id to radiogroupsortby. If you happen to click off the RadioGroup it may be difficult to re-select. If this happens you can select it in the Component Tree to the left of the design view. Once you have the RadioGroup positioned, grab the lower right corner square on the widget. The squares are resize handles. Resize the RadioGroup as shown in Figure B.3. Note: given the size of the RadioGroup it may be difficult to see the resize handle. Just move your cursor in the area until it changes to a backwards L and then click and drag. The size is temporary, so don t worry about the exact size.

4 Figure B.3 Resized RadioGroup. Next, grab a RadioButton and drag it onto the RadioGroup in the Component Tree (Figure B.4) or directly into the blueprint. Depending on the speed of your machine, the RadioButton may not look like it s positioned correctly. Ignore that for now and change the id to radioname and the text to Name in the Properties panel. Also make sure that the layout_width and layout_height properties are set to wrap_content. A RadioGroup is a LinearLayout, so there are no constraints to be used on widgets placed inside it. The only way to ensure the correct order is to examine the Component Tree. Drag two more radio buttons to the RadioGroup in the Component Tree. Change their Ids to radiocity and radiobirthday and text to City and Birthday. Once you have completed adding all the radio button operations, click on the RadioGroup widget. In the Properties panel, change the layout_width and layout_height to wrap_content. Again, the display may not look correct, but as long as the radio buttons appear under the radio group in the component tree, it will display correctly.

5 Figure B.4 RadioButton properly placed in the Component Tree. Drag another TextView to the blueprint below the RadioGroup. Drag the top constraint to the bottom of the RadioGroup and set the distance to 15dp. Drag the left constraint to the edge screen and set the distance to 15dp. Change its Id to textsortorder and Text to Sort Order:. Add another RadioGroup and two RadioButtons, like you did for the first RadioGroup. Set the top constraint of the RadioGroup to 10dp below the Textview and the left constraint to 35dp. Give it an id of radiogroupsortorder. Give the first RadioButton the id radioascending and the second radiodescending. Give the two buttons the text Ascending and Descending, respectively. Finally, click on the RadioGroup and change the height and width to wrap_content. The final step is to add the navigation bar. Drag a ConstraintLayout from the Layout section of the Palette to somewhere near the bottom of the blueprint. Click the bottom constraint handle of the layout and drag to the bottom of the blueprint. Change the distance from 8dp to 0dp. Next, grab the right constraint handle and drag to the right side of the screen. Change the distance to 0dp. Now grab the left constraint handle and drag to the left side of the screen. Change the distance to 0dp. Change the width of the layout to match_parent and height to 100dp. Click the Show Constraints button on the toolbar above the design view (which looks like an eye) to not have a line through the eye, and your display should now look similar to Figure B.5. Note: the constraints in the design view will only show up when the cursor hovers over the view.

6 Figure B.5 Initial placement of navbar. Note that sometimes changing one of the sizes in the ConstraintLayout causes the other size to change. If the layout disappears, click on it in the component tree and change back to match_parent and 100dp height. Now we are going to add the background color. Click View all properties at the bottom of the Properties panel. Locate the background property and click on it. Then click the on the right to the left of the wrench symbol. The Resources dialog window will open. Click on the Color tab on the left side and then type navbar in the search box. Double-click navbar_background. Scroll to the bottom of the Properties panel and click View fewer properties. Verify that the left, right, and bottom constraint remain 0. The next step is to add the ImageButtons to the navigation bar. Drag an ImageButton into the navbar in the Component Tree. The Resource dialog will display. Verify that the Drawable tab is selected, and type mapicon in the Search box. Double-click mapicon. Note that the icon may not display. Verify that the ImageButton is indented in the new layout in the Component Tree. If it is not, drag it there. Select the ConstraintLayout in the Component Tree and then change its width property to wrap_content. Grab the right constraint handle of the ImageButton and drag to the right side of the screen. It will likely move all the way to the right of the layout. Then grab the left constraint handle and drag to the left side of the screen. Your display should look similar to Figure B.6.

7 Figure B.6 Placement of ImageButton. Note that both constraint lines are squiggly and extend to each edge. The squiggly lines occur when you have two opposing constraints. The initial placement for a widget with opposing constraints is centered. This placement can be changed by changing the Horizontal Bias in the Properties panel. Make sure the ImageButton is selected, and look at the Properties panel below the constraint diagram and above layout_width. You should see a bar with a circle and the number 50 in the middle of it (Figure B.7). The 50 indicates that each constraint equal weight and the widget will be centered. If you drag the circle to the right or left, you can change this bias so that the widget is to one side or the other. While you re looking at the Properties panel, change the Id to imagebuttonmap. Make sure you leave the Horizontal Bias at 50.

8 Figure B.7 Horizontal Bias specification. Drag another ImageButton to the navigation bar ConstraintLayout in the Component Tree. Make sure it is above the map ImageButton. It should show up on the blueprint to the left of the map button. Choose contactlisticon as the drawable for this button and give it the Id imagebuttonlist. Next grab the right constraint handle of the new ImageButton and drag it to the left constraint handle on the map button. The new button should move toward the map button. Change its margin from 8 to 20. If the new button is not aligned vertically with the map button, click on it and drag up or down until it is. Repeat this procedure for another ImageButton. However, place this one to the right of the map button. Choose settingsicon for its image and drag its left constraint to the right constraint of the map button. Change the left margin value to 20 and give it an Id of imagebuttonsettings. Finally select the navbar ConstraintLayout and change its height to wrap_content. Your layout is ready to be used. Open the ContactSettingsActivity.java file and change the setcontent line in the oncreate method so that the activity uses the new layout: setcontentview(r.layout.activity_settings_constraint); Run the program. You should see no difference. Final Thoughts ConstraintLayout is recently out of beta and appears to still have some quirks. Additionally, if your development machine is not that fast, or if you develop on a virtual machine (like I do), you may find using these layouts are more trouble than they are worth. If the editor cannot change the display fast enough to keep up with your pace of work it is a productivity killer. That said, ConstraintLayout appears to be a great way to configure interfaces without the need to directly code XML. Hopefully, future versions of Android Studio and the ConstraintLayout components will become more stable and efficient, and this layout can become an important part of Android app development.