I have some issues trying to implement the new CollapsingToolbarLayout. Scrolling, expanding and collapsing do work fine, but my ImageView (no matter what type of resource I set) does not cover the full height of the expanded toolbar. See here:
Here I set android:src="#color/red" on the image view, but it never covers the real toolbar. It doesn't work with bitmaps either. I am posting my layout below.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- content -->
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_height="#dimen/appbar_expanded_height"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#color/red_600"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- I load fragments here -->
<FrameLayout
android:id="#+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
<!-- nav drawer -->
<fragment
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
Seems to me that the only difference with, for example, the cheese-Chris Banes-app, is that I'm giving app:layout_behavior to a FrameLayout. However, inside that frame I load fragments that have a NestedScrollView as the root view, and this seems to work fine.
I had the same problem, the collapsing toolbar did not cover the full height of Image, But fixed with removing single line from the AppBarLayout. That is you just need remove android:fitsSystemWindows="true and you are done.
<android.support.design.widget.AppBarLayout
android:layout_height="#dimen/appbar_expanded_height"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
remove the last line, that is as.
android:fitsSystemWindows="true"
that's it, good to go...
I found the blue strip was the toolbar background. Namely, I had:
<item name="toolbarStyle">#style/MyToolbarStyle</item>
in my theme, and:
<style name="MyToolbarStyle">
<item name="android:background">?attr/colorPrimary</item>
</style>
I used to have this to tint toolbars with colorPrimary. However if you want to move to the design library, you should get rid of it: the collapsed toolbar color is already managed by the app:contentScrim attribute on the CollapsingToolbarLayout.
Related
I am trying to bring the image view behind the status bar in collapsing toolbar and have tried many solutions, it goes behind the status bar but in the stating it starts below the status bar, but on scrolling it goes behind. How can I fix this, here is the xml file(it is a fragment inside an activity)
FRAGMENT XML :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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/fragment_detail_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/fragment_detail_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="#android:color/transparent"
app:theme="#style/Theme.AppCompat.NoActionBar">
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/fragment_detail_collapsing_toolbar_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>
<android.support.v7.widget.Toolbar
android:id="#+id/fragment_detail_toolbar"
android:layout_width="match_parent"
android:layout_height="120dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:titleTextColor="#android:color/white">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
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">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/fragment_detail_anchor_image"
android:layout_width="96dp"
android:layout_height="144dp"
android:layout_margin="40dp"
android:background="#android:color/white"
app:layout_anchor="#id/fragment_detail_app_bar_layout"
app:layout_anchorGravity="bottom"
android:scaleType="fitXY"
android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>
ACTIVITY XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/movie_detail_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context="app.com.thetechnocafe.moviesnow.MovieDetailActivity">
</android.support.design.widget.CoordinatorLayout>
SCREENSHOT
Got it solved. The image from the network was of a different ratio, one thing i discovered is that if the image don't fit the res to go behind the status bar then it automatically fits under the status bar. All i had to do is set android:scaleY="1.2" in the NetworkImageView to push it into the status bar.
On devices with API 21+ you can use a custom theme that make the status bar translucent.
<style name="AppTheme.NoActionBar.NoStatusBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
Add this style to a file within the values-v21 folder and set the Activty theme in your AndroidManifest.xml like this:
<activity
android:name=".activity.AboutActivity"
android:theme="#style/AppTheme.NoActionBar.NoStatusBar" />
And one more thing. I think you need to add android:fitsSystemWindows="true" to the NetworkImageView also.
I want to make search toolbar which appears on swipe down and collapses on swipe up, regardless of scroll level. I encountered a problem when I wanted to set height of this toolbar exactly as search area. On swipe down it's fine. but on swipe up search icon is still visible.
If I change AppBarLayout android:layout_height="wrap_content" to 100dp, for example, it becomes possible to hide toolbar, to but it looks bad and may cause problems on different resolutions. Example of what I want to achieve is search in Play Market app, how it's done there?
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="test.proekt101_test.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
>
<SearchView
android:id="#+id/searchView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="30dp"
>
</SearchView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Try adding android:fitsSystemWindows="true" to SearchView as well.
android:fitsSystemWindows="true" is supposed to be on CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout and the ImageView inside it.
From here. Worked for me.
android:fitsSystemWindows=“true”
was responsible for this. A useful article I've found — https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec#.psylrqm0y
Hi I am doing a simple app to try out material design. Unfortunately, following the incredible tutorial here and trying out the samples here (These are incredible sources for FYI in material design) I am struggling to make my app toolbar to work perfectly as it should. For instance, the back button right next to the title on collapse in not showing up. BUT I can simply click that area where it should be and it responded.
So therefore the button is there but it is not showing up and I cannot figure out why. Also, as the toolbar collapsed, the toolbar doesn't change its color to primary color I set. contentScrim doesn't seem to react on collapse mode but I will post another question for this.
Here is what it currently looks like:
Now on collapse, the title is noticeably far to the right. The button is there, I can click it, it returns to my app's homescreen but the back icon is not there.
Here is the layout file for the activity:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".HomeScreenActivity"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_note"
android:layout_width="match_parent"
android:layout_height="168dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_note"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
<ImageView
android:src="#drawable/backgroud_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar_note"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_send_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I am using API 22 build 23.0.2 all of my support libraries are at 23.1.0
I found the answer, it seems the tutorial doesn't work for my case since probably they do a different method on how to load the image backdrop. I simply put mine into the drawable-xxxhdpi folder and load it via android:src attribute I am not very sure if this makes difference at all. I peeked at the sample project and they defer the loading/caching of images at runtime in onCreateView() using Glide. I did otherwise. I guess this is the convention on huge file size for material backgrounds?
It appears to me it involves how the actual layout is positioned. I positioned the ImageView below the toolbar. So the imageview gets rendered first, I believe. The ImageView is always there even though the Toolbar entered. This must be the reason why the contentScrim looked like it failed to recognize that it is already on Toolbar mode. The ImageView is blocking the entire Toolbar!
So I placed the ImageView below the Toolbar. This time, Toolbar gets to show up first and then the image. It worked!
Here is my new layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".HomeScreenActivity"
android:weightSum="1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_note"
android:layout_width="match_parent"
android:layout_height="168dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:src="#drawable/backgroud_note"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_note"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/appbar_note"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_send_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
I am thinking maybe if I could delay the loading of image a bit (like deferring the image loading at onCreateView()) making way for the toolbar to show up first, maybe it won't matter how I positioned my elements inside the CollapsingToolbarLayout. But this is just my rough guess. I can always be wrong.
Just use app:layout_collapseMode="pin"inside Toolbar! It's work fine) Thanks
I have changed a version in build.gradle from
compile 'com.android.support:design:22.2.0'
to
compile 'com.android.support:design:24.2.1'
and added this to class:
Toolbar toolbar = (Toolbar) findViewById(R.id.mainToolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(true);
Now back button is working!
I would like to achive the following layout:
Map as a base layout
Transparent window above inside a CollapsingToolbarLayout
RecyclerView for content
I included an example of how this should look like.
I was following this great example from Cheesesquare for the CollapsingToolbarLayout and AppBarLayout implementation. I managed to get the content working with the map inside the CollapsingToolbarLayout (commented out in the layout xml), but this is not the desired result.
However I did not find any solution / documentation to make the grey box (see inside image in the middle) to be transparent in the initial position. I would like it to be transparent in order to see through to the map. When the user would scroll up, the CollapsingToolbarLaoyut should do it's work and collapse the transparent window and show the Toolbar. For now the image looks just white or whatever color I give it. I already tried to set the color to transparent, but it didn't have the desired effect.
So my question: How could I set the "CollapsingToolbarLayout" transparent in the initial phase (see image Layer 1 grey box)?
Here is my code for the layout. The CollapsingToolbarLayout works great, but I can't see the map below. Would be great if it would be possible to implement.
<android.support.design.widget.CoordinatorLayout
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">
<!-- Layer 0 -->
<FrameLayout
android:id="#+id/overlayFragmentMap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="0dip"
/>
<!-- Layer 1 -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/CustomActionBar">
<!--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/colorAccent"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#color/black"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Map view inside here works perfectly but is not
the deisired result -->
<!--
<FrameLayout
android:id="#+id/overlayFragmentMap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="0dip"
app:layout_collapseMode="parallax"
/>
-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/transparent"
android:elevation="4dip"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Fragment with recyclerview inside -->
<FrameLayout
android:id="#+id/overlayFragmentContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="3dip"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:clickable="true"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
How could I set the "CollapsingToolbarLayout" transparent in the
initial phase (see image Layer 1 grey box)?
Try to use this in your AppBarLayout: android:background="#android:color/transparent"
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true">
Here is the result:
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?
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 control 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.
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.
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>
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!
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 :)