Reputation: 3202
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
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
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