问题
I'm working with the CollapsingToolbarLayout from the new Android Design Support Library.
I have set its title and it is working fine, the only problem I still have is that when you scroll, the text is lost, depending on the image in the background.
What I'd like to do, is set a background to the CollapsingToolbarLayout title, but I haven't find a way to do it.
Is there anyway to achieve this?
Thanks!
Layout:
<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>
Setting up the CollapsingToolbarLayout title in the activity:
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Some title here");
Edit:
Here you can see a sequence of images when I collapse the toolbar. You can see how the title text is not readable. The problem is that I don't have controll of the images that I show, so for some images it looks ok, but for others, like this example, it doesn't look good at all and it is not readable. What I had in mind was maybe add some kind of background to the text, so there is always the same color at the back of the text and it is always readable.
回答1:
Use a text protection scrim(scroll down a bit). My example assumes the title text is white, so some tweaks may be necessary to optimize for your case.
Inside your CollapsingToolbarLayout, add the following after 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"/>
In your Drawable folder, add:
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>
and 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>
For colors, you should make these darker in initial testing so it's more obvious you have it working, but for production I used:
<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>
And for dimensions, I used a height of 88dp.
回答2:
Use a text protection scrim from the example of Amagi82 and add on the CollapsingToolbarLayout the app:expandedTitleTextAppearance parameter.
<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">
For example add this on you 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>
回答3:
Edit:
If you want to change the color of the toolbar once it has "shrunk", you need to set the contentScrim attribute of the collapsing toolbar layout to that color:
<android.support.design.widget.CollapsingToolbarLayout
app:contentScrim="@color/[color you want]"
...>
Pointing the value of this attribute to the color you want the toolbar to turn into will solve your issue, as I understand it.
Hope that answers your question!
回答4:
That's a lot of work do achieve here by writing that much of code. I achieved that by 2 ways.
1 A simple workaround by using a View with TransparentBlack color
CODE>>
Code explaination:
1 The CollapsingToolbarLayout has a style with only a text size.
2 Default CollapsingToolbarLayout margin bottom is overridden to 16dp.
3. Our header with parallax collapseMode is a RelativeLayout with an ImaveView and a View.
4. This simple View with a BG at the bottom of the top header Relative layout with colour of contrast (here #77000000), acts as the BG for CollapsingToolbarLayout's collapsed Title in white color.
<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 for style 1:
a) When CollapsingToolbarLayout Title is Expanded Fully:
b) When CollapsingToolbarLayout Title is shrinking upon scroll up:
2 Answer above
Method is mentioned already by Joao Ferreira.
Here is what it looks like with shadowRadius=16: Notice the Shadow
PS please update or ask more if any confusions :)
来源：https://stackoverflow.com/questions/31542878/android-collapsingtoolbarlayout-title-background