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?

Answer 1

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>