How to Add the New "Floating Action Button" Between Two Widgets/Layouts

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_anchorto 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>

Getting a Floating Action button between two layouts which already has elevation

Set the Floating Action button elevation from the app namespace not android:

    app:elevation="20dp"

not:

    android:elevation="20dp"

By the way, android material design recommends that the FAB be at 6dp elevation
https://material.google.com/material-design/elevation-shadows.html

Position two floating action button in Flutter

Check the below code and screenshot may be this will help you :

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
              child: Container(
                width: MediaQuery.of(context).size.width,
                color: Colors.red,
                child: Align(
                  alignment: Alignment.topLeft,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      FloatingActionButton(onPressed: (){},child: Icon(Icons.add),),

                    ],
                  ),
                ),
              )
          ),
          Expanded(child: Container(
              width: MediaQuery.of(context).size.width,
              color: Colors.green,
              child: Text('Center',textAlign: TextAlign.center,)
          )),
          Expanded(
              child: Container(
                width: MediaQuery.of(context).size.width,
                color: Colors.red,
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      FloatingActionButton(onPressed: (){},child: Icon(Icons.add),),
                    ],
                  ),
                ),
              )
          ),

        ],
      ),
    );
  }

can't put the floating action button in the middle of two layouts

You could use AppBarLayout too instead of these LinearLayouts btw:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/layout_upper"
        android:layout_gravity="center"
        android:layout_margin="16dp"
        android:layout_marginBottom="-32dp"
        android:elevation="15dp"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/layout_upper"
        app:layout_anchorGravity="center|bottom" />

How to Make Two Floating Action Button in Flutter?

You can use the flutter_speed_dial package: https://pub.dartlang.org/packages/flutter_speed_dial

On the link above have a example showing how to use it. You must use SpeedDial class and on children[] you can add some buttons with SpeedDialChild. The sample below shows 2 FABs.

Example using it:

Widget _getFAB() {
        return SpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22),
          backgroundColor: Color(0xFF801E48),
          visible: true,
          curve: Curves.bounceIn,
          children: [
                // FAB 1
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: () { /* do anything */ },
                label: 'Button 1',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48)),
                // FAB 2
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: () {
                   setState(() {
                      _counter = 0;
                   });
                },
                label: 'Button 2',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48))
          ],
        );
  }

Result:

FAB between layouts

Your FloatingActionButton is inside a LinearLayout. For the layout_anchor* attributes to work, it needs to be a direct child of the CoordinatorLayout.

Simply move the FloatingActionButton element to after the closing LinearLayout tag.

---

Related Topics