Is it possible to embed the floating action button into the action bar?

Question

I want to get something like this. Is it possible?

The answer to this question is not applicable without an actual header item, which I don't have here. Action bar is not an item I can anchor to, or at least I don't know a way to do that.

Possible duplicate of [How can I add the new "Floating Action Button" between two widgets/layouts](http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts) — Mike M., Jun 16 '16 at 12:07
@MikeM.: well, no, that's not a duplicate. I tried that before posting and it doesn't work without an actual header item that I do not have. Action bar is not a valid referrable item to anchor to, or at least I don't know a way to do that. — Violet Giraffe, Jun 16 '16 at 12:09
@MikeM.: that's because I only did that *after* you flagged it as duplicate :) — Violet Giraffe, Jun 16 '16 at 12:24
Ah, OK. Anyway, you should be able to if you use a `Toolbar`, which you can put in your layout just like any other `View`, and also set it as a support `ActionBar`, if you really need to. — Mike M., Jun 16 '16 at 12:26
@MikeM.: hmm, I'm not familiar with that. I think my action bar came default with `AppCompatActivity` that has a menu. — Violet Giraffe, Jun 16 '16 at 12:29
Yeah, you'll have to change some things. [This post](http://stackoverflow.com/questions/26742420) has some general info. Basically, what you wanna do is change your `Activity`'s theme to not supply the default `ActionBar`, then set your `Toolbar` as the support `ActionBar`. The menu should work the same on its own. In the top answer there, just make sure to `findViewById()` your `Toolbar` before you call `setSupportActionBar()` with it. They omitted that part. — Mike M., Jun 16 '16 at 12:33
@MikeM.: thank you. Would you care to post an answer? I haven't actually placed the FAB where it belongs yet, but I'm sure it will work now. I'm fiddling with the toolbar - couldn't immediately get it to behave. At the moment it's unclear how to place it inside a `CoordinatorLayout` properly. — Violet Giraffe, Jun 16 '16 at 13:16
Nah, it's cool. You can just mark the duplicate as helpful, if ya want, or post your solution when you get it worked out. Thanks, though. Glad it helped, at least a little. I've not done this yet, myself, but I've got a free minute, so I'm gonna play around with it a bit. If I come across anything that's tricky, I'll let ya know, but I would think it should be pretty straightforward. Anyhoo, cheers! — Mike M., Jun 16 '16 at 14:00
@MikeM.: I've got it working. The FAB part was easy, just had a couple hiccups migrating to `Toolbar`. — Violet Giraffe, Jun 16 '16 at 14:50

score 1 · Answer 1 · answered Jun 23 '21 at 05:21

This can be done using a custom toolbar as supportActionBar.

And instead of using layout_anchor to place the FAB, we can constraint it to the tool bar using ConstraintLayout as a root view.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </com.google.android.material.appbar.AppBarLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="64dp"
        android:layout_marginRight="64dp"
        android:src="@drawable/ic_baseline_play_arrow_24"
        app:layout_constraintBottom_toBottomOf="@id/appbar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/appbar" />


</androidx.constraintlayout.widget.ConstraintLayout>

And make sure to use AppTheme with NoActionBar like Theme.MaterialComponents.DayNight.NoActionBar

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Then set supportActionBar in activity:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val toolbar = findViewById<Toolbar>(R.id.toolbar)
    setSupportActionBar(toolbar)
}

Preview:

Asmaa Rashad · Answer 2 · 2016-06-16T12:49:54.230

I have tried a solution but it isn't direct one and hope it will help

in the root coordinate layout create a child empty layout at the top of it and change the background color to be the same color of action bar , then new empty layout will be after action bar directly and it will be shown as part of the action bar and give it proper height as you want .and your code will be like that

Empty layout:

<LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:id="@+id/tst"
                android:background="@android:color/black"
                android:layout_height="50dp"/>

you can increase the height as you want but it is the best height for my device

Floating Actio Button:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/tst"
        app:layout_anchorGravity="top|center"
/>

@Violet Giraffe I hope it will help you . try it and tell me if it works as you want or not — Asmaa Rashad, Jun 16 '16 at 12:51

Is it possible to embed the floating action button into the action bar?

2 Answers2