FloatingActionButton on top of action bar

Question

I'm trying to put a floatingActionButton on top of an actionBar, is it possible? and how can i do it?

Below you will find my current XML:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listframe">

        <ImageView
            android:id="@+id/arrowTopRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:layout_marginTop="70dp"
            android:layout_marginRight="70dp"
            android:src="@mipmap/cursor" />

        <TextView
            android:id="@+id/textNoData"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:layout_marginBottom="240dp"
            android:layout_marginRight="80dp"
            android:layout_marginLeft="80dp"
            android:layout_gravity="center_horizontal"
            android:text="@string/empty_list_of_codes" />

        <ImageView
            android:id="@+id/keyBlurry"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:src="@mipmap/keyblurry"
            android:scaleType="center" />

        <ImageView
            android:id="@+id/LogoDown"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="40dp"
            android:layout_marginRight="40dp"
            android:src="@mipmap/logoblack" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/buttonAddLocation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|end"
            android:layout_margin="16dp"
            app:maxImageSize="56dp"
            android:elevation="8dp"
            app:srcCompat="@mipmap/addlocation" />

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:id="@+id/list"/>

</FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

And in the mail class, I'm adding my actionBar programatically:

actionBar = ((MainActivity)currentActivity).getSupportActionBar();
actionBar.setTitle(R.string.main_title);

I tried playing with the position of my floatingButton but it ends up behind the actionBar. Any help would be really appreciated!

Answer 1

1. Stop using default ActionBar, use a Toolbar instead.
2. Place a FloatingActionButton over the Toolbar in your layout.xml.

Below is just for general example. Some details should differ and depend on your actual situation.

Modify themes.xml from:

<!-- Base application theme. -->
<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

to:

<!-- Base application theme. -->
<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.NoActionBar">

layout/activity_main.xml:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:background="@color/purple_200"
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="150dp"
        android:src="@android:drawable/ic_input_add"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}