Vijai Vijai - 5 months ago 421
Android Question

Translucent status bar with imageview in collapsible toolbar

I'm trying to set image to collapsible toolbar which is shown behind the translucent status bar for >23api. But even after setting the statusbar to be transparent in styles.xml and applying the theme from manifest for the activity and setting fitSystemWindows in layout for the imageview and collapsingToolbar, the image isnt applies to status bar. The xml and the screenshot on how it looks:

Layout.xml

<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:fitsSystemWindows="false"
android:layout_height="match_parent" >

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="250dp" >

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:id="@+id/movie_banner"
app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:layout_height="?attr/actionBarSize"
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:background="#ffe5e5e5"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<android.support.v7.widget.RecyclerView
android:id="@+id/movies_details_recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
</LinearLayout>

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
app:layout_anchor="@id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end"
style="@style/FabStyle"/>

</android.support.design.widget.CoordinatorLayout>


styles.xml

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:textColorPrimary">@android:color/white</item>
</style>


This is how it looks on my phone.

Image not setting on transparent statusbar

--------------------Update--------------------
Jakson's answer solved it partially. Now, the image is set to status bar while the toolbar is scrolling up but, once it's fully up, I see like the image below. Note that the actionbar has also moved a bit up.
I need to achieve something like this: image set over statusbar
enter image description here

Answer

create a values-v21 folder in res folder

and apply this theme to your current activity

<resources>

    <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

in your styles.xml

    <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
    </style>

    <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
    </style>

also set fitsystemwindows to CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout and Imageview

android:fitsSystemWindows="true"