How to add floating action button on top of scrollview
android, android-studio, floating-action-button, scrollview, user-interface
Solution
Later children in a `RelativeLayout` tend to float over earlier children in a `RelativeLayout`.
(I say "tend to" because Android 5.0's `elevation` stuff also plays a role, and the relationship between them is ill-defined)
So, to have a floating action button (FAB) float over a `ScrollView` in a `RelativeLayout`, make sure that the `ScrollView` is defined first in the XML, with the FAB after it. This will not affect the X/Y rules, but it should have the FAB appear over the `ScrollView` on the Z axis.
Another possibility, if you are only supporting Android 5.0+, would be to use `android:elevation` itself to raise the FAB.
Problem
I have a floating action button that I would like to add on top of a scrollview so that the button stays, even if you scroll. I want it on the top of the scrollview and in the bottom right corner of the screen. What combination of views do I need to use to accomplish this? Here is the xml file: ``` <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:fab="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.nhscoding.safe2tell.STORIES" android:background="@color/stor_back"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom" > <com.getbase.floatingactionbutton.FloatingActionButton android:id="@+id/pink_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" fab:fab_icon="@drawable/ic_add" fab:fab_colorNormal="@color/fab_back" fab:fab_colorPressed="@color/fab_pressed_back" android:layout_gravity="end" android:layout_marginBottom="16dp" android:layout_marginRight="16dp"/> </LinearLayout> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view1" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="@dimen/card_margin_top" android:layout_marginBottom="@dimen/card_margin_bottom" android:layout_marginLeft="@dimen/card_margin_left" android:layout_marginRight="@dimen/card_margin_right" card_view:cardCornerRadius="@dimen/card_radius" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/card_title_top" android:layout_marginBottom="@dimen/card_title_bottom" android:layout_marginLeft="@dimen/card_title_left" android:layout_marginRight="@dimen/card_title_right" android:text="@string/card1_title" android:textSize="@dimen/card_title_size" android:gravity="top" android:id="@+id/title1" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view2" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="@dimen/card_margin_top" android:layout_marginBottom="@dimen/card_margin_bottom" android:layout_marginLeft="@dimen/card_margin_left" android:layout_marginRight="@dimen/card_margin_right" card_view:cardCornerRadius="@dimen/card_radius" android:layout_below="@id/card_view1"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/card_title_top" android:layout_marginBottom="@dimen/card_title_bottom" android:layout_marginLeft="@dimen/card_title_left" android:layout_marginRight="@dimen/card_title_right" android:text="@string/card2_title" android:textSize="@dimen/card_title_size" android:gravity="top" /> <TextView android:id="@+id/info_text2" android:layout_marginTop="16dp" android:layout_marginBottom="0dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_width="match_parent" android:layout_height="match_parent"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view3" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="@dimen/card_margin_top" android:layout_marginBottom="@dimen/card_margin_bottom" android:layout_marginLeft="@dimen/card_margin_left" android:layout_marginRight="@dimen/card_margin_right" card_view:cardCornerRadius="@dimen/card_radius" android:layout_below="@id/card_view2"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/card_title_top" android:layout_marginBottom="@dimen/card_title_bottom" android:layout_marginLeft="@dimen/card_title_left" android:layout_marginRight="@dimen/card_title_right" android:text="@string/card3_title" android:textSize="@dimen/card_title_size" android:gravity="top" /> <TextView android:id="@+id/info_text3" android:layout_marginTop="16dp" android:layout_marginBottom="0dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_width="wrap_content" android:layout_height="match_parent"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view1" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="@dimen/card_margin_top" android:layout_marginBottom="@dimen/card_margin_bottom" android:layout_marginLeft="@dimen/card_margin_left" android:layout_marginRight="@dimen/card_margin_right" card_view:cardCornerRadius="@dimen/card_radius"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/card_title_top" android:layout_marginBottom="@dimen/card_title_bottom" android:layout_marginLeft="@dimen/card_title_left" android:layout_marginRight="@dimen/card_title_right" android:text="@string/card4_title" android:textSize="@dimen/card_title_size" android:gravity="top" android:id="@+id/title4" /> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view1" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginTop="@dimen/card_margin_top" android:layout_marginBottom="16dp" android:layout_marginLeft="@dimen/card_margin_left" android:layout_marginRight="@dimen/card_margin_right" card_view:cardCornerRadius="@dimen/card_radius"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/card_title_top" android:layout_marginBottom="@dimen/card_title_bottom" android:layout_marginLeft="@dimen/card_title_left" android:layout_marginRight="@dimen/card_title_right" android:text="@string/card5_title" android:textSize="@dimen/card_title_size" android:gravity="top" android:id="@+id/title5" /> </android.support.v7.widget.CardView> </LinearLayout> </ScrollView> </RelativeLayout> ```