0

I wanted to know how to make this scroll just like facebook, where you scroll the recyclerview and the view above scrolls off the screen, I already tried using nestedscroll and putting the recyclerview as wrap_content, however so it loads all the items before opening and It gets extremely heavy, in reality the app can't even open, crashes everything ... I'll post the code of my layout too, REMEMBERING THAT THIS LAYOUT IS WITHIN A FRAGMENT, it's like facebook right there, using a viewpager and inside it There are the fragments linked to the tablayout and a custom toolbar, then this recyclerview with the views are inside a layout that goes in the fragment[enter link description here][1]

Gif for example >> [1]: https://giphy.com/gifs/1g6zXNE3EE5MLuE7Cy

my xml code with recyclerview (this is the fragment layout) >>

    <?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:fillViewport="true">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        tools:context=".fragments.Home">

        <LinearLayout
            android:id="@+id/linearLayout4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:orientation="vertical"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.appcompat.widget.LinearLayoutCompat
                android:id="@+id/linearLayoutCompat"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp">

                <de.hdodenhof.circleimageview.CircleImageView
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:src="@mipmap/ic_launcher" />

                <Button
                    android:id="@+id/button"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginTop="4dp"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="4dp"
                    android:background="@drawable/retangulo_pontas_arredondadas"
                    android:text="No que você esta pensando?"
                    android:textAlignment="viewStart"
                    android:textAppearance="@style/botaobraco" />

            </androidx.appcompat.widget.LinearLayoutCompat>

            <LinearLayout
                android:id="@+id/linearLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/button4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="1dp"
                    android:layout_weight="1"
                    android:text="Foto"
                    android:textAlignment="viewStart"
                    app:icon="@drawable/photo_icon" />

                <Button
                    android:id="@+id/button5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="1dp"
                    android:layout_weight="1"
                    android:text="Video"
                    android:textAlignment="viewStart"
                    app:icon="@drawable/video_icon" />
            </LinearLayout>
        </LinearLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewPubs"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginBottom="1dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/linearLayout4" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

my xml with viewpager and toolbar (where the receiver the fragments)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

    <include layout="@layout/toolbar"
        app:layout_scrollFlags="scroll|enterAlways"/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="4dp"
        android:theme="@style/toolbarstyle"
        app:tabMode="fixed" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

The xml that displays inside the recyclerview

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

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

            <ImageView
                android:id="@+id/image_pub"
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:layout_marginBottom="8dp"
                android:scaleType="centerCrop"
                app:layout_constraintBottom_toTopOf="@+id/linearLayout2"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0"
                app:srcCompat="@drawable/ds" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/linearLayout2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:background="@drawable/borda_abaixo"
                android:orientation="vertical"
                app:layout_constraintBottom_toTopOf="@+id/linearLayout3"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/image_pub">


                <de.hdodenhof.circleimageview.CircleImageView
                    android:id="@+id/image_author_pub"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:src="@mipmap/ic_launcher"
                    app:layout_constraintBottom_toTopOf="@+id/desc_pub"
                    app:layout_constraintEnd_toStartOf="@+id/name_author_pub"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintHorizontal_chainStyle="packed"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_chainStyle="packed" />

                <TextView
                    android:id="@+id/name_author_pub"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:text="@string/app_name"
                    app:layout_constraintBottom_toBottomOf="@+id/image_author_pub"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/image_author_pub"
                    app:layout_constraintTop_toTopOf="@+id/image_author_pub" />


                <TextView
                    android:id="@+id/desc_pub"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:layout_marginEnd="8dp"
                    android:maxLines="10"
                    android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat tristique nulla scelerisque faucibus. Cras sollicitudin consequat risus id cursus. Nunc sit amet condimentum dui. Nam dictum lacinia nibh, eget vehicula sapien. Vestibulum eget tortor at nisl faucibus cursus eget quis arcu. Maecenas egestas, nulla id accumsan eleifend, mauris leo ornare elit, quis porta turpis metus eget tortor. Donec ultrices neque nec aliquet commodo. In dolor lorem, lobortis vel tincidunt ut, bibendum vel ligula. Nulla facilisi."
                    android:textSize="18sp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.0"
                    app:layout_constraintStart_toStartOf="@+id/image_author_pub"
                    app:layout_constraintTop_toBottomOf="@+id/image_author_pub" />

                <TextView
                    android:id="@+id/more_desc_pub"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:layout_marginBottom="8dp"
                    android:drawableEnd="@android:drawable/arrow_down_float"
                    android:text="ver mais"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="1.0"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/desc_pub" />
            </androidx.constraintlayout.widget.ConstraintLayout>

            <LinearLayout
                android:id="@+id/linearLayout3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/linearLayout2">

                <Button
                    android:id="@+id/curtir_pub"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="1dp"
                    android:layout_weight="1"
                    android:text="Curtir"
                    android:textColor="@color/black" />

                <Button
                    android:id="@+id/comentar_pub"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="1dp"
                    android:layout_weight="1"
                    android:text="Comentar"
                    android:textColor="@color/black" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/linearLayout3">

                <TextView
                    android:id="@+id/curtidas_pub"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_weight="1"
                    android:text="800 Curtidas" />

                <TextView
                    android:id="@+id/coments_pub"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="8dp"
                    android:layout_weight="1"
                    android:text="300 Comentarios"
                    android:textAlignment="viewEnd" />
            </LinearLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>
Felippe Pinheiro
  • 35
  • 3

2 Answers2

0

Look into coordinator layout, that is what you will need for scroll and transitions like the one in the GIF you shared.

Mohammed Abdul Bari
  • 408
  • 4
  • 8
  • I already tried, already researched, even downloaded apps they use but I couldn't do it in a decent way, if you can help me by giving me a tip or posting code snippets and explaining, I would accept – Felippe Pinheiro Feb 14 '21 at 22:28
0

I managed to solve it, to do this I had to use a MultiView in RecyclerView, whoever I want will leave the link explaining how it is done.

Link

Felippe Pinheiro
  • 35
  • 3