Barra de herramientas de Android y animación de imagen de usuario como Twitter

android-animation android-toolbar

Question

Estoy tratando de lograr la barra de herramientas y la animación de la imagen del usuario como la que se usa en el perfil de usuario de Twitter.

Intenté muchas cosas, pero no puedo lograr fijar la barra de herramientas contraída en la parte superior de la pantalla rápidamente con el fondo que tenía cuando se expandió y hacer que la imagen del usuario esté primero sobre la barra de herramientas y luego hacer una escala hacia abajo y moverse hacia abajo. la barra de herramientas mientras se desplaza.

¿Cómo hace Twitter el efecto suave en la imagen de perfil de usuario? ¿Cómo tienen primero esta imagen delante de la barra de herramientas y luego, mientras el desplazamiento se desplaza hacia atrás y logra ese efecto suave que va debajo de la barra de herramientas?

Probé todos los siguientes escenarios:

• Barra de herramientas con efecto de paralaje con CollapseParallaxMultiplier.
• Ajuste de la barra de herramientas de altura 100dp y minHeight? Attr / actionBarSize.
• 2 barras de herramientas, una con el fondo de la imagen y la otra con un color de fondo transparente.
• Desprende UserImage y luego mueve la posición Y (no puede lograr un efecto que envíe la Imagen de Usuario debajo de la barra de herramientas cuando se desplaza) sin problemas.

Ninguno de los escenarios anteriores funcionó bien para mí.

Jerarquía XML:

<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
       <android.support.design.widget.CollapsingToolbarLayout>
             <LinearLayout>
                   <!--Some TextViews and ImageViews-->
             </LinearLayout>
             <ImageView src="My User profile Img"/> <!--Image first above toolbar and when toolbar is collapsing scale down and then go below toolbar-->
             <ImageView src="My background"  app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> 
             <android.support.v7.widget.Toolbar app:layout_collapseMode="pin"/>
       </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

  <!--Second Part, where the ViewPager should be pinned below the Toolbar-->
  <NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <LinearLayout> 
      <android.support.design.widget.TabLayout/>
      <android.support.v4.view.ViewPager/>
     </LinearLayout>
     </NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Adjunto puede ver el efecto de Twitter en la actividad del perfil de usuario.

Answer 1

Creo que estás intentando más difícil de lo que debería ser.

CollapsingToolbarLayout tiene este elemento contentScrim que normalmente se usa con un color, pero en realidad puede ser cualquier Drawable.

Desde el código fuente puede ver que está dibujado directamente detrás de la Toolbar

// Esto es un poco raro. Nuestra malla debe estar detrás de la barra de herramientas (si está presente),
// pero delante de cualquier otro niño que esté detrás de él. Para ello interceptamos el
// drawChild () llama, y ​​dibuja nuestro scrim primero al dibujar la barra de herramientas

https://android.googlesource.com/platform/frameworks/support/+/refs/heads/master/design/src/android/support/design/widget/CollapsingToolbarLayout.java#271

Así que supongo que empiezas haciendo el diseño XML "estándar":
`Coordinator -> AppBar -> CollapsingToolbar -> Toolbar

y luego llame a setContentScrim con algunos BitmapDrawable solo para ver qué sucede.

collapsingToolbar.setContentScrim(
                   context.getResources()
                     .getDrawable(R.drawable.something);

Después de eso, necesitará algo de geometría para que se vea exactamente en su lugar, pero no es el alcance de mi respuesta. Parece que Twitter también hace que la imagen sea un poco borrosa, pero luego es una pregunta diferente (use RenderScript).

Además, es posible que el scrim siga moviéndose mientras se desplaza por la vista, entonces es posible que deba crear un dibujo personalizable que le permita desplazar la posición del dibujo para que se vea correcta. Pero eso es todo "maybes" y "peros". La idea principal está ahí.

Answer 2

Puedes probar debajo del archivo xml:

<android.support.design.widget.CoordinatorLayout >
     <android.support.design.widget.AppBarLayout>
         <android.support.design.widget.CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">
             <ImageView
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin" />
         </android.support.design.widget.CollapsingToolbarLayout>

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

      <NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <LinearLayout> 
      <android.support.design.widget.TabLayout/>
      <android.support.v4.view.ViewPager/>
     </LinearLayout>
     </NestedScrollView>

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

También use Pallete para agregar color de paralaje a CollapsingToolbar .

Para más detalles puedes consultar este link .