Open the Layout Editor

Open the Layout Editor

Note: This lesson expects you are using Android Studio 2.3 or higher and you've followed the previous lesson to create your Android project.
To get started, set up your workspace as follows:
  1. In Android Studio's Project window, open app > res > layout > activity_main.xml.
  2. To make more room for the Layout Editor, hide the Project window by selecting View > Tool Windows > Project 
  3. If your editor shows the XML source, click the Design tab at the bottom of the window.
  4. Click Show Blueprint  so only the blueprint layout is visible.
  5. Make sure Show Constraints is on. The tooltip in the toolbar should read Hide Constraints  (because they're now showing).
  6. Make sure Autoconnect is off. The tooltip in the toolbar should read Turn On Autoconnect  (because it's now off).
  7. Click Default Margins  in the toolbar and select 16 (you can still adjust the margin for each view later).
  8. Click Device in Editor  in the toolbar and select Pixel XL.
Your editor should now look as shown in figure 3.
Figure 3. The Layout Editor showing activity_main.xml
The Component Tree window on the bottom-left side shows the layout's hierarchy of views. In this case, the root view is a ConstraintLayout, containing just one TextView object.
ConstraintLayout is a layout that defines the position for each view based on constraints to sibling views and the parent layout. In this way, you can create both simple and complex layouts with a flat view hieararchy. That is, it avoids the need for nested layouts (a layout inside a layout, as shown in figure 2), which can increase the time required to draw the UI.

Figure 4. Illustration of two views positioned inside ConstraintLayout
For example, you can declare the following layout (in figure 4):
  • View A appears 16dp from the top of the parent layout.
  • View A appears 16dp from the left of the parent layout.
  • View B appears 16dp to the right of view A.
  • View B is aligned to the top of view A.
In the following sections, you'll build a layout similar to this

Comments

Post a Comment

Popular posts from this blog

Make the text box size flexible

Image
Make the text box size flexible To create a layout that's responsive to different screen sizes, you'll now make the text box stretch to fill all remaining horizontal space (after accounting for the button and margins). Figure 8.  Click to change the width and remove the right margin Figure 9.  The text box stretches to fill the remaining space Create a constraint from the right side of the button to the right side of the parent layout. This now defines the total width that the two views have available (which you can now fill with the text box). Add a constraint from the right side of the text box to the left side of the button. It might look like that's already there, but you're actually adding a bidirectional constraint between the two views. So both views are constrained to each other. This is called a  chain  (as indicated by the chain betwen the views), and it enables some extra layout options. Open the  Properties  window for the text box and the
Read more

Change the UI strings

Image
Change the UI strings Click  Show Design   in the toolbar to preview the UI. Notice that the text input is pre-filled with "Name" and the button is labeled "Button." So now you'll change these strings. Open the  Project  window and then select  res > values > strings.xml . This is a string resources file where you should specify all your UI strings. Doing so allows you to manage all UI strings in a single location, which makes it easier to find, update, and localize (compared to hard-coding strings in your layout or app code). Click  Open editor  at the top of the editor window. This opens the Translations Editor, which provides a simple interface for adding and editing your default strings, and helps keep all your translated strings organized. Figure 7.  The dialog to add a new string Click  Add Key   to create a new string as the "hint text" for the text box. Enter "edit_message" for the key name. Enter "Enter a
Read more

Add Text box & Button

Image
Add a text box Figure 5.  The text box is constrained to the top and left of the parent layout First, you need to remove what's already in the layout. So click  TextView  in the  Component Tree  window, and then press Delete. From the  Palette  window on the left, click  Text  in the left pane, and then drag  Plain Text  into the design editor and drop it near the top of the layout. This is an  EditText  widget that accepts plain text input. Click the view in the design editor. You can now see the resizing handles on each corner (squares), and the constraint anchors on each side (circles). For better control, you might want to zoom in on the editor to 75% or higher using the buttons in the toolbar. Click-and-hold the anchor on the top side, and then drag it up until it snaps to the top of the layout and release. That's a constraint—it specifies the view should be 16dp from the top of the layout (because you set the default margins to 16dp). Similarly, create a c
Read more