Step #7: Adding the CheckBox

As with the roster rows — but unlike the DisplayFragment layout — we should have a CheckBox to allow the user to toggle the completion status of the to-do item being edited.

In the graphical designer for todo_edit, drag a CheckBox from the “Buttons” group in the “Palette” pane into the preview area. Use the grab handles to add constraints tying the CheckBox to the top and start sides of the ConstraintLayout:

In the Attributes pane, clear out the contents of the “text” attribute, as we just want a bare checkbox, without a caption. Also, in the “Layout” section of the “Attributes” pane, give it 8dp of margin on the top and start sides, via the drop-downs.

Then, switch to the “Code” view and modify the android:id attribute of the <CheckBox> element to have a value of @+id/isCompleted.

At this point, the 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"
    android:layout_marginTop="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>