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.