Coordinator layout - collapsing content interaction with recycler view

Related searches

schema

As shown in the picture, I want my 2 views ( recycler view and collapsing content ) to be responding only to the middle grip bar ( it could be 50dp height constraint layout - for example ) Moving this bar should collapse the upper part - and make recyclerview change its height. The bar shouldn't be able to move lower than the upper part content. Recycler view should be able to scroll independently all the time.

How to make only restricted area respond to touch events? How to make recyclerview height depend on grip position ?

Now in my case, the collapsing part is getting hidden just after i start scrolling recyclerview.

If there is not enough information, I'll add whatever required.

Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/activityToDo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.ToDoActivity">

    <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbar"
                app:layout_scrollFlags="scroll|enterAlways"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">


            <androidx.constraintlayout.widget.ConstraintLayout
                    app:layout_collapseMode="parallax"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                <EditText
                        android:hint="Note title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/noteTitle"
                        app:layout_constraintStart_toStartOf="parent"
                        android:layout_marginStart="10dp"
                        app:layout_constraintEnd_toStartOf="@+id/guideline"
                        android:layout_marginEnd="10dp"
                        android:layout_marginTop="15dp"
                        android:textSize="15sp"
                        android:inputType="text" app:layout_constraintTop_toTopOf="parent"/>
                <EditText
                        android:hint="Note priority"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/notePriority"
                        app:layout_constraintEnd_toEndOf="parent"
                        android:layout_marginEnd="10dp"
                        app:layout_constraintStart_toStartOf="@+id/guideline"
                        android:layout_marginStart="10dp"
                        android:layout_marginTop="15dp"
                        android:textSize="15sp"
                        android:inputType="number" app:layout_constraintTop_toTopOf="parent"/>

            <androidx.constraintlayout.widget.Guideline
                    android:orientation="vertical"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintGuide_begin="197dp"
                    android:id="@+id/guideline"/>

                <EditText
                        android:hint="Note description"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:id="@+id/noteDescription"
                        app:layout_constraintEnd_toEndOf="parent"
                        android:layout_marginEnd="10dp"
                        app:layout_constraintStart_toStartOf="parent"
                        android:layout_marginStart="10dp"
                        app:layout_constraintTop_toBottomOf="@+id/notePriority"
                        android:layout_marginTop="20dp"
                        android:textSize="15sp"/>
                <Button
                        android:text="Save"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/saveButton"
                        app:layout_constraintStart_toStartOf="parent"
                        android:layout_marginStart="10dp"
                        app:layout_constraintEnd_toStartOf="@+id/guideline" android:layout_marginEnd="10dp"
                        android:layout_marginBottom="20dp" app:layout_constraintBottom_toBottomOf="parent"
                        android:layout_marginTop="10dp" app:layout_constraintTop_toBottomOf="@+id/noteDescription"/>
                <Button
                        android:text="Clear"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/clearButton"
                        app:layout_constraintEnd_toEndOf="parent"
                        android:layout_marginEnd="10dp" app:layout_constraintStart_toStartOf="@+id/guideline"
                        android:layout_marginStart="10dp" android:layout_marginBottom="20dp"
                        app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="10dp"
                        app:layout_constraintTop_toBottomOf="@+id/noteDescription"/>

            </androidx.constraintlayout.widget.ConstraintLayout>



        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <TextView
                android:text="All notes"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

    </com.google.android.material.appbar.AppBarLayout>


    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/allNotesRecyclerView"
            android:layout_marginStart="8dp"
            app:layout_constraintTop_toTopOf="@id/collapsingToolbar"
            android:layout_marginTop="16dp"
            android:textSize="15sp"/>

    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

GitHub Repo

in my case like this : add app:layout_behavior="@string/appbar_scrolling_view_behavior" on your recyclerview and look my CollapsingToolbarLayout and my Toolbar

<androidx.coordinatorlayout.widget.CoordinatorLayout 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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".myactivity.DetailWisataActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar_detail"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?colorPrimary"
            app:expandedTitleGravity="center_horizontal|bottom"
            app:layout_scrollFlags="scroll|snap|exitUntilCollapsed">

            <ImageView
                android:id="@+id/img_bg_detail"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop"
                android:src="@drawable/bg_beach"
                app:layout_collapseMode="pin"
                tools:targetApi="m" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/colorTransparantBlackLow" />

            <ProgressBar
                android:id="@+id/progress_detail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar_detail"
                android:layout_width="match_parent"
                android:layout_height="@dimen/actionBarSizeLow"
                android:theme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                app:title="@string/info_wisata" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

   ............Your recyclerview here.......

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
</androidx.coordinatorlayout.widget.CoordinatorLayout>

and remove your Linearlayout.

Quick return with CoordinatorLayout | by Bryan Herbst, I was in the process of migrating a ListView to a RecyclerView, and one piece used CoordinatorLayout's Behavior mechanism to collapse a Toolbar as a Since AppBarLayout allows your toolbar to scroll away with the content, them so that you can begin creating these delightful interactions yourself. Next, we need to define an association between the AppBarLayout and the View that will be scrolled. Add an app:layout_behavior to a RecyclerView or any other View capable of nested scrolling such as NestedScrollView.

Fisrt remove your LinearLayout from parent of recyclerview and try this:

 <androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- HEADER -->
            <RelativeLayout
                ...
                app:layout_collapseMode="parallax">
                .....
            </RelativeLayout>

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

       <!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
        <TextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="bottom"
             android:text="choose item" />
       -->
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

  </androidx.coordinatorlayout.widget.CoordinatorLayout>

Same question answer: Link

Handling Scrolls with CoordinatorLayout, Controlling which views should expand or collapse and at what rate, When a CoordinatorLayout notices this attribute declared in the RecyclerView, it will of the Toolbar will be reached before the rest of the content begins to scroll and exit � The type of the ViewHolder must match the type declared in the Adapter class signature. Typically, it would set the view by inflating an XML layout file. Because the view holder is not yet assigned to any particular data, the method does not actually set the view's contents. The layout manager then binds the view holder to its data.

With the newest version of Android Studio (4.0 Canary 9), you can use the new MotionLayout layout type to transition between different ConstraintLayouts. The simplest solution (below) wouldn't necessarily let you change the RecyclerView height to whatever you wanted, but you could smoothly transition between two different layouts when the user swipes up or down.

In short, you would do the following:

  1. In your build.gradle (Module: app) file, add the following line:

    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta4'

  2. Create a new ConstraintLayout layout file that determines how all of your views should be arranged at the beginning

  3. Convert that ConstraintLayout to a MotionLayout using the right-click menu in the layout editor
  4. In the MotionLayout editor, add constraints to each view in the "start" and "end" layouts

  5. In the new MotionScene XML file that was added to the XML folder in your res folder, edit the tag to look like this:

<Transition
      motion:constraintSetEnd="@+id/end"
      motion:constraintSetStart="@id/start"
       >
       <OnSwipe               
                app:touchAnchorSide="top"
                motion:touchAnchorId="@id/YOUR_GRIP_VIEW"
                motion:dragDirection="dragUp" />
           <KeyFrameSet>
           </KeyFrameSet>
 </Transition>

* In the MotionLayout Codelab, it says to use app:touchAnchorID instead of motion:touchAnchorId but that didn't work for me *

Now, when you swipe your grip view up or down, the MotionLayout can transition between states.

Working with the Android AppBar and Collapsing Toolbar Layouts , Coordinating the RecyclerView and Toolbar chapter, if the main content area of the activity user interface layout contains scrollable content, is the CoordinatorLayout which, as the name suggests, coordinates the interactions between the� 1. Create a new layout -> activity_toobar_and_fab.xml.This layout will contain AppBarLayout, Toolbar, FloatingActionButton, and layout content_toobar_and_fab arrange them as shown below

MotionLayout - Collapsing Toolbar - Part 1, That said, which CoordinatorLayout provides some really useful behaviours, trying to tweak them <androidx.coordinatorlayout.widget. android:id="@+id/ recyclerview" start and end states are and how the transition between the two is controlled by user interaction: Content Protection by DMCA.com. On the other hand, CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. CollapsingToolbarLayout contains the following features: Collapsing title, Content scrim, Status bar scrim, Parallax scrolling children and Pinned position children.

CoordinatorLayout, First, the collapsing layout specify how it will behave when the content is scrolled using the flags scroll|exitUntilCollapsed, so it will scroll until it’s completely collapsed. Then we specify the contentScrim, which is the color the toolbar will take when it reaches it’s collapsed state.

The child is the view that enhances behavior, dependency who will serve as a trigger to interact with the child element.In this example, the child is the ImageView and the dependency is the Toolbar, in that way, if the Toolbar moves, the ImageView will move too.

Comments
  • Its exact same result as i have. Doesnt fix my problem