Motionlayout with bottom sheet dosn't work as expected

Viewed 454

I'm trying to achieve this animation from this tutorial but the difference that this tutorial is doing with recycler view but I want to achieve it with bottom sheet

scrolling image

here is my layout of what I'm doing

<?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"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layoutDescription="@xml/activity_main_scene"
 tools:context=".MainActivity">

<ImageView
    android:id="@+id/imageViewAvatar"
    android:layout_width="140dp"
    android:layout_height="140dp"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:src="@drawable/ic_baseline_add_reaction_24"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    tools:layout_editor_absoluteX="0dp">

    <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bottom_view_bg"
        android:orientation="vertical"
        app:behavior_hideable="false"
        app:behavior_peekHeight="90dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

        <View
            android:layout_width="80dp"
            android:layout_height="2dp"
            android:layout_gravity="center"
            android:layout_marginTop="16dp"
            android:background="@color/white" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rvHorzinatal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:listitem="@layout/item_rv" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="16dp"
            android:text="Swipe Up"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:listitem="@layout/item_rv" />

    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>

and here is my scene layout

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

<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration="1000">

    <OnSwipe
        app:dragDirection="dragUp"
        app:touchAnchorId="@+id/bottomSheet"
        app:touchAnchorSide="top" />
    <KeyFrameSet />
</Transition>

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

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@id/imageViewAvatar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </Constraint>
</ConstraintSet>

but whenever I put Onswipe on the coordinate layout or the constraint inside it it's dosn't work how I can fix this?

1 Answers

CoordinatorLayout is a system for animating motion of views in relation to with NestedScrollview(RecyclerView) MotionLayout can be used for the same thing.

you have two choices:

  • Use only one - MotionLayout is a little more flexible, CoordnatorLayout provides standard interactions.
  • Make MotionLayout the child to animate only the top panel. CoordnatorLayout does the overall animation.

There are some examples of both here

Related