Android CollapsingToolbarLayout Название фона

Ответ 1

Используйте текстовую защиту (прокрутите вниз). В моем примере предполагается, что текст заголовка белый, поэтому некоторые настройки могут быть необходимы для оптимизации вашего дела.

Внутри CollapsingToolbarLayout добавьте следующее после 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"/>

В вашей папке "Живая" добавьте:

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>

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

Для цветов вы должны сделать их более темными при первоначальном тестировании, чтобы было более очевидно, что вы его работаете, но для производства я использовал:

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

И для измерений я использовал высоту 88dp.

Ответ 2

Используйте текстовую оболочку для защиты от примера Amagi82 и добавьте параметр CollapsingToolbarLayout 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">

Например, добавьте это в свой стиль 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>

Ответ 3

Edit:

Если вы хотите изменить цвет панели инструментов, как только она "сжалась", вам необходимо установить атрибут contentScrim разворачивающейся панели панели инструментов на этот цвет:

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

Указание значения этого атрибута на цвет, который вы хотите включить в панель инструментов, решит вашу проблему, как я ее понимаю.

Надеюсь, что ответит на ваш вопрос!

Ответ 4

Чтобы достичь этой цели, много написано, написав большую часть кода. Я достиг этого двумя способами.

1 Простой обходной путь с использованием цвета View with TransparentBlack
CODE →

Объяснение кода:
1 CollapsingToolbarLayout имеет стиль с только размером текста.
2 По умолчанию CollapsingToolbarLayout край поля переопределяется до 16dp.
3. Наш заголовок с parallax collapseMode является RelativeLayout с ImaveView и представлением.
4. Этот простой вид с BG в нижней части верхнего заголовка. Относительная компоновка с цветом контраста (здесь # 77000000), действует как BG для CollapsingToolbarLayout, свернутое Название в белом цвете.

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

Изображения для стиля 1:

a) Когда CollapsingToolbarLayout Title расширяется полностью:

b) Когда CollapsingToolbarLayout Название сокращается при прокрутке вверх:

2 Ответ выше

Метод упоминается уже Жоао Феррейрой.

Вот как это выглядит с помощью shadowRadius = 16: Обратите внимание на тень

PS, пожалуйста, обновите или спросите больше, если есть какие-либо недоразумения:)