androidx / constraintlayout

ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way
Apache License 2.0
1.08k stars 175 forks source link

ConstraintLayout as a direct child of NestedScrollView not scrollable from 2.1.0 #492

Open OBCZ opened 2 years ago

OBCZ commented 2 years ago

Hello good people, I hope you are all doing fine. So we have updated our ConstraintLayout dependency to 2.1.1 and our scroll view stopped scrolling. See below layout example we have in our app for your reference. Further investigation showed that the scrolling broke somewhere between 2.1.0-alpha1 and 2.1.0-beta02. For now, we have downgraded to 2.0.4 to keep things working. Could you please take a look? Many thanks! In case you need anything else from us, just let me know. Ondrej


<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.core.widget.NestedScrollView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:fillViewport="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            EDIT: This is the problematic part.
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/hig_white">

                <include
                    android:id="@+id/tickets_header"
                    layout="@layout/travel_section_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    />

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/view_ticket_btn"
                    style="@style/SomeStyle"
                    android:layout_width="234dp"
                    android:layout_height="44dp"
                    android:layout_marginTop="40dp"
                    android:text="sample_text"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/tickets_header" />

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/save_to_phone_btn"
                    style="@style/SomeStyle"
                    android:layout_width="234dp"
                    android:layout_height="44dp"
                    android:layout_marginTop="20dp"
                    android:text="sample_text"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/view_ticket_btn" />

                <TextView
                    android:id="@+id/ticket_number_label_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginVertical="32dp"
                    android:layout_marginEnd="4dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_charcoal"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintEnd_toStartOf="@id/ticket_number_tv"
                    app:layout_constraintHorizontal_chainStyle="packed"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/save_to_phone_btn" />

                <TextView
                    android:id="@+id/ticket_number_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginVertical="32dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_concur_blue"
                    android:textIsSelectable="true"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@id/ticket_number_label_tv"
                    app:layout_constraintTop_toBottomOf="@id/save_to_phone_btn"
                     />

                <include
                    android:id="@+id/divider"
                    layout="@layout/divider_t2"
                    android:layout_width="0dp"
                    android:layout_height="1dp"
                    android:layout_marginTop="@dimen/travel_margin_x_large_30dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/ticket_number_tv" />

                <include
                    android:id="@+id/train_details_header"
                    layout="@layout/travel_section_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/divider"
                    />

                <ImageView
                    android:id="@+id/provider_iv"
                    android:layout_width="61dp"
                    android:layout_height="61dp"
                    android:layout_marginStart="17dp"
                    app:imageResource="sample_text"
                    app:layout_constraintBottom_toTopOf="@id/divider_train_details_center"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/train_details_header" />

                <TextView
                    android:id="@+id/provider_name_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="11dp"
                    android:layout_marginTop="17dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_charcoal"
                    android:textSize="@dimen/text_size_21"
                    app:layout_constraintStart_toEndOf="@id/provider_iv"
                    app:layout_constraintTop_toBottomOf="@id/train_details_header"
                     />

                <TextView
                    android:id="@+id/train_name_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="11dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_charcoal"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintBottom_toTopOf="@id/divider_train_details_center"
                    app:layout_constraintStart_toEndOf="@id/provider_iv"
                    app:layout_constraintTop_toBottomOf="@id/provider_name_tv"
                     />

                <View
                    android:id="@+id/divider_train_details_center"
                    android:layout_width="0dp"
                    android:layout_height="1dp"
                    android:layout_marginHorizontal="@dimen/travel_margin_medium"
                    android:layout_marginTop="17dp"
                    android:background="@color/hig_light_grey"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/train_name_tv" />

                <TextView
                    android:id="@+id/departure_station_tv"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginHorizontal="17dp"
                    android:layout_marginTop="15dp"
                    android:layout_marginBottom="@dimen/travel_margin_x_small_6dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_charcoal"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintEnd_toStartOf="@id/center_vertical_guideline"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/divider_train_details_center"
                     />

                <TextView
                    android:id="@+id/departure_date_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="17dp"
                    android:layout_marginTop="@dimen/travel_margin_x_small_6dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_dark_grey"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintEnd_toStartOf="@id/departure_time_tv"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/departure_station_tv"
                     />

                <TextView
                    android:id="@+id/departure_time_tv"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="5dp"
                    android:layout_marginTop="@dimen/travel_margin_x_small_6dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_charcoal"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintEnd_toEndOf="@id/departure_station_tv"
                    app:layout_constraintStart_toEndOf="@id/departure_date_tv"
                    app:layout_constraintTop_toBottomOf="@id/departure_station_tv"
                     />

                <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/center_vertical_guideline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_constraintGuide_percent="0.5" />

                <TextView
                    android:id="@+id/arrival_station_tv"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginHorizontal="17dp"
                    android:layout_marginTop="15dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_charcoal"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@id/center_vertical_guideline"
                    app:layout_constraintTop_toBottomOf="@id/divider_train_details_center"
                     />

                <TextView
                    android:id="@+id/arrival_date_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/travel_margin_x_small_6dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_dark_grey"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintStart_toStartOf="@id/arrival_station_tv"
                    app:layout_constraintTop_toBottomOf="@id/arrival_station_tv"
                     />

                <TextView
                    android:id="@+id/arrival_time_tv"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="5dp"
                    android:layout_marginTop="@dimen/travel_margin_x_small_6dp"
                    android:text="sample_text"
                    android:textAppearance="@style/SomeStyle"
                    android:textColor="@color/hig_charcoal"
                    android:textSize="@dimen/text_size_15"
                    app:layout_constraintEnd_toEndOf="@id/arrival_station_tv"
                    app:layout_constraintStart_toEndOf="@id/arrival_date_tv"
                    app:layout_constraintTop_toBottomOf="@id/arrival_station_tv"
                     />

                <androidx.constraintlayout.widget.Barrier
                    android:id="@+id/barrier"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:barrierDirection="bottom"
                    app:constraint_referenced_ids="departure_date_tv, departure_time_tv, arrival_date_tv, arrival_time_tv" />

                <include
                    android:id="@+id/divider2"
                    layout="@layout/divider_t2"
                    android:layout_width="0dp"
                    android:layout_height="1dp"
                    android:layout_marginTop="@dimen/travel_margin_medium_18dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/barrier" />

                <View
                    android:id="@+id/gap"
                    android:layout_width="0dp"
                    android:layout_height="10dp"
                    android:background="@color/hig_off_white"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/divider2" />

                <include
                    android:id="@+id/divider3"
                    layout="@layout/divider_t2"
                    android:layout_width="0dp"
                    android:layout_height="1dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/gap" />

                <include
                    android:id="@+id/rail_itin_confirmation_ll"
                    layout="@layout/travel_itinerary_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/divider3"

                    />

                <include
                    android:id="@+id/rail_itin_class_ll"
                    layout="@layout/travel_itinerary_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rail_itin_confirmation_ll"

                    />

                <include
                    android:id="@+id/rail_itin_fare_ll"
                    layout="@layout/travel_itinerary_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rail_itin_class_ll"

                    />

                <include
                    android:id="@+id/rail_itin_seat_ll"
                    layout="@layout/travel_itinerary_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rail_itin_fare_ll"

                    />

                <include
                    android:id="@+id/rail_itin_train_type_ll"
                    layout="@layout/travel_itinerary_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rail_itin_seat_ll"

                    />

                <include
                    android:id="@+id/rail_itin_stops_ll"
                    layout="@layout/travel_itinerary_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rail_itin_train_type_ll"

                    />

                <include
                    android:id="@+id/rail_itin_duration_ll"
                    layout="@layout/travel_itinerary_item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rail_itin_stops_ll"

                    />

                <include
                    layout="@layout/divider_t2"
                    android:layout_width="0dp"
                    android:layout_height="1dp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/rail_itin_duration_ll" />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.core.widget.NestedScrollView>

        <com.concur.mobile.ui.sdk.customview.ProgressOverlayView
            android:id="@+id/progress_overlay"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            app:text="sample_text" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>
rawate-laxmikant01 commented 2 years ago

I am not able to understand this issue, can you please help me?

OBCZ commented 2 years ago

Hey, thanks for your answer and sorry about that, so let me make myself a bit more detailed: When importing CL as a 2.1.0-beta02 and higher, (we have updated to 2.1.1), and you implement a layout as we did (see above layout code), the NestedScrollView there stops being able to be scrolled (i.e. finger gestures do nothing, the scroll view stays "frozen", even though the views in it are out of the screen - Layout Inspector verified; so it should be able to be scrolled). When you downgrade the CL dependency to 2.0.4 the scroll view can be scrolled now. No other changes were necessary, so we deduced either there must have been some sort of a regression change inbetween those versions, or we need to further declare something in order to make the NestedScrollView scroll with 2.1.1. We have been unable to find out what, though. I hope this is more clear now, if not, let me know.

Shvet commented 2 years ago

@OBCZ I have tried using ConstraintLayout inside NestedScrollLayout but i could not scroll it to bottom. In my case i was trying to make first element or say first child's height and width to 0dp and make it to constraint to top and bottom. I have tried using version 2.1.3 and 2.0.4 but no changes Here is xml code:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="12dp"
        app:cardElevation="8dp"
        app:cardMaxElevation="8dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true">

        <RelativeLayout
            android:id="@+id/parentRelativeLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            //.. Other code here
            <RelativeLayout
                android:id="@+id/childRelativeLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:visibility="visible">

                <androidx.core.widget.NestedScrollView
                    android:id="@+id/nestedScroll"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_above="@id/chatLayout"
                    android:fillViewport="true">

                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:nestedScrollingEnabled="true">

                        <androidx.appcompat.widget.AppCompatImageView
                            android:id="@+id/userImage"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toTopOf="parent"
                            tools:src="@tools:sample/avatars" />
                        <!-- app:loadImage="@{user.profilePhotos.get(user.avatarPhotoPosition)}"-->
                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/aboutUser"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="8dp"
                            android:text="@string/about_me"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                            android:textColor="@color/gray"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/userImage" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/aboutUserAnswer"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:text="@{user.aboutMe}"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
                            android:textColor="@color/black"
                            app:layout_constraintStart_toStartOf="@id/aboutUser"
                            app:layout_constraintTop_toBottomOf="@id/aboutUser" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/usersInfo"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            android:text="@{user.username + @string/info}"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                            android:textColor="@color/gray"
                            app:layout_constraintStart_toStartOf="@id/aboutUser"
                            app:layout_constraintTop_toBottomOf="@id/aboutUserAnswer" />

                        <com.google.android.material.chip.ChipGroup
                            android:id="@+id/chip_group"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="8dp"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/usersInfo" />

                        <androidx.appcompat.widget.AppCompatImageView
                            android:id="@+id/userFirstImage"
                            android:layout_width="match_parent"
                            android:layout_height="300dp"
                            android:layout_marginTop="16dp"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/chip_group" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/whyAmIHereText"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="16dp"
                            android:text="@string/why_i_m_here"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                            android:textColor="@color/gray"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/userFirstImage" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/whyAmIHereAnswer"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="16dp"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
                            android:textColor="@color/black"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/whyAmIHereText" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/educationText"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="16dp"
                            android:text="@string/education"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                            android:textColor="@color/gray"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/whyAmIHereAnswer" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/educationAnswer"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="16dp"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
                            android:textColor="@color/black"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/educationText" />

                        <androidx.appcompat.widget.AppCompatImageView
                            android:id="@+id/userSecondImage"
                            android:layout_width="match_parent"
                            android:layout_height="300dp"
                            android:layout_marginEnd="16dp"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/educationAnswer"
                            app:loadImage="@{user.profilePhotos.get(0) != null ? user.profilePhotos.get(0) : null}"
                            tools:src="@tools:sample/avatars" />

                        <androidx.appcompat.widget.AppCompatImageView
                            android:id="@+id/userThirdImage"
                            android:layout_width="0dp"
                            android:layout_height="300dp"
                            app:layout_constraintEnd_toStartOf="@id/userFourthImage"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/userSecondImage"
                            app:loadImage="@{user.profilePhotos.get(0) != null ? user.profilePhotos.get(0) : null}"
                            tools:src="@tools:sample/avatars" />

                        <androidx.appcompat.widget.AppCompatImageView
                            android:id="@+id/userFourthImage"
                            android:layout_width="0dp"
                            android:layout_height="300dp"
                            android:backgroundTint="@color/black_1_alpha_30"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toEndOf="@id/userThirdImage"
                            app:layout_constraintTop_toBottomOf="@id/userSecondImage"
                            app:loadImage="@{user.profilePhotos.get(0) != null ? user.profilePhotos.get(0) : null}"
                            tools:src="@tools:sample/avatars" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/morePhotosText"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="@{user.profilePhotos.size() + `more photos`}"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
                            app:layout_constraintBottom_toBottomOf="@id/userFourthImage"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="@id/userFourthImage"
                            app:layout_constraintTop_toBottomOf="@id/userFourthImage"
                            tools:text="2 more photos" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/userLocationText"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="16dp"
                            android:text="@string/location"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                            android:textColor="@color/gray"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/userThirdImage" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/userLocationAnswer"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="16dp"
                            android:layout_marginTop="8dp"
                            android:layout_marginEnd="16dp"
                            android:text="@{user.location}"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
                            android:textColor="@color/black"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/userLocationText" />

                        <com.google.android.material.button.MaterialButton
                            android:id="@+id/addToFavorite"
                            style="@style/Widget.MaterialComponents.Button"
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:text="@string/add_to_favorites"
                            android:textColor="@color/black"
                            app:backgroundTint="@color/gray"
                            app:cornerRadius="5dp"
                            app:icon="@drawable/ic_baseline_star_outline"
                            app:iconGravity="textStart"
                            app:iconTint="@color/black"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/userLocationAnswer"
                            app:layout_constraintWidth_percent="0.7" />

                        <com.google.android.material.textview.MaterialTextView
                            android:id="@+id/block_report"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="16dp"
                            android:layout_marginBottom="120dp"
                            android:text="@string/blocked_report"
                            android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
                            android:textColor="@color/black"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent"
                            app:layout_constraintTop_toBottomOf="@id/addToFavorite" />
                    </androidx.constraintlayout.widget.ConstraintLayout>
                </androidx.core.widget.NestedScrollView>

                <View
                    android:id="@+id/viewPlaceOrder"
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:background="@drawable/match_item_black_gradient" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/userName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="8dp"
                    android:text="@{user.username + `, ` + user.age}"
                    android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
                    android:textColor="@android:color/white"
                    tools:text="Dhaval Gondaliya" />

                <com.google.android.material.textview.MaterialTextView
                    android:id="@+id/userCity"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/userName"
                    android:layout_alignParentStart="true"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="8dp"
                    android:text="@{user.city}"
                    android:textAppearance="@style/TextAppearance.MaterialComponents.Body2"
                    android:textColor="@android:color/white"
                    tools:text="Rajkot" />

                <View
                    android:id="@+id/backgroundViewBottom"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_above="@id/chatLayout"
                    android:layout_alignTop="@+id/bottomButtonLayout"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentEnd="true"
                    android:background="@drawable/match_item_black_gradient_reverse" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/bottomButtonLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_above="@id/chatLayout"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentEnd="true"
                    android:paddingTop="16dp">

                    <com.google.android.material.imageview.ShapeableImageView
                        android:id="@+id/userDisliked"
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:layout_margin="8dp"
                        app:layout_constraintBottom_toTopOf="@+id/guideline"
                        app:layout_constraintEnd_toStartOf="@+id/userReallyLiked"
                        app:layout_constraintHorizontal_bias="0.5"
                        app:layout_constraintHorizontal_chainStyle="packed"
                        app:layout_constraintStart_toStartOf="parent"
                        app:shapeAppearanceOverlay="@style/ShapeAppearance.DreamFriend.ProfileAvatar"
                        app:srcCompat="@drawable/ic_chat_circle" />

                    <com.google.android.material.imageview.ShapeableImageView
                        android:id="@+id/userReallyLiked"
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:layout_margin="8dp"
                        android:visibility="gone"
                        app:layout_constraintBottom_toTopOf="@+id/guideline"
                        app:layout_constraintEnd_toStartOf="@+id/userLiked"
                        app:layout_constraintHorizontal_bias="0.5"
                        app:layout_constraintStart_toEndOf="@+id/userDisliked"
                        app:shapeAppearanceOverlay="@style/ShapeAppearance.DreamFriend.ProfileAvatar"
                        app:srcCompat="@drawable/ic_heart_arrow" />

                    <com.google.android.material.imageview.ShapeableImageView
                        android:id="@+id/userLiked"
                        android:layout_width="70dp"
                        android:layout_height="70dp"
                        android:layout_margin="8dp"
                        app:layout_constraintBottom_toTopOf="@+id/guideline"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintHorizontal_bias="0.5"
                        app:layout_constraintStart_toEndOf="@+id/userReallyLiked"
                        app:shapeAppearanceOverlay="@style/ShapeAppearance.DreamFriend.ProfileAvatar"
                        app:srcCompat="@drawable/ic_heart_yellow" />

                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/guideline"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        app:layout_constraintGuide_percent="0.868673" />
                </androidx.constraintlayout.widget.ConstraintLayout>

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/chatLayout"
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:layout_alignParentBottom="true">

                    <androidx.appcompat.widget.AppCompatEditText
                        android:id="@+id/enterText"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:background="null"
                        android:gravity="start|center_vertical"
                        android:hint="@string/write_a_message"
                        android:paddingStart="4dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/sendChat"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <com.google.android.material.floatingactionbutton.FloatingActionButton
                        android:id="@+id/sendChat"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:contentDescription="@string/message_sending"
                        android:src="@drawable/ic_send"
                        app:backgroundTint="@color/primaryDarkColor"
                        app:fabSize="mini"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:tint="@color/white" />
                </androidx.constraintlayout.widget.ConstraintLayout>
            </RelativeLayout>
        </RelativeLayout>
    </androidx.cardview.widget.CardView>
</layout>