Push toolbar content below statusbar

Question

I am trying to make a transparant toolbar for my app. I now use windowTranslucentStatus to achieve this. My problem is now that my statusbar is over my toolbar. I guess I need to give my toolbar a margin top with the height of the statusbar. How can do I know what the height of the statusbar is?

enter image description here

My layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activites.DealersActivity_">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >


        </RelativeLayout>
    </LinearLayout>
    <include layout="@layout/drawer"
        android:id="@+id/drawer"
        ></include>
</android.support.v4.widget.DrawerLayout>

My Toolbar:

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="@drawable/toolbar_background">

<TextView
    android:visibility="gone"
    android:typeface="monospace"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Toolbar Title"
    android:textSize="20sp"
    android:textColor="@color/toolbar_text"
    android:layout_gravity="center"
    android:id="@+id/toolbar_title" />

</android.support.v7.widget.Toolbar>

Post your layout here. Are you using `fitsSystemWindows="true"`? — Boris Strandjev, Jun 09 '15 at 08:13
Added my layout to the message. I am not using fitSystemWindows because I want to have the gradient behind the statusbar. — Bart Bergmans, Jun 09 '15 at 08:25
Then probably i misunderstand you - were you not trying to get the status bar and just then your toolbar? OR do you need like long gradient, but buttons and labels on the toolbar far on the low side of the toolbar? — Boris Strandjev, Jun 09 '15 at 09:22
The last one. I need the gradient to the top of the screen (behind the statusbar) and the normal toolbar below it. — Bart Bergmans, Jun 09 '15 at 09:38

score 0 · Answer 1 · edited May 23 '17 at 12:22

0

After your explanations, it also seems to me that you need to set margin in your toolbar.

Regretfully, I am not aware of a way to determine the height of a status bar in the layout xml (e.g. like "?attr/actionBarSize"). However, you can determine it in the code: see here.

When you get the height programatically, you would like to change the padding of your toolbar programatically too. Use this method to do it.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 09 '15 at 09:53

Boris Strandjev

46,145
15
108
135

Shouldnt I use a padding for that instead of a margin? – Bart Bergmans Jun 09 '15 at 11:07

score 0 · Answer 2 · answered Jun 14 '18 at 19:15

I wanted to do the same thing. What I ended up doing is this:

activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:background="@drawable/gradient_actionbar"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:background="@color/colorTransparent"
            app:popupTheme="@style/AppTheme.PopupOverlay" />


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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_main_openCameraIntent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:fabSize="normal"
        android:tint="@color/colorIcons"
        android:elevation="2dp"
        app:srcCompat="@drawable/ic_camera_kindawhite_24dp" />

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

And in styles.xml

    <resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@color/colorTransparent</item>
        <item name="android:windowTranslucentStatus">false</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

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

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

</resources>

I hope this helps!

Push toolbar content below statusbar

2 Answers2