How can I add the new "Floating Action Button" between two widgets/layouts
AndroidAndroid CoordinatorlayoutFloating Action-ButtonAndroid Problem Overview
I guess you have seen the new Android design guidelines, with the new "Floating Action Button" a.k.a "FAB"
For instance this pink button:
My question sounds stupid, and I have already tried a lot of things, but what is the best way to put this button at the intersection of two layouts?
In the above exemple, this button is perfectly placed between what we can imagine to be an ImageView and a relativeLayout.
I have already tried a lot of tweaks, but I am convinced there is a proper way to do it.
Android Solutions
Solution 1 - Android
Best practice:
- Add
compile 'com.android.support:design:25.0.1'to gradle file - Use
CoordinatorLayoutas root view. - Add
layout_anchorto the FAB and set it to the top view - Add
layout_anchorGravityto 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>
Solution 2 - Android
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>
Solution 3 - Android
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.
Edit With the new Support Design Library you can implement it like in this example: https://github.com/chrisbanes/cheesesquare
Solution 4 - Android
With AppCompat 22, the FAB is supported for older devices.
Add the new support library in your build.gradle(app):
compile 'com.android.support:design:22.2.0'
Then you can use it in your xml:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@android:drawable/ic_menu_more"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
To use elevation and pressedTranslationZ properties, namespace app is needed, so add this namespace to your layout:
xmlns:app="http://schemas.android.com/apk/res-auto"
Solution 5 - Android
Now it is part of official Design Support Library.
In your gradle:
compile 'com.android.support:design:22.2.0'
http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html
Solution 6 - Android
Try this library (javadoc is here), min API level is 7:
dependencies {
compile 'com.shamanland:fab:0.0.8'
}
It provides single widget with ability to customize it via Theme, xml or java-code.
It's very simple to use. There are available normal and mini implementation according to Promoted Actions pattern.
<com.shamanland.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_action_my"
app:floatingActionButtonColor="@color/my_fab_color"
app:floatingActionButtonSize="mini"
/>
Try to compile the demo app. There is exhaustive example: light and dark themes, using with ListView, align between two Views.
Solution 7 - Android
Here is one aditional free Floating Action Button library for Android. It has many customizations and requires SDK version 9 and higher
dependencies {
compile 'com.scalified:fab:1.1.2'
}
Solution 8 - Android
Keep it Simple Adding Floating Action Button using TextView by giving rounded xml background.
-
Add compile
com.android.support:design:23.1.1to gradle file -
Use CoordinatorLayout as root view.
-
Before Ending the CoordinatorLayout introduce a textView.
-
Inside Drawable draw a circle.
Circle Xml is
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="@color/colorPrimary"/>
<size
android:width="30dp"
android:height="30dp"/>
</shape>
Layout xml is
<?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"
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:weightSum="5"
>
<RelativeLayout
android:id="@+id/viewA"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1.6"
android:background="@drawable/contact_bg"
android:gravity="center_horizontal|center_vertical"
>
</RelativeLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="3.4"
android:orientation="vertical"
android:padding="16dp"
android:weightSum="10"
>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:weightSum="4"
android:orientation="horizontal"
>
<TextView
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Name"
android:textSize="22dp"
android:textColor="@android:color/black"
android:padding="3dp"
/>
<TextView
android:id="@+id/name"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:text="Ritesh Kumar Singh"
android:singleLine="true"
android:textSize="22dp"
android:textColor="@android:color/black"
android:padding="3dp"
/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:weightSum="4"
android:orientation="horizontal"
>
<TextView
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Phone"
android:textSize="22dp"
android:textColor="@android:color/black"
android:padding="3dp"
/>
<TextView
android:id="@+id/number"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:text="8283001122"
android:textSize="22dp"
android:textColor="@android:color/black"
android:singleLine="true"
android:padding="3dp"
/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:weightSum="4"
android:orientation="horizontal"
>
<TextView
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Email"
android:textSize="22dp"
android:textColor="@android:color/black"
android:padding="3dp"
/>
<TextView
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:text="[email protected]"
android:textSize="22dp"
android:singleLine="true"
android:textColor="@android:color/black"
android:padding="3dp"
/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:weightSum="4"
android:orientation="horizontal"
>
<TextView
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="City"
android:textSize="22dp"
android:textColor="@android:color/black"
android:padding="3dp"
/>
<TextView
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:text="Panchkula"
android:textSize="22dp"
android:textColor="@android:color/black"
android:singleLine="true"
android:padding="3dp"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:id="@+id/floating"
android:transitionName="@string/transition_name_circle"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="16dp"
android:clickable="false"
android:background="@drawable/circle"
android:elevation="10dp"
android:text="R"
android:textSize="40dp"
android:gravity="center"
android:textColor="@android:color/black"
app:layout_anchor="@id/viewA"
app:layout_anchorGravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
Solution 9 - Android
Add this to your gradle file
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.0'
compile 'com.android.support:design:23.0.1'
}
This to your activity_main.xml
<android.support.design.widget.CoordinatorLayout
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/viewOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.6"
android:background="@android:color/holo_blue_light"
android:orientation="horizontal"/>
<LinearLayout
android:id="@+id/viewTwo"
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/floatingButton"
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/viewOne"
app:layout_anchorGravity="bottom|right|end"
app:backgroundTint="#FF0000"
app:rippleColor="#FFF" />
</android.support.design.widget.CoordinatorLayout>
You can find the full example with android studio project to download at http://www.ahotbrew.com/android-floating-action-button/
Solution 10 - Android
here is working code.
i use appBarLayout to anchor my floatingActionButton. hope this might helpful.
XML CODE.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="@+id/toolbar"
app:titleEnabled="true"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
android:id="@+id/collapsingbar"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
android:id="@+id/toolbarItemDetailsView"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.rktech.myshoplist.Item_details_views">
<RelativeLayout
android:orientation="vertical"
android:focusableInTouchMode="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Put Image here -->
<ImageView
android:visibility="gone"
android:layout_marginTop="56dp"
android:layout_width="match_parent"
android:layout_height="230dp"
android:scaleType="centerCrop"
android:src="@drawable/third" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardMaxElevation="6dp"
app:cardUseCompatPadding="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:padding="3dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/txtDetailItemTitle"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="Title" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:id="@+id/txtDetailItemSeller"
style="@style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Shope Name" />
<TextView
android:id="@+id/txtDetailItemDate"
style="@style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:gravity="right"
android:text="Date" />
</LinearLayout>
<TextView
android:id="@+id/txtDetailItemDescription"
style="@style/TextAppearance.AppCompat.Medium"
android:layout_width="match_parent"
android:minLines="5"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginTop="16dp"
android:text="description" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="horizontal">
<TextView
android:id="@+id/txtDetailItemQty"
style="@style/TextAppearance.AppCompat.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:text="Qunatity" />
<TextView
android:id="@+id/txtDetailItemMessure"
style="@style/TextAppearance.AppCompat.Medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:gravity="right"
android:text="Messure in Gram" />
</LinearLayout>
<TextView
android:id="@+id/txtDetailItemPrice"
style="@style/TextAppearance.AppCompat.Headline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="4dp"
android:layout_weight="1"
android:gravity="right"
android:text="Price" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:fabSize="normal"
app:layout_anchorGravity="bottom|right|end"
android:layout_marginEnd="@dimen/_6sdp"
android:src="@drawable/ic_done_black_24dp"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
Now if you paste above code. you will see following result on your device.
