Why Floating action button Behind the BottomBar

问题

I want the Floating Action Button in the middle of the BottomBar and the front, not on the back, please guide me to solve this problem My layer codes are as follows...

<RelativeLayout 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


<android.support.design.widget.FloatingActionButton
    android:id="@+id/floatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="31dp"
    android:clickable="true"
    android:elevation="0dp"
    app:backgroundTint="@color/colorPrimaryDark"
    app:borderWidth="0dp"
    app:elevation="8dp"
    app:fabSize="normal"
    app:layout_behavior="helpers."
    app:srcCompat="@drawable/ic_add_black_24dp"
    tools:ignore="VectorDrawableCompat" />

<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    app:bb_tabXmlResource="@xml/bottombar_tabs" />

回答1:

Relative layout arrange views one above one so views are arranged by the order you declared in xml

So change your order of your view.

<RelativeLayout 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

<com.roughike.bottombar.BottomBar
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_tabXmlResource="@xml/bottombar_tabs" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="31dp"
android:clickable="true"
android:elevation="0dp"
app:backgroundTint="@color/colorPrimaryDark"
app:borderWidth="0dp"
app:elevation="8dp"
app:fabSize="normal"
app:layout_behavior="helpers."
app:srcCompat="@drawable/ic_add_black_24dp"
tools:ignore="VectorDrawableCompat" />

Hope it helps..!

EDITED

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true">
    <com.roughike.bottombar.BottomBar
        android:id="@+id/bottomBar_"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:bb_tabXmlResource="@xml/bottom_tabs" />
</LinearLayout>

回答2:

Try change the position of FAB to below bottom bar.

<RelativeLayout 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

 <com.roughike.bottombar.BottomBar
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_tabXmlResource="@xml/bottombar_tabs" />



<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="31dp"
android:clickable="true"
android:elevation="0dp"
app:backgroundTint="@color/colorPrimaryDark"
app:borderWidth="0dp"
app:elevation="8dp"
app:fabSize="normal"
app:layout_behavior="helpers."
app:srcCompat="@drawable/ic_add_black_24dp"
tools:ignore="VectorDrawableCompat" />

</RelativeLayout>

Hope this helps.

Also make sure the default elevation of fab less (6) than bottom bar(8) so you need to take care of that too.

来源：https://stackoverflow.com/questions/52026043/why-floating-action-button-behind-the-bottombar

标签

android

floating-action-button