CODEWITHSUNDEEP
androidandroid-toolbarandroid-design-libraryandroid-appbarlayout
Akshay Chordiya
Akshay Chordiya

Reputation: 4841

AppBarLayout weirdly taking space & pushing content down

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 belowCutting of FloatingActionButton

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.

Upvotes: 7

Views: 4531

Answers (3)

Vicky Chijwani
Vicky Chijwani

Reputation: 10469

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>

Upvotes: 8

pRaNaY
pRaNaY

Reputation: 25312

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"/>

Upvotes: 0

pRaNaY
pRaNaY

Reputation: 25312

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"/>

Upvotes: 3

Related Questions