0

I have the following situation: I have an app with one activity and many fragments. The fragments are swapped in and out using the NavHostFragment in the activity layout. The common views that all fragments are sharing (e.g. CoordinatorLayout , AppBarLayout, CollapsingToolbar, Toolbar etc.) are also located in the activity layout. Some of the fragment layouts has views like RecyclerView and FloatingActionBar.

This is how it looks like:

enter image description here

In the .gif file, you can see that FloatingActionButton is behind the BottomNavigationBar. Only when the user scrolls down, the FloatingActionButton is shown completely to the user. What I want is that they should be able to see the button completely even when they are not scrolling down. (Note that the RecyclerView has no items because I wanted to keep the focus on the button. The behavior of the button is the same with items.)

This is how my activity_main.xml looks like :

<layout 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">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        tools:openDrawer="start">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.coordinatorlayout.widget.CoordinatorLayout
                android:id="@+id/coordinator_layout"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:fitsSystemWindows="true"
                app:layout_constraintBottom_toTopOf="@id/bottom_nav_view"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.appbar.AppBarLayout
                    android:id="@+id/app_bar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fitsSystemWindows="true"
                    android:theme="@style/Theme.AndroidApp.AppBarOverlay">

                    <com.google.android.material.appbar.CollapsingToolbarLayout
                        android:id="@+id/toolbar_layout"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        app:layout_scrollFlags="scroll|snap"
                        app:toolbarId="@id/toolbar">

                        <androidx.appcompat.widget.Toolbar
                            android:id="@+id/toolbar"
                            style="@style/Widget.MaterialComponents.Toolbar.Primary"
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            app:contentInsetStart="0dp"
                            app:layout_collapseMode="parallax">

                            <TextView
                                android:layout_width="match_parent"
                                android:layout_height="?attr/actionBarSize"
                                android:gravity="center"
                                android:text="@string/app_name"
                                android:textAppearance="?attr/textAppearanceHeadline5" />
                        </androidx.appcompat.widget.Toolbar>

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

                <fragment
                    android:id="@+id/myNavHostFragment"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:layout_behavior="@string/appbar_scrolling_view_behavior"
                    app:defaultNavHost="true"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:navGraph="@navigation/navigation" />

            </androidx.coordinatorlayout.widget.CoordinatorLayout>

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_nav_view"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@id/coordinator_layout"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:menu="@menu/bottom_nav_menu" />

        </androidx.constraintlayout.widget.ConstraintLayout>


        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:headerLayout="@layout/nav_header"
            app:itemIconTint="@drawable/drawer_item_color"
            app:itemTextColor="@drawable/drawer_item_color"
            app:menu="@menu/drawer_actions" />

    </androidx.drawerlayout.widget.DrawerLayout>
    
</layout>

And this is the layout of one of my Fragments:

<layout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <variable
            name="viewModel"
            type="com.example.androidapp.ItemsFragmentViewModel"/>

    </data>
    

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/list_items"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/progress_bar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/add_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:src="@drawable/ic_create"
            android:onClick="@{() -> viewModel.create()}"
            app:fabSize="normal"
            app:layout_anchor="@id/list_items"
            app:layout_anchorGravity="bottom|right|end"
            tools:ignore="ContentDescription" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>

Maybe I messed the activity layout a little bit, I do not know. Everything works, only the FloatingActionButton destroys it. Can someone help ?

Thanks in advance

abdullah celik
  • 511
  • 1
  • 6
  • 17
  • Check this question and answers: https://stackoverflow.com/questions/56951487/how-to-use-floating-button-over-vertical-scroll-view – SlothCoding Jan 10 '21 at 17:46

1 Answers1

0

What I want is that they should be able to see the button completely even when they are not scrolling down.

The best approach would be placing the FloatingActionButton inside the CoordinatorLayout of the activity_main layout to achieve the desire effects such as scrolling, hiding or whatever you like.

As already mentioned here: Fragment layout with FAB conflict with CoordinatorLayout


The second part:

All you need to do is to remove the ConstraintLayout in the activity_main layout so that the DrawerLayout will be able to recognize the CoordinatorLayout as its child. After that, use the BottomNavigationView inside the CoordinatorLayout:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/coordinator_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true">

            <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/app_bar_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

                <com.google.android.material.appbar.CollapsingToolbarLayout
                    android:id="@+id/toolbar_layout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:layout_scrollFlags="scroll|snap"
                    app:toolbarId="@id/toolbar">

                    <androidx.appcompat.widget.Toolbar
                        android:id="@+id/toolbar"
                        style="@style/Widget.MaterialComponents.Toolbar.Primary"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        app:contentInsetStart="0dp"
                        app:layout_collapseMode="parallax">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="?attr/actionBarSize"
                            android:gravity="center"
                            android:text="@string/app_name"
                            android:textAppearance="?attr/textAppearanceHeadline5" />
                    </androidx.appcompat.widget.Toolbar>

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

            <fragment
                android:id="@+id/myNavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:defaultNavHost="true"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                app:navGraph="@navigation/navigation" />

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:labelVisibilityMode="unlabeled"
                app:menu="@menu/bottom_nav_menu" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true" />

    </androidx.drawerlayout.widget.DrawerLayout>

</layout>
ʍѳђઽ૯ท
  • 16,646
  • 7
  • 53
  • 108