CollapsingToolbarLayout image below status bar

Question

The problem here is that eventhough i haven't set fitsSystemWindows="true" to any of the tags in the xml, it still appear as if it has fitsSystemWindows="true". And in case you don't see the difference, it's in the status bar part.

Result Now :

What I want :

Additional Details:

• I already set translucent status to true in styles.xml (v21)

  <android.support.design.widget.CollapsingToolbarLayout
      android:id="@+id/collapsing_toolbar_layout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:fitsSystemWindows="false"
      app:contentScrim="?attr/colorPrimary"
      app:expandedTitleMarginEnd="64dp"
      app:expandedTitleMarginStart="48dp"
      app:layout_scrollFlags="scroll|exitUntilCollapsed">
  
      <ImageView
          android:id="@+id/img"
          android:layout_width="match_parent"
          android:layout_height="250dp"
          android:fitsSystemWindows="false"
          android:scaleType="fitXY"
          android:src="@drawable/com_facebook_profile_picture_blank_portrait"
          app:layout_collapseMode="parallax" />
  
      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:fitsSystemWindows="false"
          android:theme="@style/AppTheme.Toolbar"
          app:layout_collapseMode="pin"
          app:popupTheme="@style/AppTheme.PopupOverlay" />
  
  </android.support.design.widget.CollapsingToolbarLayout>
  

  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="a very long text, don't mind this, this is working as intended" />
  

v21/styles.xml

<resources>

<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

</resources>

styles.xml

<resources>

<style name="AppTheme" parent="AppTheme.Base">

</style>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppTheme.Dark" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimary</item>
</style>

<style name="AppTheme.Toolbar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="colorControlNormal">@color/white</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

Answer 1

See, the problem isn't the styling, but collapsing toolbar itself. I don't know how to fix it but I can help you figure out why it is happening. Trying to make status bar transparent with view pager works perfect. Now what you see here is, making the status bar color transparent (it is not fully transparent to show the white icons though), enable the view pager to take place behind the status bar too. Now when you do the same with your app containing collapsing toolbar, the status bar gets partially transparent and show collapsing toolbar as background. But problem here is collapsing toolbar's default is primaryColorLight or dark or the one you specified, but not the image, that's why you always see the dark color of toolbar behind status bar but not the image.

Answer 2

It was really confusing, but after I put fitsSystemWindows="true" to all of the tags, it worked.

Answer 3

You need set the transparency in /res/values-v21/styles.xml:

<item name="android:statusBarColor">@android:color/transparent</item>

Or set the transparency programmatically:

getWindow().setStatusBarColor(Color.TRANSPARENT);