Android CollapsingToolbarLayout Title background

Question

Je travaille avec CollapsingToolbarLayout à partir de la nouvelle Android Design Support Library.

J'ai défini son titre et cela fonctionne bien, le seul problème que j'ai toujours, c'est que lorsque vous faites défiler, le texte est perdu, en fonction de l'image en arrière-plan.

Ce que j'aimerais faire, c'est définir un arrière-plan pour le titre CollapsingToolbarLayout, mais je n'ai pas trouvé de moyen de le faire.

Y'a-t-il une quelconque façon de réussir cela?

Merci!

Disposition:

<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>

Configuration du titre CollapsingToolbarLayout dans l'activité:

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

Modifier:

Ici, vous pouvez voir une séquence d'images lorsque je replie la barre d'outils. Vous pouvez voir comment le texte du titre n'est pas lisible. Le problème est que je n'ai pas le contrôle des images que je montre, donc pour certaines images, cela semble correct, mais pour d'autres, comme cet exemple, cela ne semble pas bon du tout et il n'est pas lisible. Ce que j'avais à l'esprit était peut-être d'ajouter une sorte d'arrière-plan au texte, donc il y a toujours la même couleur à l'arrière du texte et il est toujours lisible.

Answer 1

Utilisez un canevas de protection de texte (faites défiler un peu vers le bas). Mon exemple suppose que le texte du titre est blanc, donc quelques ajustements peuvent être nécessaires pour optimiser votre cas.

Dans votre CollapsingToolbarLayout, ajoutez ce qui suit après 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"/>

Dans votre dossier Drawable, ajoutez:

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>

et 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>

Pour les couleurs, vous devriez les rendre plus sombres lors des tests initiaux, il est donc plus évident que vous les faites fonctionner, mais pour la production, j'ai utilisé:

<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>

Et pour les dimensions, j'ai utilisé une hauteur de 88dp.

Answer 2

Utilisez un canevas de protection de texte de l'exemple d'Amagi82 et ajoutez le CollapsingToolbarLayout le app:expandedTitleTextAppearance paramètre.

<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">

Par exemple, ajoutez ceci sur votre style 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>

Answer 3

Modifier:

Si vous souhaitez modifier la couleur de la barre d'outils une fois qu'elle a "rétréci", vous devez définir l'attribut contentScrim de la disposition de la barre d'outils repliée sur cette couleur:

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

Le fait de pointer la valeur de cet attribut sur la couleur dans laquelle vous voulez que la barre d'outils se transforme résoudra votre problème, si je comprends bien.

J'espère que cela répond à votre question!

Answer 4

C'est beaucoup de travail à réaliser ici en écrivant autant de code. J'ai réussi cela de 2 façons.

1 Une solution de contournement simple en utilisant une vue avec la couleur TransparentBlack
CODE >>

Explication du code:
1 CollapsingToolbarLayout a un style avec uniquement une taille de texte.
2 La marge par défaut CollapsingToolbarLayout est remplacée par 16dp.
3. Notre en-tête avec parallaxe collapseMode est un RelativeLayout avec une ImaveView et une View.
4. Cette vue simple avec un BG au bas de l'en-tête supérieur Disposition relative avec couleur de contraste (ici # 77000000), agit comme BG pour le titre réduit de CollapsingToolbarLayout en couleur blanche.

  <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>

Images pour le style 1:

a) Lorsque le titre CollapsingToolbarLayout est entièrement développé:

b) Lorsque CollapsingToolbarLayout Title rétrécit lors du défilement vers le haut:

2 Réponse ci-dessus

La méthode est déjà mentionnée par Joao Ferreira.

Voici à quoi cela ressemble avec shadowRadius = 16: Remarquez l'ombre

PS s'il vous plaît mettre à jour ou demander plus si des confusions:)