Step #8: Creating the Description Field

The other two things that the user should be able to edit here are the description and the notes. They should not be able to edit the created-on date — that is the date on which the to-do item was created, and so it should not change after creation. For the description and the notes, we will use EditText widgets.

Switch back to graphical designer in the layout editor. In the “Palette” pane, in the “Text” category, drag a “Plain Text” widget into the design area. Using the grab handles, set up constraints to:

• Tie the top and end sides of the EditText to the top and end sides of the ConstraintLayout
• Connect the start side of the EditText to the end side of the CheckBox

Next, change the “layout_width” attribute in the Attributes pane to match_constraint:

Then, in the “Layout” section of the “Attributes” pane, give it 8dp of margin on the top, start, and end sides, via the drop-downs.

Next, switch to the “Code” view, and change the android:id value for this <EditText> to be @+id/desc. Afterwards, switch back to the “Design” view.

If you look closely, you will see that our CheckBox is not very well aligned vertically with respect to the EditText:

Ideally, it would be vertically centered. To do that, re-drag a constraint from the top of the CheckBox to the top of the EditText. Then, create a similar constraint, from the bottom of the CheckBox to the bottom of the EditText

In the Attributes pane, the “Plain Text” widget that we dragged into the preview gave us an EditText set up with an “inputType” of textPersonName:

The android:inputType attribute provides hints to soft keyboards as to what we expect to use as input. For example, in languages where there is a distinction between uppercase and lowercase letters, textPersonName might trigger a switch to an uppercase keyboard for each portion of a name. In this case, we really want plain text, so click on the flag adjacent to textPersonName. Then, in the pop-up panel that appears, uncheck textPersonName and check text:

Then, click the “Apply” button in the popup to close that popup.

An EditText has an android:hint attribute. This provides some text that will appear in the field in gray when there is no actual text entered by the user in the field. Once the user starts typing, the hint goes away. This is used to save space over having a separate label or caption for the field. With that in mind, click the “O” button for the “hint” attribute in the Attributes pane. Create a new string resource using the drop-down menu. Give the resource a name of desc and a value of Description. Then, click OK to define the string resource and apply it to the hint.

Finally, clear out the “text” attribute, as we will set that at runtime.

At this point, the layout XML should resemble:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent" android:layout_height="match_parent">

  <CheckBox
    android:id="@+id/isCompleted"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/desc"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/desc" />

  <EditText
    android:id="@+id/desc"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:ems="10"
    android:hint="@string/desc"
    android:inputType="text"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/isCompleted"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>