Создание строк содержимого с помощью ConstraintLayout

В настоящее время я сталкиваюсь с затруднением с относительно сложной реализацией дизайна на основе ConstraintLayout.

Дизайн представляет собой ряд элементов, как показано выше. Эти строки статичны и отображаются / скрываются в зависимости от определенных условий, связанных с данными.

Проблема, с которой я сталкиваюсь, заключается в том, что я не нашел надежного способа правильно разместить каждую строку между разделителями / барьерами, которые есть в моем макете.

Создание строк содержимого с помощью ConstraintLayout

Как вы можете видеть на изображении выше, мой макет ограничений не учитывает барьеры / разделители, как ожидалось. Я включил XML для этого макета ниже.

 <android.support.constraint.ConstraintLayout
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"
            android:orientation = "vertical"
            android:paddingLeft = "16dp"
            android:paddingRight = "16dp">

                <ImageView
                    android:id = "@+id/timeIcon"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:src = "@drawable/ic_clock"
                    app:layout_constraintStart_toStartOf = "parent"
                    app:layout_constraintTop_toTopOf = "parent" />

                <TextView
                    android:id = "@+id/timeTextView"
                    android:layout_width = "0dp"
                    android:layout_height = "wrap_content"
                    android:textColor = "#FF354052"
                    android:textSize = "14sp"
                    android:textStyle = "bold"
                    app:layout_constraintEnd_toStartOf = "@id/statusTextView"
                    app:layout_constraintStart_toEndOf = "@+id/textGuideline"
                    app:layout_constraintTop_toTopOf = "parent"
                    tools:text = "4:20 PM" />

                <com.weedmaps.driver.android.view.StatusTextView
                    android:id = "@+id/statusTextView"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:paddingBottom = "4dp"
                    android:paddingEnd = "27dp"
                    android:paddingStart = "27dp"
                    android:paddingTop = "4dp"
                    android:textAllCaps = "true"
                    android:textSize = "12sp"
                    android:textStyle = "bold"
                    app:layout_constraintEnd_toEndOf = "parent"
                    app:layout_constraintTop_toTopOf = "parent"
                    tools:background = "@color/accepted_blue" />

                <android.support.constraint.Barrier
                    android:id = "@+id/headerDividerTopBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "top"
                    app:constraint_referenced_ids = "headerDivider" />

                <!-- / end delivery status section -->

                <android.support.constraint.Barrier
                    android:id = "@+id/deliveryStatusSectionBottomBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "bottom"
                    app:constraint_referenced_ids = "statusTextView, timeTextView, timeIcon" />

                <View
                    android:id = "@+id/headerDivider"
                    android:layout_width = "match_parent"
                    android:layout_height = "1dp"
                    android:background = "#FFE6EAEE"
                    app:layout_constraintTop_toBottomOf = "@id/deliveryStatusSectionBottomBarrier"
                    app:layout_constraintBottom_toTopOf = "@id/destinationInfoSectionTopBarrier" />

                <android.support.constraint.Barrier
                    android:id = "@+id/destinationInfoSectionTopBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "top"
                    app:constraint_referenced_ids = "directionsIcon, addressTextContainer, locationIcon" />

                <ImageView
                    android:id = "@+id/locationIcon"
                    android:layout_width = "16dp"
                    android:layout_height = "20dp"
                    android:src = "@drawable/ic_location_pin"
                    app:layout_constraintTop_toBottomOf = "@id/headerDivider"
                    app:layout_constraintStart_toStartOf = "parent"
                    app:layout_constraintBottom_toTopOf = "@id/customerInfoSectionTopBarrier" />

                <android.support.constraint.Barrier
                    android:id = "@+id/locationIconBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "end"
                    app:constraint_referenced_ids = "locationIcon" />

                <LinearLayout
                    android:id = "@+id/addressTextContainer"
                    android:layout_width = "0dp"
                    android:layout_height = "wrap_content"
                    android:layout_marginEnd = "12dp"
                    android:orientation = "vertical"
                    app:layout_constraintTop_toBottomOf = "@id/headerDivider"
                    app:layout_constraintEnd_toStartOf = "@id/directionsIconBarrier"
                    app:layout_constraintStart_toEndOf = "@+id/textGuideline"
                    app:layout_constraintBottom_toTopOf = "@id/customerInfoSectionTopBarrier">

                    <TextView
                        android:id = "@+id/addressTextView"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        android:textColor = "#FF354052"
                        android:textSize = "14sp"
                        android:textStyle = "bold"
                        tools:text = "423 Clyde Ford Apt. 25" />

                    <TextView
                        android:id = "@+id/cityStateZipTextView"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        android:textColor = "#FF354052"
                        android:textSize = "14sp"
                        tools:text = "Irvine, CA 92602" />

                </LinearLayout>

                <android.support.constraint.Barrier
                    android:id = "@+id/directionsIconBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "start"
                    app:constraint_referenced_ids = "directionsIcon" />

                <ImageView
                    android:id = "@+id/directionsIcon"
                    android:layout_width = "47dp"
                    android:layout_height = "47dp"
                    android:src = "@drawable/ic_directions"
                    app:layout_constraintTop_toBottomOf = "@id/headerDivider"
                    app:layout_constraintEnd_toEndOf = "parent"
                    app:layout_constraintBottom_toTopOf = "@id/customerInfoSectionTopBarrier" />

                <android.support.constraint.Barrier
                    android:id = "@+id/destinationInfoSectionBottomBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "bottom"
                    app:constraint_referenced_ids = "directionsIcon, addressTextContainer, locationIcon" />

                <!-- / end destination info section -->

                <View
                    android:id = "@+id/destinationDivider"
                    android:layout_width = "match_parent"
                    android:layout_height = "1dp"
                    android:background = "#FFE6EAEE"
                    app:layout_constraintTop_toBottomOf = "@+id/destinationInfoSectionBottomBarrier" />

                <android.support.constraint.Barrier
                    android:id = "@+id/customerInfoSectionTopBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "top"
                    app:constraint_referenced_ids = "customerNotesLayout, smsIcon, phoneIcon, customerInfoLayout, personIcon" />

                <ImageView
                    android:id = "@+id/personIcon"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    android:src = "@drawable/ic_person"
                    app:layout_constraintStart_toStartOf = "parent"
                    app:layout_constraintTop_toTopOf = "@id/customerInfoLayout" />

                <LinearLayout
                    android:id = "@+id/customerInfoLayout"
                    android:layout_width = "0dp"
                    android:layout_height = "wrap_content"
                    android:orientation = "vertical"
                    android:paddingEnd = "8dp"
                    app:layout_constraintBottom_toTopOf = "@id/customerNotesLayout"
                    app:layout_constraintEnd_toStartOf = "@id/phoneIcon"
                    app:layout_constraintStart_toEndOf = "@+id/textGuideline"
                    app:layout_constraintTop_toBottomOf = "@id/destinationDivider">

                    <TextView
                        android:id = "@+id/nameTextView"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        android:singleLine = "true"
                        android:textColor = "#FF354052"
                        android:textSize = "14sp"
                        android:textStyle = "bold"
                        tools:text = "423 Clyde Ford Apt. 25ssdfsdasvewwevsrdggreve vevevrsv gaervavrvsevsevve0" />

                    <TextView
                        android:id = "@+id/viewDocumentsTextView"
                        android:layout_width = "wrap_content"
                        android:layout_height = "wrap_content"
                        android:text = "@string/delivery_detail_view_documents"
                        android:textColor = "#FF354052"
                        android:textSize = "14sp"
                        app:layout_constraintStart_toEndOf = "@id/personIcon"
                        app:layout_constraintTop_toBottomOf = "@+id/nameTextView" />

                </LinearLayout>

                <ImageView
                    android:id = "@+id/phoneIcon"
                    android:layout_width = "47dp"
                    android:layout_height = "47dp"
                    android:layout_marginEnd = "8dp"
                    android:src = "@drawable/ic_call"
                    android:visibility = "gone"
                    app:layout_constraintBottom_toTopOf = "@+id/customerNotesLayout"
                    app:layout_constraintEnd_toStartOf = "@id/smsIcon"
                    app:layout_constraintStart_toEndOf = "@id/customerInfoLayout"
                    app:layout_constraintTop_toBottomOf = "@id/destinationInfoSectionBottomBarrier"
                    tools:visibility = "visible" />

                <ImageView
                    android:id = "@+id/smsIcon"
                    android:layout_width = "47dp"
                    android:layout_height = "47dp"
                    android:src = "@drawable/ic_chat"
                    android:visibility = "gone"
                    app:layout_constraintBottom_toTopOf = "@id/customerNotesLayout"
                    app:layout_constraintEnd_toEndOf = "parent"
                    app:layout_constraintStart_toEndOf = "@id/phoneIcon"
                    app:layout_constraintTop_toBottomOf = "@id/destinationInfoSectionBottomBarrier"
                    tools:visibility = "visible" />

                <android.support.constraint.Barrier
                    android:id = "@+id/customerInfoAndIconBarrierBottom"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "bottom"
                    app:constraint_referenced_ids = "personIcon, customerInfoLayout, phoneIcon, smsIcon" />

                <FrameLayout android:id = "@+id/customerNotesLayout"
                    android:layout_width = "match_parent"
                    android:layout_height = "wrap_content"
                    android:visibility = "gone"
                    app:layout_constraintTop_toBottomOf = "@id/customerInfoAndIconBarrierBottom"
                    tools:visibility = "visible">

                    <LinearLayout
                        android:layout_width = "match_parent"
                        android:layout_height = "wrap_content"
                        android:background = "@color/customer_notes_gray"
                        android:orientation = "vertical"
                        android:layout_marginTop = "16dp"
                        android:paddingStart = "32dp"
                        android:paddingTop = "16dp"
                        android:paddingEnd = "16dp"
                        android:paddingBottom = "16dp">

                        <TextView
                            android:id = "@+id/customer_note_title"
                            android:layout_width = "wrap_content"
                            android:layout_height = "wrap_content"
                            android:layout_marginBottom = "5dp"
                            android:text = "@string/customer_notes_title"
                            android:textColor = "@color/darker_gray"
                            android:textSize = "12sp"
                            android:textStyle = "bold" />

                        <TextView
                            android:id = "@+id/customerNote"
                            android:layout_width = "wrap_content"
                            android:layout_height = "wrap_content"
                            android:lineSpacingMultiplier = "1.25"
                            android:textColor = "@color/darker_gray"
                            android:textSize = "14sp"
                            tools:text = "iojsdfij siodfjosid fisdfj oidfj osidj fos fghfg hfhfg hgf hfgh fgh fgh fh fgh fghfgh fg fghf gh fgh f gf fgh f fgh gh fg fhfgh fhf hfghfghgfhfghfg hfgfisddjf " />

                    </LinearLayout>

                </FrameLayout>

                <android.support.constraint.Barrier
                    android:id = "@+id/customerInfoSectionBottomBarrier"
                    android:layout_width = "wrap_content"
                    android:layout_height = "wrap_content"
                    app:barrierDirection = "bottom"
                    app:constraint_referenced_ids = "customerNotesLayout, smsIcon, phoneIcon, customerInfoLayout, personIcon" />

                <!-- / end customer info section -->

                <View
                    android:id = "@+id/customerDivider"
                    android:layout_width = "match_parent"
                    android:layout_height = "1dp"
                    android:background = "#FFE6EAEE"
                    app:layout_constraintTop_toBottomOf = "@id/customerInfoSectionBottomBarrier" />

</android.support.constraint.ConstraintLayout>

У меня такое чувство, что я неправильно использую здесь компоновку ограничений, но я не уверен на 100%, что это может быть.

Мы будем благодарны за любое понимание этой проблемы. Спасибо!

Честно говоря, я не думаю, что ConstraintLayout - лучший инструмент для этой работы. Это похоже на то, что было бы намного проще с LinearLayout в качестве корневого элемента. Да, для этого потребуется добавить несколько вложенных представлений, но это небольшая цена за более простое в обслуживании приложение.

— 12.10.2018 19:26

@BenP. Я согласен с тем, что исходный макет уже несколько работал с ConstraintLayout, и я пытаюсь повторно использовать то, что уже есть. Я даже пробовал LinearLayout в корне с несколькими включениями ConstraintLayout для каждой строки. Проблема в том, что это приводит к серьезной проблеме с производительностью из-за того, что все измерения ConstraintLayout выполняются.

— 12.10.2018 19:32

Действительно? Это в RecyclerView или ListView или что-то в этом роде? Один LinearLayout + четыре ConstraintLayout + ~ 20 дочерних представлений действительно не должны иметь проблем с производительностью по сравнению с одним ConstraintLayout + 20 дочерними представлениями. Вы действительно измерили и заметили, что LinearLayout слишком медленный? Или вас просто беспокоит абстрактная производительность?

— 12.10.2018 19:34

@BenP. Большая проблема производительности заключается в том, что мы помещаем этот макет в CoordinatorLayout с BottomSheetBehavior, который накладывается поверх MapFragment. Я полагаю, что без MapFragment моя идея нескольких включений будет работать нормально. Я также должен упомянуть, что да, я измерял производительность в режиме реального времени, и это вызывает много пропущенных кадров в потоке пользовательского интерфейса. Скорее всего, у нас есть другие проблемы с производительностью, которые усугубляют нашу ситуацию, но мы находимся именно в этом.

— 12.10.2018 19:37

Итак, вы действительно создали его с помощью LinearLayout и получили доказательства того, что он не работает?

— 12.10.2018 19:38

@BenP. Да, извините, я не включил свой ответ на этот вопрос в свой предыдущий комментарий. Я отредактировал его, чтобы включить эту информацию.

— 12.10.2018 19:39

Справедливо. Похоже, у вас много работы, тогда :)

— 12.10.2018 19:40

Я надеюсь, что приведенный ниже ответ решит вашу проблему, и если это не так, запишите комментарий о том, чего еще вы хотите достичь. ;-)

— 08.11.2018 11:45

android android-layout android-constraintlayout

12.10.2018 19:21

Коллекции (ArrayList , HashSet , HashMap)

1 560

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я сделал вышеупомянутый макет, имея в виду почти все варианты использования того, чего вы хотите достичь, но все же, если что-то еще нужно в нем охватить; пожалуйста, спросите дальше и просмотрите код, чтобы понять его полностью.

Код XML:

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

<android.support.constraint.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"
    android:paddingLeft = "16dp"
    android:paddingRight = "16dp">

    <ImageView
        android:id = "@+id/iv_time_icon"
        android:layout_width = "36dp"
        android:layout_height = "42dp"
        android:src = "@android:drawable/btn_star_big_on"
        android:paddingTop = "5dp"
        android:paddingBottom = "5dp"
        android:layout_marginTop = "10dp"
        app:layout_constraintStart_toStartOf = "parent"
        app:layout_constraintTop_toTopOf = "parent" />

    <TextView
        android:id = "@+id/tv_time"
        android:layout_width = "0dp"
        android:layout_height = "wrap_content"
        android:textColor = "#FF354052"
        android:textSize = "14sp"
        android:textStyle = "bold"
        android:layout_marginStart = "10dp"
        app:layout_constraintStart_toEndOf = "@id/iv_time_icon"
        app:layout_constraintTop_toTopOf = "@id/iv_time_icon"
        app:layout_constraintEnd_toStartOf = "@id/tv_status"
        app:layout_constraintBottom_toBottomOf = "@+id/iv_time_icon"
        tools:text = "4:20 PM" />

    <TextView
        android:id = "@+id/tv_status"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:paddingStart = "27dp"
        android:paddingEnd = "27dp"
        android:paddingTop = "4dp"
        android:paddingBottom = "4dp"
        android:textSize = "12sp"
        android:textStyle = "bold"
        tools:text = "ACCEPTED"
        android:textColor = "@android:color/white"
        android:background = "@android:color/holo_blue_dark"
        app:layout_constraintEnd_toEndOf = "parent"
        app:layout_constraintTop_toTopOf = "@id/iv_time_icon"
        app:layout_constraintBottom_toBottomOf = "@id/iv_time_icon" />

    <View
        android:id = "@+id/v_divider_line_one"
        android:layout_width = "0dp"
        android:layout_height = "1dp"
        android:background = "#FFE6EAEE"
        android:layout_marginTop = "10dp"
        app:layout_constraintStart_toStartOf = "parent"
        app:layout_constraintTop_toBottomOf = "@id/iv_time_icon"
        app:layout_constraintEnd_toEndOf = "parent" />

    <ImageView
        android:id = "@+id/iv_location_icon"
        android:layout_width = "36dp"
        android:layout_height = "32dp"
        android:src = "@android:drawable/btn_star_big_on"
        app:layout_constraintStart_toStartOf = "parent"
        app:layout_constraintTop_toBottomOf = "@id/v_divider_line_one"
        app:layout_constraintBottom_toBottomOf = "@id/barrier_below_complete_address" />

    <LinearLayout
        android:id = "@+id/ll_complete_address"
        android:layout_width = "0dp"
        android:layout_height = "wrap_content"
        android:paddingStart = "0dp"
        android:paddingTop = "10dp"
        android:paddingEnd = "20dp"
        android:paddingBottom = "10dp"
        android:layout_marginStart = "10dp"
        android:orientation = "vertical"
        app:layout_constraintStart_toEndOf = "@+id/iv_location_icon"
        app:layout_constraintTop_toBottomOf = "@id/v_divider_line_one"
        app:layout_constraintBottom_toTopOf = "@id/barrier_below_complete_address"
        app:layout_constraintEnd_toStartOf = "@id/iv_directions_icon">

        <TextView
            android:id = "@+id/tv_address"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:textColor = "#FF354052"
            android:textSize = "14sp"
            android:textStyle = "bold"
            tools:text = "423 Clyde Ford Apt. 25 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum" />

        <!--
        Also, try:
        tools:text = "423 Clyde Ford Apt. 25"
        In the TextView just above (i.e. with
        the id = "@+id/tv_address").

        Works fine (for me) as per the use case.  -->

        <TextView
            android:id = "@+id/tv_city_state"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:textColor = "#FF354052"
            android:textSize = "14sp"
            tools:text = "Irvine, CA 92602" />

    </LinearLayout>

    <!--
    Barrier to place the views appropriately
    in case of increase or decrease in the
    address text i.e. the text placed within
    the TextView with the id = "@+id/tv_address".  -->

    <android.support.constraint.Barrier
        android:id = "@+id/barrier_below_complete_address"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        app:barrierDirection = "bottom"
        app:constraint_referenced_ids = "ll_complete_address" />

    <ImageView
        android:id = "@+id/iv_directions_icon"
        android:layout_width = "46dp"
        android:layout_height = "46dp"
        android:src = "@android:drawable/btn_star_big_on"
        app:layout_constraintTop_toBottomOf = "@id/v_divider_line_one"
        app:layout_constraintEnd_toEndOf = "parent"
        app:layout_constraintBottom_toTopOf = "@id/barrier_below_complete_address" />

    <View
        android:id = "@+id/v_divider_line_two"
        android:layout_width = "0dp"
        android:layout_height = "1dp"
        android:background = "#FFE6EAEE"
        app:layout_constraintStart_toStartOf = "parent"
        app:layout_constraintTop_toBottomOf = "@id/barrier_below_complete_address"
        app:layout_constraintEnd_toEndOf = "parent" />

    <ImageView
        android:id = "@+id/iv_person_icon"
        android:layout_width = "36dp"
        android:layout_height = "44dp"
        android:layout_marginTop = "5dp"
        android:paddingTop = "6dp"
        android:paddingBottom = "6dp"
        android:src = "@android:drawable/btn_star_big_on"
        app:layout_constraintStart_toStartOf = "parent"
        app:layout_constraintTop_toBottomOf = "@id/v_divider_line_two" />

    <TextView
        android:id = "@+id/tv_name"
        android:layout_width = "0dp"
        android:layout_height = "wrap_content"
        android:singleLine = "true"
        android:paddingStart = "0dp"
        android:paddingEnd = "20dp"
        android:textColor = "#FF354052"
        android:textSize = "14sp"
        android:textStyle = "bold"
        android:layout_marginTop = "5dp"
        android:layout_marginStart = "10dp"
        tools:text = "423 Clyde Ford Apt. 25 Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
        app:layout_constraintStart_toEndOf = "@id/iv_person_icon"
        app:layout_constraintTop_toTopOf = "@+id/iv_person_icon"
        app:layout_constraintEnd_toStartOf = "@id/iv_call_icon"
        app:layout_constraintHorizontal_bias = "0.0" />

    <TextView
        android:id = "@+id/tv_view_documents"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        tools:text = "View Documents"
        android:textColor = "#FF354052"
        android:textSize = "14sp"
        app:layout_constraintStart_toStartOf = "@id/tv_name"
        app:layout_constraintTop_toBottomOf = "@+id/tv_name" />

    <ImageView
        android:id = "@+id/iv_message_icon"
        android:layout_width = "46dp"
        android:layout_height = "46dp"
        android:src = "@android:drawable/btn_star_big_on"
        app:layout_constraintTop_toTopOf = "@+id/tv_name"
        app:layout_constraintEnd_toEndOf = "parent" />

    <ImageView
        android:id = "@+id/iv_call_icon"
        android:layout_width = "46dp"
        android:layout_height = "46dp"
        android:src = "@android:drawable/btn_star_big_on"
        android:layout_marginEnd = "10dp"
        app:layout_constraintTop_toTopOf = "@id/iv_message_icon"
        app:layout_constraintEnd_toStartOf = "@id/iv_message_icon" />

    <LinearLayout
        android:id = "@+id/ll_customer_notes"
        android:layout_width = "0dp"
        android:layout_height = "wrap_content"
        android:background = "@android:color/darker_gray"
        android:orientation = "vertical"
        android:layout_marginTop = "10dp"
        android:paddingStart = "32dp"
        android:paddingEnd = "32dp"
        android:paddingTop = "16dp"
        android:paddingBottom = "16dp"
        app:layout_constraintStart_toStartOf = "parent"
        app:layout_constraintTop_toBottomOf = "@+id/iv_message_icon">

        <TextView
            android:id = "@+id/tv_title_customer_notes"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:layout_marginBottom = "8dp"
            tools:text = "CUSTOMER NOTES"
            android:textColor = "@android:color/black"
            android:textSize = "12sp"
            android:textStyle = "bold" />

        <TextView
            android:id = "@+id/tv_customer_notes"
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:lineSpacingMultiplier = "1.25"
            tools:text = "Please don't knock on the door. I have a dog. Just call when you're here. Thank you. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum."
            android:textColor = "@android:color/black"
            android:textSize = "14sp" />

    </LinearLayout>

    <View
        android:id = "@+id/v_divider_line_three"
        android:layout_width = "0dp"
        android:layout_height = "1dp"
        android:layout_marginTop = "15dp"
        android:background = "#FFE6EAEE"
        app:layout_constraintStart_toStartOf = "parent"
        app:layout_constraintTop_toBottomOf = "@id/ll_customer_notes"
        app:layout_constraintEnd_toEndOf = "parent" />

    <!--
    To manage the visibility of each row,
    refer the grouping logic as applied
    below for each row (including its
    separator/divider line; which is just
    below it).

    Try changing the 'visibility' of each
    group to "gone".  -->

    <android.support.constraint.Group
        android:id = "@+id/group_row_one"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:visibility = "visible"
        app:constraint_referenced_ids = "iv_time_icon, tv_time, tv_status, v_divider_line_one" />

    <android.support.constraint.Group
        android:id = "@+id/group_row_two"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:visibility = "visible"
        app:constraint_referenced_ids = "iv_location_icon, ll_complete_address, iv_directions_icon, v_divider_line_two" />

    <android.support.constraint.Group
        android:id = "@+id/group_row_three"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:visibility = "visible"
        app:constraint_referenced_ids = "iv_person_icon, tv_name, tv_view_documents, iv_call_icon, iv_message_icon, v_divider_line_three, ll_customer_notes" />

</android.support.constraint.ConstraintLayout>

Скриншоты (для приведенного выше кода):

1] С дополнительным адресным текстом.