Step #7: Displaying the Description

Next is the description of the to-do item.

In the graphical designer view of the layout resource editor, from the “Common” category of the “Palette” pane, drag a TextView into the preview area. Using the grab handles, set up three constraints:

• Tie the top and start edges to the corresponding edges of the ConstraintLayout
• Tie the end edge to the start edge of the ImageView

In the “Attributes” pane, change the “layout_width” attribute to match_constraint (a.k.a., 0dp). In the “Layout” section give it 8dp of top, start, and end margin. And, clear the contents of the “text” attribute, as we will fill that in at runtime.

To change the ID, switch to the “Code” view. There, in the <TextView> element, change the android:id value to be “@+id/desc”. Then, switch back to the “Design” view.

Then, in the “Common Attributes” section of the “Attributes” pane, find the textAppearance attribute and fill in ?attr/textAppearanceHeadline1. This says “use a text appearance defined by textAppearanceHeadline1 in our theme”. According to Material Design, this should format the text as a headline, and that seems like a reasonable choice for the description, since it is the most important element of our to-do item.

Unfortunately, Google’s AppCompat system does not adhere particularly well to Material Design. So, we need to make some adjustments, customizing this style a bit.

Open the res/values/styles.xml resource and add the following element to it:

  <style name="HeadlineOneAppearance" parent="@style/TextAppearance.AppCompat.Large">
    <item name="android:textStyle">bold</item>
  </style>

This defines a custom style, HeadlineOneAppearance, that is based on the existing TextAppearance.AppCompat.Large style. It also overrides the textStyle attribute to be bold. Since TextAppearance.AppCompat.Large has a large font, this custom style defines a large bold font.

Then, add this element to the Theme.ToDo resource definition in that file:

    <item name="textAppearanceHeadline1">@style/HeadlineOneAppearance</item>

This says “when a widget tries to use textAppearanceHeadline1, use this style resource for that”.

The layout should now 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">

  <ImageView
    android:id="@+id/completed"
    android:layout_width="@dimen/checked_icon_size"
    android:layout_height="@dimen/checked_icon_size"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:contentDescription="@string/is_completed"
    android:tint="@color/colorAccent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_check_circle" />

  <TextView
    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:textAppearance="?attr/textAppearanceHeadline1"
    app:layout_constraintEnd_toStartOf="@+id/completed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>