android - scrollflags - coordinatorlayout

Fondo del título de Android CollapsingToolbarLayout

Question

Estoy trabajando con CollapsingToolbarLayout desde la nueva biblioteca de soporte de diseño de Android.

He establecido su título y está funcionando bien, el único problema que todavía tengo es que cuando se desplaza, el texto se pierde, según la imagen del fondo.

Lo que me gustaría hacer es establecer un fondo para el título CollapsingToolbarLayout, pero no he encontrado la manera de hacerlo.

¿Hay alguna forma de lograr esto?

¡Gracias!

Diseño:

<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
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:fitsSystemWindows="true">

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

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

        <ImageView
            android:id="@+id/ivBigImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="24dp">

        <android.support.v7.widget.CardView
            android:id="@+id/cvDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp">

            <LinearLayout
                style="@style/Image.Info.CardContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/description"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title"/>

                <TextView
                    android:id="@+id/tvDescription"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text=""/>

            </LinearLayout>

        </android.support.v7.widget.CardView>


    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

Configuración del título CollapsingToolbarLayout en la actividad:

CollapsingToolbarLayout collapsingToolbar =
            (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Some title here");

Editar:

Aquí puede ver una secuencia de imágenes cuando contrajo la barra de herramientas. Puedes ver cómo el texto del título no es legible. El problema es que no tengo control de las imágenes que muestro, por lo que para algunas imágenes se ve bien, pero para otras, como en este ejemplo, no se ve bien y no se puede leer. Lo que tenía en mente era tal vez agregar algún tipo de fondo al texto, por lo que siempre hay el mismo color en la parte posterior del texto y siempre es legible.

Answer 1

Editar:

Si desea cambiar el color de la barra de herramientas una vez que se haya "reducido", debe establecer el atributo contentScrim del diseño de la barra de herramientas contraída en ese color:

<android.support.design.widget.CollapsingToolbarLayout
        app:contentScrim="@color/[color you want]"
        ...>

Señalar el valor de este atributo al color en el que quiere que se convierta la barra de herramientas resolverá su problema, tal como lo entiendo.

Espero que responda a tu pregunta!

Answer 2

Eso es mucho trabajo que se logra aquí al escribir esa cantidad de código. Lo logré por 2 vías.

1 Una solución sencilla mediante el uso de una vista con color TransparentBlack
CÓDIGO >>

Explicación del código:
1 CollapsingToolbarLayout tiene un estilo con solo un tamaño de texto.
2 La parte inferior del margen predeterminado CollapsingToolbarLayout se reemplaza a 16dp.
3. Nuestro encabezado con paralaje collapseMode es un RelativeLayout con un ImaveView y una vista.
4. Esta vista simple con un BG en la parte inferior del encabezado superior Diseño relativo con color de contraste (aquí # 77000000), actúa como el BG para el título contraído de CollapsingToolbarLayout en color blanco.

  <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/redeem_detail_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_window_background"
        android:fitsSystemWindows="true"
        app:expandedTitleMarginBottom="16dp"
        app:expandedTitleTextAppearance="@style/CollapsingTitleStyle"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!--header view-->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/redeem_detail_top_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/splash" />

            <!--A view that draws a semi tranparent black overlay so that title is visible once expanded -->
            <View
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_alignParentBottom="true"
                android:background="@color/black_transparent" />

        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/redeem_detail_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:title="Redeem" />

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

Imágenes para el estilo 1:

a) Cuando el título CollapsingToolbarLayout se expande completamente:

b) Cuando CollapsingToolbarLayout Title se está reduciendo al desplazarse hacia arriba:

2 respuesta above

El método ya es mencionado por Joao Ferreira.

Esto es lo que parece con shadowRadius = 16: Note la Sombra

PS por favor actualice o pregunte más si hay confusiones :)

Answer 3

Use una malla de protección de texto (desplácese hacia abajo un poco). Mi ejemplo asume que el texto del título es blanco, por lo que algunos ajustes pueden ser necesarios para optimizar su caso.

Dentro de CollapsingToolbarLayout , agregue lo siguiente después de ivBigImage:

<View
    android:layout_width="match_parent"
    android:layout_height="@dimen/sheet_text_scrim_height_top"
    android:background="@drawable/scrim_top"
    app:layout_collapseMode="pin"/>

<View
    android:layout_width="match_parent"
    android:layout_height="@dimen/sheet_text_scrim_height_bottom"
    android:layout_gravity="bottom"
    android:layout_alignBottom="@+id/image"
    android:background="@drawable/scrim_bottom"/>

En su carpeta de Drawable, agregue:

scrim_top.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="270"
    android:startColor="@color/translucent_scrim_top"
    android:centerColor="@color/translucent_scrim_top_center"
    android:endColor="@android:color/transparent"/>
</shape>

y scrim_bottom.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:angle="90"
    android:startColor="@color/translucent_scrim_bottom"
    android:centerColor="@color/translucent_scrim_bottom_center"
    android:endColor="@android:color/transparent"/>
</shape>

Para los colores, debes hacerlos más oscuros en las pruebas iniciales para que sea más obvio que funcionen, pero para la producción usé:

<color name="translucent_scrim_top">#26000000</color>
<color name="translucent_scrim_top_center">#0C000000</color>
<color name="translucent_scrim_bottom">#2A000000</color>
<color name="translucent_scrim_bottom_center">#0D000000</color>

Y para las dimensiones, utilicé una altura de 88dp.

Answer 4

Use una malla de protección de texto del ejemplo de Amagi82 y agregue en el parámetro CollapsingToolbarLayout la app:expandedTitleTextAppearance .

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    .
    app:expandedTitleTextAppearance="@style/TextAppearance.Design.CollapsingToolbar.Expanded.Shadow"
    .
    .
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

Por ejemplo, agregue esto en su estilo xml:

<style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow">
    <item name="android:shadowDy">0</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowRadius">8</item>
    <item name="android:shadowColor">@android:color/black</item>
</style>