How to hide the taskbar or set it to transparent in scrolling activity?

Question

I'm learning ScrollingActivity in Android and I met difficulty for handling the taskbar (the indigo part at the top). I want my zoo image take all the space, until it reaches the top of the screen. But I don't know how to do it. Can somebody help ?

Here's the layout XML file activity_scrolling:

<?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"
    tools:context="com.example.zoo.activity.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <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|exitUntilCollapsed">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/bg_zoo"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="30dp"
                android:background="@drawable/main_header_selector"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.1"/>

            <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/AppTheme.PopupOverlay" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_scrolling" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end" />

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

This is what I want :

you might want to edit the question , what you are reffering to as toolbar is actually the status bar as you already know by now — Shreyans, Mar 21 '16 at 00:39

score 0 · Answer 1 · answered Mar 20 '16 at 20:44

0

You can try setting the flags parameters in the window:

protected void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

super.onCreate(savedInstanceState);
setContentView(R.layout.yourLayout);

answered Mar 20 '16 at 20:44

ΦXocę 웃 Пepeúpa ツ

47,427
17
69
97

Thanks for your response. Actually, I want to keep the information of the Toolbar, but without its color. Can it be possible ? I'm poor in English, so I can an upload another screenshot if needed – Mincong Huang Mar 20 '16 at 20:49
ohhhh i get it, maybe this is the answer: http://stackoverflow.com/q/26505632/982161 – ΦXocę 웃 Пepeúpa ツ Mar 20 '16 at 20:52
I tried that answer, it doesn't work. Maybe I need more time to understand the mechanism, there're too many tags and properties :/ – Mincong Huang Mar 20 '16 at 21:03

score 0 · Accepted Answer · edited May 23 '17 at 12:24

Make the status bar transparent. After reading the question Android transparent status bar and action bar, I realized that : instead of hiding the action bar, I need the status bar to be transparent. So that layout can use status bar's height (overlaps). This part can be done programmatically :

protected void onCreate(Bundle savedInstanceState) {
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    // ...
}

Ensure the ImageView does not overlap again. Every component inside the CoordinatorLayout should be placed as where were. So add android:fitsSystemWindows to tag ImageView :

<ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/bg_zoo"
    android:fitsSystemWindows="true"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.7"/>

And here's the result :

Actually, I found the answer by chance. Please provide your answer if you find more relevant reasoning.

How to hide the taskbar or set it to transparent in scrolling activity?

2 Answers2