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?

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>

Answer 1

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.

Answer 2

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!