I updated my android studio few days ago and started working with the CoordinatorLayout and CollapsingToolbarLayout just trying stuff.
It seems that the Toolbar scrim colour override the status bar initial colour and the status bar scrim colour (tried both from xml and code)
initial state:
started scrolling:
scrolled until collapsing:
So the questions are:
How can I prevent the toolbar to override the status bar when collapsing (not even letting the image I'm collapsing to go above it).
How can I change status bar colour after collapsing
Another issue I had is that I gave the toolbar initial colour and not just scrim colour because I wanted the Toolbar above the picture but instead it will go on top of the picture and will cover some of it as well as will cover anything that going to collapse behind it
added colour/style to the toolbar in the xml:
- Is there any way to put the toolbar above the picture from the beginning and just collapse the image? (thought about maybe keep the tool bar pinned and and frame layout before the image but its still gonna collapse on the status bar area which is the main question.)
main activity xml:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim = "?attr/colorPrimary"
app:statusBarScrim="?attr/colorAccent" --------> not changing
android:id="@+id/my_ctl">
<ImageView
android:id="@+id/image"
android:src="@drawable/flights"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay"
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="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior" >
<include layout="@layout/content_main" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
MainActivity.java:
CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.my_ctl);
//ctl.setContentScrimColor(Color.RED);
ctl.setStatusBarScrimColor(Color.BLUE); --------> not working
ctl.setTitle("blabla");
app:statusBarScrim="@android:color/transparent"
Try adding android:fitsSystemWindows="true" to AppBarLayout. It worked for me.
For the point #3: In the Toolbar add a transparent background
android:background="@android:color/transparent"
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin"
android:background="@android:color/transparent" />
for 2) there is a known issue
for now I'm setting the color of the toolbar background programmatically
mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
Toolbar toolbar = (Toolbar) mAppBarLayout.findViewById(R.id.toolbar_top);
int toolbarBackground = (state == AppBarStateChangeListener.State.COLLAPSED) ? R.color.color_collapsed : R.color.color_non_collapsed;
toolbar.setBackgroundColor(ContextCompat.getColor(DealsOptionsActivity.this, toolbarBackground));
}
});
this is of course a simple implementation. You can optimize it.
Been looking for solution and found it. First, setup your's activity theme to AppThemeNoActionBarLight.SimpleCoordinatorTheme
Take a look:
<!-- Base application theme. -->
<style name="AppThemeNoActionBarLight" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppThemeNoActionBarLight.SimpleCoordinatorTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
Then try this layout sample:
<?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:background="@android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:title="@string/app_name"
>
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/material_flat"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:title="Test"
/>
</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"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:lineSpacingExtra="8dp"
android:text="@string/lorem"
android:padding="@dimen/activity_horizontal_margin"
/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="@dimen/activity_horizontal_margin"
android:src="@drawable/ic_comment_24dp"
app:layout_anchor="@id/main.appbar"
app:layout_anchorGravity="bottom|right|end"
/>
来源：https://stackoverflow.com/questions/35354261/collapsingtoolbarlayout-status-bar-scrim-color-doesnt-change