How can I add the new "Floating Action Button" between two widgets/layouts
Best practice:
- Add
compile 'com.android.support:design:25.0.1'
to gradle file - Use
CoordinatorLayout
as root view. - Add
layout_anchor
to the FAB and set it to the top view - Add
layout_anchorGravity
to the FAB and set it to:bottom|right|end
<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"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/viewA" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.6" android:background="@android:color/holo_purple" android:orientation="horizontal"/> <LinearLayout android:id="@+id/viewB" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="0.4" android:background="@android:color/holo_orange_light" android:orientation="horizontal"/> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:clickable="true" android:src="@drawable/ic_done" app:layout_anchor="@id/viewA" app:layout_anchorGravity="bottom|right|end"/></android.support.design.widget.CoordinatorLayout>
Seems like the cleanest way in this example is to:
- Use a RelativeLayout
- Position the 2 adjacent views one below the other
- Align the FAB to the parent right/end and add a right/end margin
- Align the FAB to the bottom of the header view and add a negative margin, half the size of the FAB including shadow
Example adapted from shamanland implementation, use whatever FAB you wish. Assume FAB is 64dp high including shadow:
<?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" android:orientation="vertical"> <View android:id="@+id/header" android:layout_width="match_parent" android:layout_height="120dp" /> <View android:id="@+id/body" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/header" /> <fully.qualified.name.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignBottom="@id/header" android:layout_marginBottom="-32dp" android:layout_marginRight="20dp" /></RelativeLayout>
You can import the sample project of Google in Android Studio by clicking File > Import Sample...
This Sample contains a FloatingActionButton View which inherits from FrameLayout.
EditWith the new Support Design Library you can implement it like in this example: https://github.com/chrisbanes/cheesesquare