I want to have two FloatingActionButtons in my CoordinatorView. But when I try to add margin to the top FloatingActionButton, It applies from end of the view - It should add space between FloatingActionButtons. XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
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.support.design.widget.FloatingActionButton
android:id="@+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/add"
app:elevation="5dp"
app:layout_anchor="@id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginBottom="16dp"
android:src="@drawable/add"
app:elevation="5dp"
app:layout_anchor="@id/wordpackAddButton"
app:layout_anchorGravity="top" />
<ListView
android:id="@+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</android.support.design.widget.CoordinatorLayout>
SOLUTION 1:
Add another View
to make a gap
between two FAB's
. Set the anchor
of View
to top
position of the wordpackAddButton
and set the anchor of importWordpack
to top-right
position of the View
.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
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">
<ListView
android:id="@+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/add"
app:elevation="5dp"
app:layout_anchor="@id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end" />
<View
android:id="@+id/gap"
android:layout_width="16dp"
android:layout_height="16dp"
app:layout_anchor="@id/wordpackAddButton"
app:layout_anchorGravity="top">
</View>
<android.support.design.widget.FloatingActionButton
android:id="@+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:src="@drawable/add"
app:elevation="5dp"
app:layout_anchor="@id/gap"
app:layout_anchorGravity="top|center" />
</android.support.design.widget.CoordinatorLayout>
SOLUTION 2:
Wrap two FAB
into a LinearLayout
and anchor
this layout to the bottom-right
position of ListView
.
Here is an workaround:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_anchor="@id/wordpacks_list"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="16dp"
android:background="@android:color/transparent"
android:clipToPadding="false">
<android.support.design.widget.FloatingActionButton
android:id="@+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:src="@drawable/add"
app:elevation="5dp" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:src="@drawable/add"
app:elevation="5dp" />
</LinearLayout>
<ListView
android:id="@+id/wordpacks_list"
android:layout_width="match_parent"
android:layout_height="match_parent">
</ListView>
</android.support.design.widget.CoordinatorLayout>
OUTPUT:
Add this view after Fab button and change top level fab's layout_anchor to transparent_view.
<View
android:layout_width="8dp"
app:layout_anchor="@id/wordpackAddButton"
app:layout_anchorGravity="top"
app:useCompatPadding="false"
android:layout_gravity="end"
android:background="@android:color/transparent"
android:id="@+id/transparent_view"
android:layout_height="8dp"/>
Hope it helps.
I have faced a similar problem while implementing a FAB Menu. You can solve this problem by wrapping the second FAB in a FrameLayout
like so:
<android.support.design.widget.FloatingActionButton
android:id="@+id/wordpackAddButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchorGravity="bottom|right|end" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="56dp"
app:layout_anchor="@id/wordpackAddButton"
app:layout_anchorGravity="top|right">
<android.support.design.widget.FloatingActionButton
android:id="@+id/importWordpack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:elevation="5dp"
app:layout_anchor="@id/wordpackAddButton" />
</FrameLayout>
This might be a bit of a hacky solution but it is simple and it works. The padding
value of the FrameLayout
is set to 56dp since that is the size of the FAB.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.