View Manipulation not working while MotionLayout is in progress

user_6645563 0
Viewed 4497

I am trying create a layout where the view would scroll up , but inside a view there is a component that should be not scroll out of view and docked at the top and rest of the content scroll below it, the component would scroll till it hit the top of the screen.

So For the docking part I used motion layout and where it is constraint to the top of parent in the end state. the I placed a nested scrollview after the docked component. this is my motion scene file - 

<Transition
    android:id="@+id/scrollTransition"
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">
   <KeyFrameSet>
   </KeyFrameSet>
    <OnSwipe
        motion:dragDirection="dragUp"
        motion:onTouchUp="stop"
        motion:touchAnchorId="@id/merchant_details"
        motion:moveWhenScrollAtTop="true"/>
</Transition>

<ConstraintSet android:id="@+id/start">

</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:layout_height="wrap_content"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintBottom_toTopOf="@id/merchant_details"
        android:layout_width="match_parent"
        android:id="@+id/product_details" />
    <Constraint
        android:layout_height="wrap_content"
        motion:layout_constraintStart_toStartOf="parent"
        motion:layout_constraintEnd_toEndOf="parent"
        motion:layout_constraintTop_toTopOf="parent"
        android:layout_width="match_parent"
        android:id="@+id/merchant_details" />
</ConstraintSet>

But it should give the feed that it is naturally scrolling and if the user stops scrolling in the middle of the motion states, so I added the motion:onTouchUp="stop" for that.

this is my layout file - 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:id="@+id/hsmerchantListingRoot"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/activity_home_services_merchant_listing_scene"
    tools:context="com.nearbuy.nearbuymobile.modules.home_services.HomeServicesMerchantListingActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/product_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/dp_15"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:visibility="gone">

        <com.nearbuy.nearbuymobile.view.infiniteRotationView.InfiniteRotationView
            android:id="@+id/productImageCarousel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <WebView
            android:id="@+id/htmlView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/productImageCarousel" />

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/detailTitle"
            style="@style/title_3_b"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginEnd="15dp"
            android:textColor="#2b2f31"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/productImageCarousel"
            tools:text="Sofa Cleaning" />

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/detailDescription"
            style="@style/body_2_r"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="15dp"
            android:lineSpacingExtra="4.7sp"
            android:textColor="@color/grey_n"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/detailTitle"
            tools:text="From cotton upholstery to leather finish, there exists a wide array of sofa designs with a range of materials. All of them pick some amount of dust on a daily basis which cannot be washed away…" />

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/readMoreText"
            style="@style/body_1_m"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4.7dp"
            android:text="Read more"
            android:textColor="@color/delight"
            android:visibility="gone"
            app:layout_constraintStart_toStartOf="@+id/detailDescription"
            app:layout_constraintTop_toBottomOf="@+id/detailDescription" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/bannerBarrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="detailDescription,productImageCarousel,htmlView,detailTitle,readMoreText" />

        <ImageView
            android:id="@+id/serviceInfoBanner1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/bannerBarrier"
            tools:src="@drawable/test_img1"/>

        <ImageView
            android:id="@+id/serviceInfoBanner2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/serviceInfoBanner1"
            tools:src="@drawable/test_img1"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/merchant_details"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/product_details"
        app:layout_constraintVertical_bias="0.0"
        tools:visibility="visible">

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/dateFilterBarrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="bottom"
            app:constraint_referenced_ids="llDateFilter" />


        <LinearLayout
            android:id="@+id/llDateFilter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#f7f7fd"
            android:clipToPadding="false"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:paddingTop="@dimen/dp_15"
            android:paddingBottom="@dimen/dp_10"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:visibility="visible">

            <androidx.cardview.widget.CardView
                android:id="@+id/cvMainFilter"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/dp_15"
                app:cardCornerRadius="@dimen/dp_4"
                app:cardElevation="@dimen/dp_2">

                <RelativeLayout
                    android:id="@+id/rlDate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/rounded_corner_gradient_blue"
                    android:paddingStart="@dimen/dp_10"
                    android:paddingTop="@dimen/dp_6"
                    android:paddingEnd="@dimen/dp_10"
                    android:paddingBottom="@dimen/dp_6">

                    <com.nearbuy.nearbuymobile.view.NB_TextView
                        android:id="@+id/tvDateTitle"
                        style="@style/small_m"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/white"
                        tools:text="Today" />

                    <com.nearbuy.nearbuymobile.view.NB_TextView
                        android:id="@+id/tvDateSubtitle"
                        style="@style/title_3_m"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tvDateTitle"
                        android:layout_marginTop="@dimen/dp_2"
                        android:textColor="@color/white"
                        android:visibility="gone"
                        tools:text="1 Oct" />

                    <ImageView
                        android:id="@+id/ivDateDownArrow"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/tvDateTitle"
                        android:layout_marginStart="@dimen/dp_10"
                        android:layout_marginTop="@dimen/dp_10"
                        android:layout_toEndOf="@+id/tvDateSubtitle"
                        android:src="@drawable/arrow_down_white"
                        android:visibility="gone" />

                    <com.nearbuy.nearbuymobile.view.NB_TextView
                        android:id="@+id/tvCount"
                        style="@style/body_4_m"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_toRightOf="@+id/tvDateTitle"
                        android:background="@drawable/white_circle"
                        android:gravity="center"
                        android:paddingLeft="@dimen/dp_8"
                        android:paddingTop="@dimen/dp_5"
                        android:paddingRight="@dimen/dp_8"
                        android:paddingBottom="@dimen/dp_5"
                        android:textColor="@color/delight"
                        android:visibility="gone"
                        tools:text="8" />

                </RelativeLayout>

            </androidx.cardview.widget.CardView>

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rvTimeSlots"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clipToPadding="false"
                android:orientation="horizontal"
                android:overScrollMode="never"
                android:paddingStart="@dimen/dp_6"
                android:paddingEnd="10dp"
                android:scrollbars="none"
                app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

        </LinearLayout>

        <androidx.core.widget.NestedScrollView
            android:id="@+id/merchantDetailScrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/dateFilterBarrier"
            app:layout_constraintVertical_bias="0.0"
            tools:visibility="visible">

            <LinearLayout
                android:id="@+id/l1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <include
                    layout="@layout/home_services_selected_merchant_card"
                    tools:visibility="gone" />

                <ImageView
                    android:id="@+id/merchantInfoBanner"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="fitXY"
                    tools:src="@drawable/test_img1"
                    tools:visibility="visible" />

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/merchantAdditionalInfoTabLayout"
                    android:layout_marginTop="@dimen/dp_15"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <com.google.android.material.tabs.TabLayout
                        android:id="@+id/merchantInfoTab"
                        android:layout_width="0dp"
                        android:layout_height="30dp"
                        android:background="@color/white"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:tabIndicatorColor="@color/delight"
                        app:tabIndicatorHeight="@dimen/dp_2" />

                    <com.nearbuy.nearbuymobile.view.CustomViewPager
                        android:id="@+id/merchantInfoTabPager"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@+id/merchantInfoTab" />

                </androidx.constraintlayout.widget.ConstraintLayout>


            </LinearLayout>

        </androidx.core.widget.NestedScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/retryLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_60"
        android:background="@color/cb_verify_color"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@+id/product_details" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottomCTACard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:elevation="@dimen/dp_30"
        android:translationZ="@dimen/dp_10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/continueBookingCTA"
            style="title_2_m"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_groupon_migration"
            android:gravity="center"
            android:paddingTop="10.3dp"
            android:paddingBottom="10.3dp"
            android:textColor="@color/white"
            android:layout_marginTop="@dimen/dp_15"
            android:layout_marginBottom="@dimen/dp_30"
            android:layout_marginStart="@dimen/dp_15"
            android:layout_marginEnd="@dimen/dp_15"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:text="Continue Booking">

        </com.nearbuy.nearbuymobile.view.NB_TextView>

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.motion.widget.MotionLayout>

You see the the layout in the include tag? , this is the layout - 

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#f7f7fd"
    android:paddingLeft="@dimen/dp_15"
    android:paddingTop="@dimen/dp_10"
    android:paddingRight="@dimen/dp_15"
    android:paddingBottom="@dimen/dp_15">

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/serviceName"
        style="@style/body_1_m"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:textColor="@color/black_n"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="3 Seater Sofa Cleaning" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/mspText"
        style="@style/display_3_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/black_n"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="₹349" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/mrpText"
        style="@style/body_4_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1.3dp"
        android:textColor="@color/smoke"
        app:layout_constraintEnd_toEndOf="@+id/mspText"
        app:layout_constraintTop_toBottomOf="@+id/mspText"
        app:strike="true"
        tools:text="₹1,100" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/discountText"
        style="@style/body_2_m"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1.3dp"
        android:layout_marginEnd="6.7dp"
        android:textColor="#ff0000"
        app:layout_constraintBottom_toBottomOf="@+id/mrpText"
        app:layout_constraintEnd_toStartOf="@+id/mrpText"
        app:layout_constraintTop_toBottomOf="@+id/mspText"
        tools:text="55% OFF" />

    <LinearLayout
        android:id="@+id/timeAndInfoLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="20dp"
        android:orientation="vertical"
        app:layout_constraintEnd_toStartOf="@+id/discountText"
        app:layout_constraintStart_toStartOf="@+id/serviceName"
        app:layout_constraintTop_toBottomOf="@+id/serviceName" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/freeCancellationText"
        style="@style/body_3_m"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="3dp"
        android:textColor="#1bbb33"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/timeAndInfoLayout"
        tools:text="Free Cancellation" />

    <ImageView
        android:id="@+id/freeCancellationIcon"
        android:layout_width="@dimen/dp_16"
        android:layout_height="@dimen/dp_16"
        android:layout_marginStart="10dp"
        app:layout_constraintBottom_toBottomOf="@+id/freeCancellationText"
        app:layout_constraintStart_toEndOf="@+id/freeCancellationText"
        app:layout_constraintTop_toTopOf="@+id/freeCancellationText"
        app:srcCompat="@drawable/info_green" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/dividerBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="timeAndInfoLayout,discountText,freeCancellationText,serviceName,freeCancellationIcon,mspText,mrpText"
        tools:layout_editor_absoluteX="15dp"
        tools:layout_editor_absoluteY="658dp" />

    <View
        android:id="@+id/divider9"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginTop="10dp"
        android:background="#d7dff0"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/dividerBarrier" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/merchantNameTitle"
        style="@style/small_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/black_n"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/divider9"
        tools:text="Service provided by" />

    <RelativeLayout
        android:id="@+id/merchantRatingLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:padding="@dimen/dp_4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/merchantNameTitle">

        <aapt:attr name="android:background">

            <shape android:shape="rectangle">

                <corners android:radius="3dp" />

                <solid android:color="#1bbb33" />
            </shape>

        </aapt:attr>

        <com.nearbuy.nearbuymobile.view.NB_TextView
            android:id="@+id/merchantRatingText"
            style="@style/body_3_m"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/white"
            tools:text="4.5" />

        <ImageView
            android:id="@+id/merchantRatingIcon"
            android:layout_width="@dimen/dp_10"
            android:layout_height="@dimen/dp_10"
            android:layout_centerVertical="true"
            android:layout_marginLeft="2.7dp"
            android:layout_toRightOf="@id/merchantRatingText"
            app:srcCompat="@drawable/hs_merchant_rating_star" />

    </RelativeLayout>

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/merchantName"
        style="@style/body_2_r"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="20dp"
        android:textColor="@color/black_n"
        app:layout_constraintBottom_toBottomOf="@+id/merchantRatingLayout"
        app:layout_constraintEnd_toStartOf="@+id/changeMerchantCTA"
        app:layout_constraintStart_toEndOf="@+id/merchantRatingLayout"
        app:layout_constraintTop_toTopOf="@+id/merchantRatingLayout"
        tools:text="Balaji Deep Cleaning" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/otherProviderTitle"
        style="@style/small_r"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textColor="@color/black_n"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/divider9"
        tools:text="Other Providers available" />

    <com.nearbuy.nearbuymobile.view.NB_TextView
        android:id="@+id/changeMerchantCTA"
        style="@style/body_2_b"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="9dp"
        android:gravity="end"
        android:textColor="@color/delight"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/otherProviderTitle"
        tools:text="Change (3 Available)" />

now whenever I stop between the states and try to manipulate the views, like there is a button , on tap of which a bottom sheet comes up with and I select another merchant and , now when manipulate the layout while it is in progress it doesn't show anything.. just vanishes and once I settle into any of the state, everything works. like this -

bug

the full video is here - full video of Bug

I don't understand the problem, Can anyone tell me why this is happening? and how to solve it.

android-motionlayout android-layout android
2 Answers

You can fix it with <Transition .... motion:layoutDuringTransition="honorRequest" >

user_24591310

MotionLayout works by taking a snapshot of the position of the views (calculated by the ConstraintSet) at the starting and ending points. Then interpolating all parameters that change. Once stopped Tat the starting or ending state it operates similar to a ConstraintLayout. If a view is being moved a series of .layout(t,b,l,r) (followed by draw) will be called if the view is being resized then a series of measure(), layout(), then draw() will be called

The starting and ending layouts are defined by the ConstraintSets. In theory what you are trying to do is possible but difficult and would require some other calls.

If want create a simplified version and file a bug including the 3 main files (MainAcivity, layout & motionScene)

user_25584420
Related