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>
Prev Table of Contents Next
This book is licensed under the Creative Commons Attribution-ShareAlike 4.0 International license.