Search code examples
androidandroid-constraintlayoutfloating-action-buttonbottomnavigationview

FAB inside BottomNavigationView not visible in some devices

I am trying to add FAB at the center of BottomNavigationView using below code

activity_main.xml

.......
.......  
<android.support.constraint.ConstraintLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">

    <FrameLayout
      android:id="@+id/container"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

    <!--<View
      android:id="@+id/shadowView"
      android:layout_width="wrap_content"
      android:layout_height="130dp"
      android:layout_gravity="bottom"
      android:background="@drawable/ic_shadow"
      app:layout_constraintStart_toStartOf="@id/bottomNav"
      app:layout_constraintEnd_toEndOf="@id/bottomNav"
      app:layout_constraintBottom_toBottomOf="@id/bottomNav" /> -->

    <com.inito.ovulation.view.CurvedBottomNavigationView
      android:layout_width="match_parent"
      android:layout_height="130dp"
      android:clickable="false"
      app:layout_constraintBottom_toBottomOf="@id/bottomNav"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:radius="30dp" />

    <android.support.design.widget.BottomNavigationView
      android:id="@+id/bottomNav"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:theme="@style/Widget.BottomNavigationView"
      app:itemIconTint="@color/bottom_nav_color"
      app:itemTextColor="@color/bottom_nav_color"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:menu="@menu/bottom_nav_menu" />


    <android.support.design.widget.FloatingActionButton
      android:id="@+id/takeTestFab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="20dp"
      app:backgroundTint="@color/test_button_disabled_color"
      app:elevation="8dp"
      app:layout_constraintBottom_toBottomOf="@id/bottomNav"
      app:layout_constraintEnd_toEndOf="@id/bottomNav"
      app:layout_constraintStart_toStartOf="@id/bottomNav"
      app:srcCompat="@drawable/ic_test" />

</android.support.constraint.ConstraintLayout>

.....
.....

bottom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto">
<item
  android:id="@+id/calendar"
  android:icon="@drawable/ic_calendar"
  android:title="@string/calendar" />
<item
  android:id="@+id/action_empty"
  android:checkable="false"
  android:checked="false"
  android:enabled="false"
  android:title=""
  app:showAsAction="always" />
<item
  android:id="@+id/charts"
  android:icon="@drawable/ic_charts"
  android:title="@string/cycles" />
</menu>

In Most Phones UI looks like

enter image description here

But in some phones (Redmi note 8 pro, Motorola, Moto G7 power, One Plus 7 Pro) UI looks like

enter image description here

Why is this happening?

Solution

  • Issue is not there on all the phones. This issue is occurring only on Curved Screen Phones. Reason is if you use BottomNavigationView and FloatingActionButton in the same layout, BottomNavigationView gets the priority and will overlap FloatingActionButton. Moving FloatingActionButton to different layout will resolve this issue. Check below code:

    <android.support.design.widget.CoordinatorLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">

            <android.support.constraint.ConstraintLayout
              android:layout_width="match_parent"
              android:layout_height="match_parent">

                <FrameLayout
                  android:id="@+id/container"
                  android:layout_width="match_parent"
                  android:layout_height="0dp"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="parent" />

                <View
                  android:id="@+id/shadowView"
                  android:layout_width="wrap_content"
                  android:layout_height="180dp"
                  android:layout_gravity="bottom"
                  android:background="@drawable/ic_shadow"
                  app:layout_constraintStart_toStartOf="@id/bottomNav"
                  app:layout_constraintEnd_toEndOf="@id/bottomNav"
                  app:layout_constraintBottom_toBottomOf="@id/bottomNav" />

                <com.inito.ovulation.view.CurvedBottomNavigationView
                  android:layout_width="match_parent"
                  android:layout_height="130dp"
                  android:clickable="false"
                  app:layout_constraintBottom_toBottomOf="@id/bottomNav"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:radius="30dp" />

                <android.support.design.widget.BottomNavigationView
                  android:id="@+id/bottomNav"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:theme="@style/Widget.BottomNavigationView"
                  app:itemIconTint="@color/bottom_nav_color"
                  app:itemTextColor="@color/bottom_nav_color"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  android:layout_marginStart="@dimen/space_normal"
                  android:layout_marginEnd="@dimen/space_normal"
                  app:menu="@menu/bottom_nav_menu"/>

            </android.support.constraint.ConstraintLayout>

            <android.support.design.widget.FloatingActionButton
              android:id="@+id/takeTestFab"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="center_horizontal|bottom"
              android:layout_marginBottom="20dp"
              app:backgroundTint="@color/test_button_disabled_color"
              app:elevation="8dp"
              app:srcCompat="@drawable/ic_test" />
        </android.support.design.widget.CoordinatorLayout>