[英]How to add floating action button on top of scrollview
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:这是xml文件:
<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>
Later children in a RelativeLayout
tend to float over earlier children in a RelativeLayout
.在后面的孩子
RelativeLayout
倾向于早期儿童漂浮在一个RelativeLayout
。
(I say "tend to" because Android 5.0's elevation
stuff also plays a role, and the relationship between them is ill-defined) (我说“倾向于”是因为 Android 5.0 的
elevation
东西也起作用了,它们之间的关系是不明确的)
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.所以,有一个浮动的操作按钮(FAB)漂浮在
ScrollView
中RelativeLayout
,请确保ScrollView
之后它首先定义的XML,与FAB。 This will not affect the X/Y rules, but it should have the FAB appear over the ScrollView
on the Z axis.这不会影响 X/Y 规则,但它应该让 FAB 出现在 Z 轴上的
ScrollView
上。
Another possibility, if you are only supporting Android 5.0+, would be to use android:elevation
itself to raise the FAB.另一种可能性,如果您只支持 Android 5.0+,将使用
android:elevation
本身来提高 FAB。
try this:尝试这个:
android:layout_alignParentRight="true" android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"机器人:layout_alignParentBottom =“真”
<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>
Relative Layout as base.相对布局作为基础。 Within that a Scroll View, then the Floating Action Button (with alignParent Right and Bottom set to true).
在那个滚动视图中,然后是浮动操作按钮(将 alignParent Right 和 Bottom 设置为 true)。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="Your content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="@drawable/ic_add"
android:layout_margin="16dp"/>
</RelativeLayout>
BR Matthias BR马蒂亚斯
You can use android.support.design.widget.CoordinatorLayout
as parent layout.您可以使用
android.support.design.widget.CoordinatorLayout
作为父布局。 Make two xml one in which you can set scrollbar or list.制作两个 xml 一个,您可以在其中设置滚动条或列表。 Other is parent container who hold the entire info with your
FloatingActionButton
.另一个是使用您的
FloatingActionButton
保存整个信息的父容器。
activity_main.xml
活动_main.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:backgroundTint="@color/colorAccent"
app:pressedTranslationZ="12dp"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_add" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml
content_main.xml
Here you can put your ScrollBar.你可以在这里放置你的滚动条。 Its pretty easy.
它很容易。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:gravity="center"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context=".MainActivity">
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.