Menu
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>
879
The button should be placed in the bottom right corner of the screen. The recommended margin for the bottom is 16dp for phones and 24dp for tablets. In the example above, 16dp was used. The actual drawable size should be 24dp according to the Google design specs.
Use Wrap() widget to add multiple floating action buttons.
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.
86
try this:
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
<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">
<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>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="10dp">
<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>
</RelativeLayout>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
