scott
scott

Reputation: 3202

Fab bar not showing over nested scroll view

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

Upvotes: 1

Views: 578

Answers (2)

Kaveri
Kaveri

Reputation: 1088

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>

Upvotes: 1

Viswanath Kumar Sandu
Viswanath Kumar Sandu

Reputation: 2274

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

Upvotes: 0

Related Questions