viewpager - tabs android material design example

¿Cómo colocar RecyclerView debajo de la barra de herramientas y encima de TabLayout y ViewPager que también manejan las respuestas a los desplazamientos de una manera personalizada?

Question

Quiero crear un diseño como la imagen de abajo:

Un CoordinatorLayout que contiene:

1. CollapsingToolbarLayout (contiene ImageView y Toolbar)
2. RecyclerView
3. TabLayout
4. ViewPager (que cada fragmento contiene un RecyclerView)

Quiero responder a los eventos de desplazamiento de esta manera:

1. CollapsingToolbarLayout expandir y contraer al desplazarse
2. La barra de herramientas se pega a la parte superior hasta que TabLayout llega a la parte superior
3. Después de esa barra de herramientas, desplácese hacia arriba y TabLayout se queda en la parte superior.

Estoy teniendo problemas con RecyclerView entre CollapsingToolbarLayout y TabLayout. Puedo implementar este diseño sin ese RecyclerView (coloco CollapsingToolbarLayout y TabLayout dentro de AppBarLayout y ViewPager afuera, dentro de CoordinatorLayout).

Mi pregunta:

1. ¿Dónde debo poner ese RecyclerView?
2. ¿Qué y dónde layout_scrollFlags y layout_behavior debo establecer para cada diseño?

Parece que AppBarLayout tiene una altura limitada. Cuando coloco RecyclerView dentro de AppBarLayout, solo una parte de RecyclerView es visible y también desaparece TabLayout.

Leí muchos tutoriales como este y muchas preguntas como este y este , pero ninguno de ellos me ayuda.

Answer 1

Comience con AppBarLayout en el que agrega CollapsingToolbarLayout con scrollFlags = "scroll | exitUntilCollapsed" ,

añada LinearLayout con orientación vertical a CollapsingToolbarLayout y añada

• FrameLayout con ImageView + Toolbar

• RecyclerView

• TabLayout

Answer 2

Usa esto como un diseño principal

actividad_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout 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/swipe_refresh_layout_profile"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:ignore="RtlHardcoded">
        <android.support.design.widget.CoordinatorLayout
            android:id="@+id/co_profile_activity_root_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:visibility="visible">
            <android.support.design.widget.AppBarLayout
                android:id="@+id/appbar_profile"
                android:layout_width="match_parent"
                android:layout_height="@dimen/profile_img_placeholder_height"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
                <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/collapse_toolbar_profile"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
                    <RelativeLayout
                        android:id="@+id/rel_top"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop">
                        <ImageView
                            android:id="@+id/img_bg_placeholder_profile"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:scaleType="centerCrop"
                            android:tint="#11000000"
                            app:layout_collapseMode="parallax"
                            app:layout_collapseParallaxMultiplier="0.9" />

                        <LinearLayout
                            android:id="@+id/lin_top_inner"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="#BF473e6b"
                            android:orientation="vertical"
                            android:scaleType="centerCrop">
                        </LinearLayout>

                    </RelativeLayout>

                    <FrameLayout
                        android:id="@+id/frame_detail_profile"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center|center_horizontal"
                        android:orientation="vertical"
                        app:layout_collapseMode="parallax"
                        app:layout_collapseParallaxMultiplier="0.3">
                        <android.support.v7.widget.RecyclerView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content">
                        </android.support.v7.widget.RecyclerView>
                    </FrameLayout>

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar_profile"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/profile_toolbar_height"
                        android:gravity="top|center"
                        app:layout_anchor="@id/frame_detail_profile"
                        app:layout_collapseMode="pin"
                        app:theme="@style/ThemeOverlay.AppCompat.Dark"
                        app:title="">

                        <LinearLayout
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:orientation="horizontal">

                            <TextView
                                android:id="@+id/tv_toolbar_title"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginLeft="@dimen/profile_toolbar_title_left_margin"
                                android:gravity="center_vertical|center"
                                android:ellipsize="end"
                                android:singleLine="true"
                                android:layout_gravity="center"
                                android:textColor="@android:color/white"
                                android:textSize="20sp" />
                        </LinearLayout>
                    </android.support.v7.widget.Toolbar>

                    <android.support.design.widget.TabLayout
                        android:id="@+id/tab_layout_profile"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:layout_gravity="bottom"
                        android:layout_marginTop="@dimen/profile_tab_layout_top_margin"
                        android:background="@color/white"
                        app:tabIndicatorColor="@color/colorPrimary"
                        app:tabSelectedTextColor="@color/colorPrimary"
                        app:tabTextColor="@color/charcoal_grey" />
                </android.support.design.widget.CollapsingToolbarLayout>
            </android.support.design.widget.AppBarLayout>

            <android.support.v4.view.ViewPager
                android:id="@+id/view_pager_profile"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.design.widget.CoordinatorLayout>
    </RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>

y para el diseño de cuadrícula de pestañas use clases de adaptador.

Answer 3

Dos cosas por hacer:

1. Cuando se hace clic en el botón de búsqueda, establezca la visibilidad de la vista del reciclador en VISIBLE
2. Cuando se presiona el botón Atrás, establezca la visibilidad de la vista del reciclador en GONE

Las siguientes son las implementaciones:

1. Ajustando la visibilidad de la vista del reciclador a VISIBLE:

    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.searchView) {
            rView.setVisibility(VISIBLE);
        }
        return true;
    }

2. Ajustando la visibilidad del adaptador de reciclaje a GONE

    MenuItem searchMenuItem = menu.findItem(R.id.searchView);
    MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            recyclerView.setVisibility(GONE);
            return true;
        }
    });

NOTA: No olvide mantener la visibilidad como GONE inicialmente cuando se inicia la actividad.