Can't click on bottom half of FAB button(combine with CustomBottomNavigationBar)

Question

I created a custom bottom navigation bar (following this suggestion:https://stackoverflow.com/a/53865195/7669960) The layout is showed as i expected but i still can't click on the bottom half of fab button .

Here is my layout code:

 <RelativeLayout
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.15"
    android:background="@color/grey_background"
    android:orientation="vertical">

    <nvlan.solocoding.exercisetraining.main.CustomBottomNavigationView
        android:id="@+id/custom_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:elevation="0dp"
        app:itemTextColor="@color/bottom_nav_color"
        app:itemIconTint="@color/bottom_nav_color"
        tools:targetApi="lollipop" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        app:backgroundTint="@color/bottom_navigation_pressed"
        android:id="@+id/map_button"
        android:layout_width="@dimen/_48sdp"
        android:layout_height="@dimen/_48sdp"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="@dimen/_15sdp"
        android:clickable="true"
        android:elevation="@dimen/_2sdp"
        android:contentDescription="@string/map"
        android:focusable="true"
        tools:targetApi="lollipop" />
</RelativeLayout>

I am using elevation, clickable but it is still not working . Is there any way of implementing this idea in which I can fully click on the FloatingActionButton?

try switching the components, so the fab is actually above the navigation view — UrbanR, May 26 '21 at 07:35

Narendra_Nath · Accepted Answer · 2021-05-26T12:04:59.413

Design it like this where the <nvlan.solocoding.exercisetraining.main.CustomBottomNavigationView> is in an inner layout. This is usually because when we use a third-party library they might not interact that well when using core android components.

So the safe way to use components such as these would be to keep them wrapped in different layouts such that they are not present in the same layout hierarchy level.

<RelativeLayout
 android:id="@+id/coordinator_layout_outer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 <RelativeLayout
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.15"
    android:background="@color/grey_background"
    android:orientation="vertical">

    <nvlan.solocoding.exercisetraining.main.CustomBottomNavigationView
        android:id="@+id/custom_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:elevation="0dp"
        app:itemTextColor="@color/bottom_nav_color"
        app:itemIconTint="@color/bottom_nav_color"
        tools:targetApi="lollipop" />
</RelativeLayout>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        app:backgroundTint="@color/bottom_navigation_pressed"
        android:id="@+id/map_button"
        android:layout_width="@dimen/_48sdp"
        android:layout_height="@dimen/_48sdp"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="@dimen/_15sdp"
        android:clickable="true"
        android:elevation="@dimen/_2sdp"
        android:contentDescription="@string/map"
        android:focusable="true"
         />

<RelativeLayout>

Btnisme123 · Answer 2 · 2021-05-26T12:12:07.577

After seeing Mr.Narendra_Nath answer , I did this trick and it worked (Put the fab button out side of the relativeLayout-@+id/coordinator_layout", not in the same layout layer as BottomNavigationBar). Maybe because BottomNavigationBar is always on the top layer of the parent's view so when you put another view on the same viewgroup of BottomNavigationBar, it will be put behind BottomNavigationBar. This is my code:

<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"
android:orientation="vertical"
android:background="@color/grey_background">


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.85" />

<RelativeLayout
    app:layout_constraintTop_toTopOf="@id/guideline_text"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.15"
    android:background="@color/grey_background"
    android:orientation="vertical">

    <nvlan.solocoding.exercisetraining.main.CustomBottomNavigationView
        android:id="@+id/custom_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemTextColor="@color/bottom_nav_color"
        app:itemIconTint="@color/bottom_nav_color" />
</RelativeLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
   app:layout_constraintTop_toTopOf="@id/guideline_text"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:backgroundTint="@color/bottom_navigation_pressed"
    android:id="@+id/map_button"
    android:layout_width="@dimen/_48sdp"
    android:layout_height="@dimen/_48sdp"
    android:layout_alignParentTop="true"
    android:layout_centerInParent="true"
    android:layout_marginBottom="@dimen/_15sdp"
    android:clickable="true"
    android:contentDescription="@string/map"
    android:focusable="true" />
</androidx.constraintlayout.widget.ConstraintLayout>

Absolutely. Well done. Thank you for uploading your solution as well. Do consider accepting the answer if it helped you. :) — Narendra_Nath, May 26 '21 at 10:46
@Narendra_Nath Yes , but may you add the full explaination about this . The comment above is only my thought and i am not sure about it , if you can give the full explaination , that will be great — Btnisme123, May 26 '21 at 11:59

Can't click on bottom half of FAB button(combine with CustomBottomNavigationBar)

2 Answers2