The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Tutorial #5 - Creating a Layout

Later in these tutorials, we are going to allow the user to write down notes related to the book. These notes will be stored in a database and can be viewed, modified, or deleted as the user sees fit.

In this tutorial, we are going to set up the layout resource to allow the user to fill in these notes.

This is a continuation of the work we did in the previous tutorial.

You can find the results of the previous tutorial and the results of this tutorial in the book’s GitHub repository.

Step #1: Creating a New Layout Resource

Right-click over the res/layout/ directory and choose New > “Layout resource file” from the context menu. This brings up the New Layout Resource File dialog:

Android Studio New Layout Resource File Dialog
Figure 149: Android Studio New Layout Resource File Dialog

Fill in editor as the “Layout File Name”, leave the rest of the dialog alone, and click the “OK” button.

Step #2: Defining the UI

That should have opened up the graphical layout editor for this new editor layout resource:

Graphical Layout Editor
Figure 150: Graphical Layout Editor

Drag a “Multiline Text” widget from the Text section of the Palette into the preview area. In the attributes pane, change the android:layout_width and android:layout_height each to be match_parent and change the ID to editor:

Graphical Layout Editor Attributes Pane
Figure 151: Graphical Layout Editor Attributes Pane

Next, in the attributes pane, click on the “hint” entry, then click the “…” button to the right of it. This will open up a string resource picker dialog:

Android Studio String Resource Picker Dialog
Figure 152: Android Studio String Resource Picker Dialog

Towards the upper right, click the “Add new resource” drop-down and choose “New string Value…” from it, to bring up the string resource editor dialog:

Android Studio New String Resource Dialog
Figure 153: Android Studio New String Resource Dialog

Fill in a resource name of hint and a value of Enter notes here. Leave the rest of the dialog alone, and click OK.

Then, back in the attributes pane, switch to viewing all of the attributes, rather than just the subset. Scroll down to the gravity property, fold it open, and change the checked values to “top” and “start”. In Android Studio 3.0, this will look bizarre, with four other checkmarks appearing, due to a bug in the IDE.

Layout Editor Attributes Pane, Showing Gravity Options
Figure 154: Layout Editor Attributes Pane, Showing Gravity Options

If you look at the layout XML in the Text sub-tab, you should have something like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical" android:layout_width="match_parent"
  android:layout_height="match_parent">

  <EditText
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:inputType="textMultiLine"
    android:ems="10"
    android:id="@+id/editor"
    android:hint="@string/hint"
    android:gravity="top|start" />
</LinearLayout>

Your hint may appear to be "Enter notes here", as if you had directly typed that in rather than creating a string resource. As was covered earlier, Android Studio is lying to you. Click on the "Enter notes here" to see the actual string resource reference.

In Our Next Episode…

The preview of this section is in the process of being translated from its native Klingon.