'Floating Action Button is duplicated in fragment

In a project, there was a FloatingActionButton in one of the activities. I attempted to add a Fragment in that activity and move the FAB inside that Fragment. Everything seemed to be OK, however when I tried to display a SnackBar, I noticed there are two FloatingActionButtons instead of one in that area (One of them moving up with SnackBars).

In XML, there's only one FAB but when I run the app, two FABs appear which are on each other until a SnackBar is displayed. I'm trying to find the bug which caused the FAB to be duplicated.

Activity XML:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fl_main_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tb_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:minHeight="?android:attr/actionBarSize"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            local:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <TextView
            android:id="@+id/tv_main_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:textColor="@color/white"
            android:textSize="18sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <fragment
        android:id="@+id/f_main_memory"
        android:name="ir.ali_kh_y.project.fragment.MemoryFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_marginBottom="56dp"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bnv_main_nav"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        app:itemIconTint="@color/bottom_nav_item_color_state"
        app:itemTextColor="@color/bottom_nav_item_color_state"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/bottom_nav"/>
</FrameLayout>

Fragment XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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:id="@+id/cl_memory_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.MemoryFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_memory_memories"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_memory_memories"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ECEFF1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <ImageView
            android:id="@+id/iv_memory_smile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/empty_list"/>

        <TextView
            android:id="@+id/tv_memory_empty"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="8dp"
            android:text="---"
            android:textAlignment="center"
            android:textColor="@color/emptyListContent"
            android:textSize="30dp"
            app:layout_constraintBottom_toTopOf="@+id/iv_memory_smile"
            app:layout_constraintHorizontal_bias="0.504"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_memory_write"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        android:focusable="true"
        app:fabSize="normal"
        app:layout_anchor="@+id/cl_memory_memories"
        app:layout_anchorGravity="left|bottom"
        app:rippleColor="@color/gray"
        app:srcCompat="@drawable/ic_write"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

The code I use in Activity to show Snack Bar:

val snackBar = Snackbar.make(cl_memory_root, "", Snackbar.LENGTH_INDEFINITE)
ViewCompat.setLayoutDirection(snackBar.view, ViewCompat.LAYOUT_DIRECTION_RTL)
snackBar.setAction("") {
   //...
}
snackBar.show()

Solution 1:^[1]

As Mike M mentioned, I was trying to load one Fragment twice, once from the code and once from the XML layout! So I deleted the one in the code and the duplication problem disappeared!

Solution 2:^[2]

<androidx.coordinatorlayout.widget.CoordinatorLayout
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:id="@+id/cl_memory_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff" 
android:clickable="true"
tools:context=".fragment.MemoryFragment">

make background as white and make it clickable in the fragment and voila..

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	raj kavadia

'Floating Action Button is duplicated in fragment

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]