Fab bar not showing over nested scroll view

Question

I have followed many answers and tried to show fab bar over nested scroll view but i failed to achieve this

my xml is

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
>


    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:fillViewport="true"
        android:scrollbars="none"
        android:scrollingCache="true">
        <LinearLayout
            android:id="@+id/billBlock"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/allJobsheetList"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            </android.support.v7.widget.RecyclerView>


        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end|right"
        android:gravity="center_horizontal"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_mic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/spacing_middle"
            android:clickable="true"
            android:tint="@color/grey_80"
            app:backgroundTint="@color/grey_20"
            app:fabSize="mini"
            app:rippleColor="@android:color/white"
            app:srcCompat="@drawable/ic_mic" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/spacing_middle"
            android:clickable="true"
            android:tint="@color/grey_80"
            app:backgroundTint="@color/grey_20"
            app:fabSize="mini"
            app:rippleColor="@android:color/white"
            app:srcCompat="@drawable/ic_photo_camera" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/showFilterView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/spacing_smlarge"
            android:layout_marginLeft="@dimen/spacing_smlarge"
            android:layout_marginRight="@dimen/spacing_smlarge"
            android:layout_marginTop="@dimen/spacing_middle"
            android:clickable="true"
            android:tint="@android:color/white"
            app:fabSize="normal"
            app:rippleColor="@android:color/white"
            app:srcCompat="@drawable/ic_add" />

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

in the above xml fab bar showing at the end of nested scroll view not in fixed position on bottom right.i am new to android can any one help me how i can achieve this

How to add floating action button on top of scrollview

Create the Layout with CardView and Floating Action Button Android

FrameLayout does not match the height of NestedScrollView

align parent bottom and align parent right are used in relative layouts to fix the views in bottom/right respectively. It does not fix the view in this case, you can add margin from bottom to the nested scrollview ,and giving a height to the linear layout accordingly. — Kaveri, Aug 04 '18 at 17:07
To align a child respective to another in Coordinator Layout, use anchor or layout gravity to give it a gravity, and to take advantage of coordinator behaviour make the fab direct children of the coordinator layout. — Kaveri, Aug 04 '18 at 17:16

score 1 · Answer 1 · answered Aug 07 '18 at 18:12

Have made a few changes , made fab the direct child of coordinator layout and used archor app:layout_anchor="@id/nested_scroll_view" app:layout_anchorGravity="bottom|right|end" and for aligning fabs relative to the nested scrollview .

`<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
>
<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:scrollbars="none"
    android:scrollingCache="true">
    <LinearLayout
        android:id="@+id/billBlock"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/allJobsheetList"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>

    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

<!--<LinearLayout-->
    <!--android:layout_width="wrap_content"-->
    <!--android:layout_height="wrap_content"-->
    <!--android:gravity="center_horizontal"-->

    <!---->
    <!--android:orientation="vertical">-->


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_mic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/nested_scroll_view"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginRight="10dp"
        android:clickable="true"
        android:layout_marginBottom="130dp"
        app:fabSize="mini"
        app:rippleColor="@android:color/white"
        android:src="@drawable/ic_launcher_background" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_call"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:clickable="true"
        android:layout_marginBottom="70dp"
        app:layout_anchor="@id/nested_scroll_view"
        app:layout_anchorGravity="bottom|right|end"
        app:fabSize="mini"

        app:srcCompat="@drawable/exo_controls_play" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/showFilterView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/nested_scroll_view"
        app:layout_anchorGravity="bottom|right|end"
        android:clickable="true"
        android:tint="@android:color/white"
        app:fabSize="normal"
        app:rippleColor="@android:color/white"
        app:srcCompat="@drawable/exo_controls_next" />
<!--</LinearLayout>-->
</android.support.design.widget.CoordinatorLayout>

@Kaveri.Thanks i did this already but now my problem is i need to hide bottom navigation view on scroll but i have nested scroll in every fragment — scott, Aug 08 '18 at 17:30
Sorry for late response, so do u mean to hide (animate)bottom bar on scroll and show it on reverse scroll? — Kaveri, Aug 08 '18 at 17:45
@Kaveri.yes exactly right.before i did it using frame layout inside nested scroll view but if i add so then my fab will not positon properly — scott, Aug 09 '18 at 16:07
One way to achieve this behaviour is by setting the layout_behaviour for the bottom- bar , but this requires coordinator layout as the root parent. This link might help you :-https://stackoverflow.com/questions/34715732/how-to-scroll-up-down-of-bottom-bar-on-scrolling-of-recyclerview — Kaveri, Aug 09 '18 at 16:40

score 0 · Answer 2 · answered Aug 04 '18 at 15:30

0

This layout will work fine. Please check if you have ic_add, ic_mic, ic_photo_camera in res/drawable folder. Removing these, i can see the view like below screenshot

answered Aug 04 '18 at 15:30

Viswanath Kumar Sandu

2,230
2
17
34

i can see icon but if you have large content rows in scroll then it show at the end of the ciew – scott Aug 04 '18 at 15:40

Fab bar not showing over nested scroll view

2 Answers2