Search code examples
androidandroid-studioandroid-toolbarandroid-coordinatorlayoutandroid-tabbed-activity

ToolBar and StatusBar overlap in the Tabbed activity in an unmodified newly created project in Android Studio

I created a new project with a Tabbed Activity and navigation style Action Bar Tabs.

The MainActivity's default layout is as follows on which i swipe from the TabLayout as follows:

enter image description here

After swiping all the way up it looks like this: The ToolBar and StatusBar are overlapping!

enter image description here

Questions:

Is this the expected behavior? Shouldn't the scrolling be disabled or if enabled, the toolbar should hide (e.g. whatsapp)? This default behavior appears buggy to me. Did i miss something that led to this?

And if this is the default expected behavior? how can do the following?

  • Disable the scrolling in CoordinatorLayout?
  • Hide the ToolBar when scrolling is enabled?

PS: Like i mentioned this is an unmodified new project (no changes from my end). If someone still needs the generated code I'll share.

Solution

  • Go to /v21/styles.xml and replace:

    <item name="android:statusBarColor">@android:color/transparent</item>

    by:

    <item name="android:statusBarColor">@color/colorPrimaryDark</item>

    The problem is that the status bar is transparent.

    Note: By default, the status bar uses the primaryDarkColor if it's defined. So in this case, you could remove that line in order to use the primaryDarkColor as far as you keep this line...

    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    ...in the values\styles.xml in your AppTheme.