Transparent status bar overlaps action bar

Question

Actual result: The status bar appears over the action bar Toolbar and the MenuItem inside the action bar is cut off. Note: "Test" is the action bar's title.

Expected result: The top bound of the action bar Toolbar should appear directly below the bottom bound of the status bar and any MenuItems inside the action bar should be completely visible.

Activity's XML layout:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/background"
        tools:ignore="ContentDescription"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/action_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/transparent"
        android:fitsSystemWindows="true"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

</FrameLayout>

The action bar title and MenuItem are added at runtime.

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);

    setSupportActionBar((Toolbar) findViewById(R.id.action_bar));
    ActionBar actionBar = getSupportActionBar();
    assert actionBar != null;
    actionBar.setDisplayHomeAsUpEnabled(false);
    actionBar.setTitle("Test");
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_test, menu);
    return true;
}

Before I added fitsSystemWindows="true" to the Toolbar view, the status bar still overlayed the action bar, but the 'SKIP' MenuItem was vertically centered in the action bar, causing it to appear partially underneath the status bar. I expected the fitsSystemWindows=true flag to give me my expected result (mentioned above), but it did not. It's as if fitsSystemWindows="true" correctly positioned the 'SKIP' button but did not adjust the position of the action bar itself. Anyone know what might be the issue here?

EDIT: I realize that I could remove fitsSystemWindows="true" and add a marginTop="...statusBarHeight" to the Toolbar view, but I am looking for the a cleaner way to solve this.

can you please share the complete layout file ? and the layout preview image ? I cant see test and skip button code in the layout. — rahul, Feb 21 '17 at 22:38
@rahul, maybe Ryan add title and menu item programmatically, not in xml — Iqbal Rizky, Feb 21 '17 at 22:41
@ntaloventi if that is the case I think making a custom toolbar and including it in the layout file will be a good idea. It makes code more cleaner and easy to maintain. — rahul, Feb 21 '17 at 22:59
@rahul, agree with you but base on Ryan layout there is no `test` & `skip button` as you expected — Iqbal Rizky, Feb 21 '17 at 23:01
@Ryan can you share the complete code how are you adding the skip button on the layout and the complete layout preview image ? — rahul, Feb 21 '17 at 23:13
@rahul Just added the code I'm using at runtime to add the title and skip button to the action bar. The layout I shared is the full layout. The rest of the screenshot is just the "image_background" `ImageView`. No other views are below the action bar. — Ryan, Feb 21 '17 at 23:17
@Ryan follow this https://guides.codepath.com/android/Using-the-App-Toolbar this might be helpful ! — rahul, Feb 21 '17 at 23:45

Ryan · Answer 1 · 2017-02-25T18:25:41.013

My issue was due to me setting the Toolbar's layout_height to ?attr/actionBarSize. I originally thought that fitsSystemWindows repositions the Toolbar, but it appears to add a padding instead. So when top padding is added to the Toolbar, the Toolbar's contents are pushed down. Since the Toolbar's height is fixed, the contents are pushed below the lower bound of the container. I ended up setting ?attr/actionBarSize as the value for the Toolbar's minHeight attribute to solve this. Below is my updated Toolbar:

<android.support.v7.widget.Toolbar
    android:id="@+id/action_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

Caveat: This works if you aren't wanting to show anything directly below the action bar since the action bar's height, for one reason or another, is about twice the height that it needs to be to contain a single line of the home icon, title, and/or menu items. If anyone knows a way to achieve a non-overlapping status bar AND a normal size action bar, please share your insight. I would be forever grateful.

Caveat update: Okay. So apparently my action bar was receiving extra, bottom padding equivalent to the height of the navigation bar because I set <item name="android:windowTranslucentNavigation">true</item> on my Activity's theme. I verified this by removing the windowTranslucentNavigation attribute. I am testing this on a 7.1 Pixel using Android Support Libraries v25.1.1.

This solution does not exist for screens that require a normal size action bar with `layout_height` = `?attr/actionBarSize`. I have not found a solution for this. :/ — Ryan, Apr 01 '17 at 20:24
What helped me to keep status bar translucent (almost same color as toolbar), and toolbar of the right size, was to put all content of activity into coordinator layout in xml. — shtolik, Jul 14 '17 at 11:44
I've fought with similar problem for a day, and the only thing what helped me was to set on toolbar android:fitsSystemWindows="false" as suggested in that answer https://stackoverflow.com/a/34856737/490114 Then the size and paddings of toolbar were set correctly — shtolik, Aug 01 '17 at 11:59
Thanks, this helpful after a day of searching what the problem was. The property in the Toolbar android:fitsSystemWindows="true" did the trick. It pushed the toolbar just below the status bar — mut tony, Aug 12 '21 at 09:32

score 0 · Answer 2 · answered Feb 21 '17 at 23:43

Try to move your Toolbar into AppBarLayout.

Like this:

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

 <android.support.v7.widget.Toolbar
        android:id="@+id/action_bar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@android:color/transparent"
        android:fitsSystemWindows="true"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<AppBarLayout/>

score 0 · Answer 3 · edited Mar 05 '21 at 09:15

0

I am using flags to make activity fullscreen and my style is NoActionBar.

If i set fitsSystemWindows=true to toolar or parent layout, activity content size changed because of navigation bar and status bar.

I wrapped ToolBar with AppBarLayout like in Twinkie_Monkey's answer and I set fitsSystemWindows=true to AppBarLayout and it worked.

edited Mar 05 '21 at 09:15

Amir Dora.

2,831
4
40
61

answered Mar 04 '21 at 11:52

Abdurrahman Oğuzhan Durmaz

396
4
10

Transparent status bar overlaps action bar

3 Answers3