fragments - tabs android studio material design

Android: pin TabLayout a la parte superior de Scrollview

Question

Estaba mirando la aplicación de Twitter en mi teléfono.

Puede ver que cuando un usuario se desplaza hacia arriba, tabLayout simplemente se fija muy bien en la parte inferior de la barra de herramientas y no se mueve en absoluto.

Pensé que tal vez lo hicieron simplemente poniendo toda la parte superior de la aplicación (la imagen de perfil, el fondo de pantalla de perfil de la bicicleta en el césped, el texto), en un CollapsingToolBarLayout y AppBarLayout, pero en realidad, solo el fondo de pantalla con el bicycle on the grass es parte de CollapsingToolBarLayout y AppBarLayout ya que es la única parte que se colapsa. La parte de texto simplemente se desplaza hacia arriba y la pestaña Desactivar simplemente se coloca en la parte superior debajo de la barra de herramientas.

Leí los créditos en la aplicación de Twitter y parece que usaron SlidingTabLayout para lograr su efecto. SlidingTabLayout es similar a tabLayout, y este último es compatible con la biblioteca de soporte.

Parece un patrón bastante común que también utilizan las aplicaciones principales hoy en día:

La aplicación Google+ lo usa en su vista de perfil en la aplicación:

Facebook Moments lo usa en su aplicación:

¿Alguna idea de cómo se las arreglaron para hacer esto?

Estoy buscando hacer algo similar a todas estas aplicaciones.

Mis requisitos son:

1. Tener un collapsingToolBarLayout que colapsa cuando te desplazas hacia arriba
2. Tenga una vista de texto debajo de collapsingToolBarLayout que se desplazará y "ocultará" debajo de la barra de herramientas cuando se colapse por completo.
3. Haga una pestaña debajo de la vista de texto que se "pegará" a la pestaña cuando haya desplazado la vista de texto debajo de collapsingToolBarLayout.
4. Tenga una vista de reciclador debajo de tabLayout para que cuando haga clic en cada pestaña en la pestaña Diseño, recyclerview cambie entre listas de "Tweets", "Fotos", "Favoritos", etc.

Miré otras dos preguntas que se publicaron en SO:

¿Puede el indicador de selección de pestañas de TabLayout estar anclado en la parte superior de la pantalla mientras se desplaza? . La respuesta aquí parece estar cambiando el comportamiento de tabLayout pero dudo que cambiar el comportamiento realmente genere lo que hace la aplicación de Twitter. Como mencioné, el tabLayout parece estar fuera de CollapsingToolBarLayout y AppBarLayout, y el comportamiento solo debería ser efectivo si está ubicado dentro de CollapsingToolBarLayout y AppBarLayout.

¿Cómo anclar TabLaout en la parte superior de ScrollView? . Esta pregunta me pregunta algo similar a lo que pregunté, pero no da suficientes detalles y no tiene respuestas.

Answer 1

Por defecto, puede no haber una biblioteca que lo admita. Pero puedes lograrlo con un poco de programación. Escuche los eventos scrollview a través de ViewTreeObserver, y manipule otros. Si aún no está seguro, hagamos una biblioteca para ello. Haces una aplicación y publicas en github, colaboraré para que funcione.

Answer 2

La solución más cercana para lograr lo mencionado anteriormente es MaterialViewPager . Es un buen punto de partida, puede bifurcarlo y modificarlo según sus preferencias, y puede personalizarlo de muchas maneras.

Answer 3

para esas primeras 3 preguntas mira aquí

En cuanto a la cuarta, debe crear fragmentos para cada pestaña y cargarlos cuando se seleccionen para un enfoque simple, o puede crear un fragmento y comunicarse con él para mostrar contenido específico cuando se selecciona una pestaña.

EDIT no pudo encontrar un enlace actualizado así que aquí están las respuestas

1. Use CoordinaterLayout.
2. Cualquier cosa que quiera colapsar (u ocultar) con la barra de herramientas entra en collapsingToolBarLayout.
3. Cualquier cosa que permanezca después de que la barra de herramientas colapsó va dentro de AppBarLayout después de CollapsingToolbarLayout.

ex -

<android.support.design.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"
    android:background="@android:color/background_light"
    android:fitsSystemWindows="true"
    >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/main.appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            >

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/material_flat"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/main.toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                />
         <!-- ADD ANY THING THAT GETS SCROLLED ALL THE WAY UP WITH TOOLBAR -->
        </android.support.design.widget.CollapsingToolbarLayout>

     <!--- ADD TAB_LAYOUT HERE---> 

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/lorem"
            android:padding="@dimen/activity_horizontal_margin"
            />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:src="@drawable/ic_comment_24dp"
        app:layout_anchor="@id/main.appbar"
        app:layout_anchorGravity="bottom|right|end"
        />
</android.support.design.widget.CoordinatorLayout>