OpenTracks/src/main/res/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/activated_background"
    android:paddingStart="8dp"
    android:paddingEnd="8dp"
    android:paddingTop="12dp"
    android:paddingBottom="12dp">

    <!-- Photo -->
    <ImageView
        android:id="@+id/list_item_photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="4dp"
        android:contentDescription="@string/image_photo_marker"
        android:scaleType="centerCrop" />

    <!-- A gradient on top of the text -->
    <ImageView
        android:id="@+id/list_item_text_gradient"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:alpha=".6"
        android:visibility="gone"
        tools:visibility="visible"
        android:contentDescription="@string/image_photo_marker"
        android:src="@drawable/text_gradient" />

    <!-- Icon -->
    <ImageView
        android:id="@+id/list_item_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:contentDescription="@string/image_track"
        tools:src="@drawable/ic_activity_bike_24dp"/>

    <!-- Name -->
    <TextView
        android:id="@+id/list_item_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        style="?attr/textAppearanceBody1"
        android:singleLine="true"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/list_item_icon"
        app:layout_constraintEnd_toStartOf="@id/list_item_date"
        tools:text="Main text" />

    <!-- Date -->
    <TextView
        android:id="@+id/list_item_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="?attr/textAppearanceBodySmall"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/list_item_name"
        app:layout_constraintEnd_toEndOf="parent"
        android:gravity="end"
        android:layout_marginStart="8dp"
        tools:text="2022-02-17" />

    <!-- Total time and distance -->
    <TextView
        android:id="@+id/list_item_time_distance"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        style="?attr/textAppearanceBodySmall"
        app:layout_constraintTop_toBottomOf="@id/list_item_name"
        app:layout_constraintStart_toStartOf="@id/list_item_name"
        tools:text="50:43 (50.00km)" />

    <!-- Marker count icon -->
    <ImageView
        android:id="@+id/list_item_marker_count_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/list_item_name"
        app:layout_constraintStart_toEndOf="@id/list_item_time_distance"
        app:layout_constraintBottom_toBottomOf="@id/list_item_time_distance"
        android:contentDescription="@string/image_marker_count"
        android:scaleType="centerInside"
        android:src="@drawable/ic_marker_show_24dp" />

    <!-- Marker count text -->
    <TextView
        android:id="@+id/list_item_marker_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="?attr/textAppearanceBodySmall"
        app:layout_constraintStart_toEndOf="@id/list_item_marker_count_icon"
        app:layout_constraintBottom_toBottomOf="@id/list_item_marker_count_icon"
        android:singleLine="true"
        tools:text="2" />

    <!-- Time -->
    <TextView
        android:id="@+id/list_item_time"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        style="?attr/textAppearanceBodySmall"
        app:layout_constraintTop_toBottomOf="@id/list_item_name"
        app:layout_constraintStart_toEndOf="@id/list_item_marker_count"
        app:layout_constraintEnd_toEndOf="parent"
        android:gravity="end"
        android:layout_gravity="bottom"
        android:layout_marginStart="8dp"
        tools:text="10:10:10"/>

    <!-- Second row barrier -->
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/list_item_second_row_barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="list_item_time_distance,list_item_marker_count_icon,list_item_marker_count,list_item_time" />

    <!-- Category and description -->
    <TextView
        android:id="@+id/list_item_category_description"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        style="?attr/textAppearanceBodySmall"
        app:layout_constraintTop_toBottomOf="@id/list_item_second_row_barrier"
        app:layout_constraintStart_toStartOf="@id/list_item_name"
        app:layout_constraintEnd_toEndOf="parent"
        android:maxLines="2"
        android:ellipsize="end"
        tools:text="Description" />

</androidx.constraintlayout.widget.ConstraintLayout>