Build a simple user interface

In this lesson, you'll use the Android Studio Layout Editor to create a layout that includes a
text box and a button. In the next lesson, you'll make the app respond to the button tap by
sending the content of the text box to another activity.

Figure 1. Screenshot of the final layout

The user interface for an Android app is built using a hierarchy of layouts
(ViewGroup objects)
and widgets (View objects).
Layouts are containers that control how their child views are positioned on the screen.
Widgets are UI components such as buttons and text boxes.

Figure 2.
Illustration of how ViewGroup objects form branches in the layout and contain
View objects

Android provides an XML vocabulary for ViewGroup and View classes, so
most of your UI is defined in XML files. However, instead of teaching you to write
some XML, this lesson shows you how to create a layout using Android Studio's Layout Editor, which
makes it easy to build a layout by drag-and-dropping views.

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 hierarchy. 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.

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.

In the Palette, click Text to show the available text controls.

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 using the
buttons in the Layout Editor 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 constraint from the left side of the view to the left side of
the layout.

The result should look like the screenshot in figure 5.

Add a button

Figure 6. The button is constrained to the right side of the text box
and its baseline

In the Palette, click Buttons.

Drag Button into the design editor and drop it near the right side.

Create a constraint from the left side of the button to the right side of
the text box.

To constrain the views in a horizontal alignment, you need to create a constraint
between the text baselines. So click the button, and then click Edit Baseline, which appears in the design editor directly below the selected view.
The baseline anchor appears inside the button. Click-and-hold
on this anchor and then drag it to the baseline anchor that appears in the text box.

The result should look like the screenshot in figure 6.

Note: You can also create a horizontal alignment using the top
or bottom edges, but the button includes padding around its image, so the visual
alignment is wrong if you align these views that way.

Change the UI strings

To preview the UI, click Select Design Surface
in the toolbar and select Design. 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 open app > 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.

Click Add Key to create a new string as the "hint text" for
the text box.

Figure 7. The dialog to add a new string

In the Add Key dialog, enter "edit_message" for the key name.

Enter "Enter a message" for the value.

Click OK.

Add another key named "button_send" with a value of "Send".

Now you can set these strings for each view. So return to the layout file by clicking
activity_main.xml in the tab bar, and add the strings as follows:

Click the text box in the layout and, if the Attributes window isn't already visible
on the right, click Attributes on the right sidebar.

Locate the text property (currently set to "Name") and delete the value.

Locate the hint property and then click Pick a
Resource
to the right of the text box. In the dialog that appears,
double-click on edit_message from the list.

Now click the button in the layout, locate the text
property (currently set to "Button"), click Pick a Resource, and then select
button_send.

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).

Before you continue, click Show
in the toolbar and select Blueprint.

Figure 8. The result of choosing Create Horizontal Chain

Figure 9. Click to change the width to Match Constraints

Figure 10. The text box now stretches to fill the remaining space

Select both views (click one, hold Shift, and click the other), and then right-click
either view and select Chain > Create Horizontal Chain. The layout should appear as shown in figure 8.

A chain
is a bidirectional constraint between two or more views that
allows you to lay out the chained views in unison.

Select the button and open the Attributes window. Using the view inspector at the top
of the Attributes window, set the right margin to 16.

Now click the text box to view its attributes. Click the width indicator twice so that it is set
to Match Constraints, as indicated by callout 1 in figure 9.

"Match constraints" means that the width expands to meet the definition of the
horizontal constraints and margins. Therefore, the text box stretches to fill
the horizontal space (after accounting for the button and all margins).

Now the layout is done and should appear as shown in figure 10.

If it seems your layout did not turn out as expected, click below to see what
your XML should look like and compare it to what you see in the Text tab.
(If your attributes appear in a different order, that's okay.)