AppBarLayout weirdly taking space & pushing content down

Question

I'm using the new Android Design Library & Auto hide of Toolbar feature. Currently the auto hide on scroll works fine. But the having this issue, take a look at screenshot below

As you see the FloatingActionButton is pushed bit down.

Code:

<android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.v7.widget
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:src="@drawable/ic_shuffle"
        style="@style/FabStyle"/>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

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

FabSyle:

<style name="FabStyle">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_gravity">bottom|end</item>
    <item name="android:layout_marginEnd">@dimen/activity_horizontal_margin</item>
    <item name="android:layout_marginBottom">@dimen/activity_vertical_margin</item>
    <item name="borderWidth">0dp</item>
    <item name="elevation">@dimen/fabElevation</item>
    <item name="pressedTranslationZ">@dimen/fabPressedZ</item>
</style>

I have also tried too add margin & padding bottom which works but when list is scrolled it goes too up.

Best thing is when I play with AppBarLayout which stops the auto hide on scroll for Toolbar then FloatingActionButton looks good.

Please also show us the `FabStyle` as it is the one that actually has all the layout parameters of the floating action button. — LukaCiko, Sep 24 '15 at 07:48
@LukaCiko Sure but there is not a issue with `FabStyle`. I identified `AppBarLayout` as bug source — Akshay Chordiya, Sep 24 '15 at 08:44
Sorry, no. I suspect it's an issue with CoordinatorLayout because I've seen something similar. — LukaCiko, Sep 28 '15 at 12:40
@LukaCiko I guess it's an issue with design library not sure though — Akshay Chordiya, Sep 28 '15 at 12:42

Vicky Chijwani · Answer 1 · 2016-10-18T22:13:05.957

AppBarLayout expects to be the first child of CoordinatorLayout to work correctly. This article notes that:

AppBarLayout currently expects to be the first child nested within a CoordinatorLayout according to the official Google docs.

But apparently the docs have changed since then (maybe the restriction no longer applies? I'm not sure). Try moving your AppBarLayout to the first position like so:

<android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@android:id/home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

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

    <android.support.v7.widget
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:src="@drawable/ic_shuffle"
        style="@style/FabStyle"/>

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

Thank you. Fixed a long pending visual glitch! – Vinod Oct 07 '16 at 19:59 — Vinod, Oct 07 '16 at 19:59
This saved me several hours of pulling out my hair ;) – Rafal Zawadzki Jul 31 '17 at 15:22 — Rafal Zawadzki, Jul 31 '17 at 15:22

score 3 · Answer 2 · answered Sep 29 '15 at 14:28

3

You need to change you FAB like this:-

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:src="@drawable/ic_shuffle"
    app:layout_anchor="@id/list"
    app:layout_anchorGravity="bottom|right|end"
    style="@style/FabStyle"/>

answered Sep 29 '15 at 14:28

pRaNaY

24,642
24
96
146

Interestingly it worked but I'm working for `Scroller` now – Akshay Chordiya Sep 29 '15 at 15:05
Any solution for `RecyclerView Scroller` – Akshay Chordiya Oct 03 '15 at 12:17
Instead of `RecyclerView` I'm using `FrameLayout` which is replaced with `RecyclerView` which contains `FloatingActionButton` – Akshay Chordiya Nov 26 '15 at 09:52

score 0 · Answer 3 · answered Oct 03 '15 at 12:34

0

for your RecyclerView

<android.support.v7.widget.RecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    android:clipToPadding="false"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

answered Oct 03 '15 at 12:34

pRaNaY

24,642
24
96
146

I have my `SuperRecyclerView – Akshay Chordiya Oct 03 '15 at 18:07

AppBarLayout weirdly taking space & pushing content down

3 Answers3