How do I create a layout for a two-line list item according to the Material Design specification

user_3434350 0
Viewed 512

I would like to create a layout for a simple two line list item according to the Material Design specification for a list component. See https://material.io/components/lists/#specs I'm trying to create the first item in the two line specification.

I could align the bottom of the first TextView 28dp to the top, probably with a ConstraintLayout and a Guideline. Same thing for the secondary TextView with 20dp to the bottom of the first TextView.

The problem is that the TextViews should be aligned with the baseline and not the bottom of the view and I don't know how to achieve this.

I've tried using a ConstraintLayout with a Guideline and app:layout_constraintBaseline_toBaselineOf in the TextView to the Guideline but as I understand it this should not work as a Guideline does not have a baseline.

A simple ConstraintLayout with two TextViews that should be aligned with the baselines:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?textAppearanceSubtitle1"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?textAppearanceCaption"
        />

</androidx.constraintlayout.widget.ConstraintLayout>
android-constraintlayout material-design android
1 Answers

I made that with only padding top and bottom for textview because if you calculate it's 16dp. You can also add this padding to the constraint layout 

<?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="72dp">

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_begin="@dimen/burger_margin" />

    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_end="@dimen/burger_margin" />

    <TextView
            android:id="@+id/two_line_list_item_title"
            android:textAppearance="?textAppearanceSubtitle1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingTop="16dp"
            app:layout_constraintBottom_toTopOf="@id/textBody2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@id/guideline_start"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />

    <TextView
            android:id="@+id/textBody2"
            android:textAppearance="?textAppearanceCaption"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"
            android:paddingBottom="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@id/guideline_end"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="@id/guideline_start"
            app:layout_constraintTop_toBottomOf="@+id/two_line_list_item_title"
            tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />

</androidx.constraintlayout.widget.ConstraintLayout>
user_98459290
Related