Bottom Navigation with fab

问题

I am currently working with BottomNavigationView and FloatingActionButton. What i want to achieve is this below design:

And what i have tried:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_insetEdge="bottom"
    tools:context=".activity.BottomNavPrimary">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|bottom" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:layout_insetEdge="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_primary"></android.support.design.widget.BottomNavigationView>

</android.support.design.widget.CoordinatorLayout>

回答1:

Your design looks as if you want to use the new BottomAppBar from the MaterialComponents that will fully be release with Android P. Especially if the left icon stands for a kind of side navigation it could be the right navigation element.

However, you have to be aware, that the elements on the left and right of the FAB have a different purpose than a bottom navigation. Instead of being entry points to "primary destinations" in an app, the BottomAppBar is defined as:

A bottom app bar displays navigation and key actions at the bottom of mobile screens.

So it is for page actions (like opening the dashboard or search). More explanation can be found in the design documentation.

I haven't had a chance to implement it yet (because I really needed it with a bottom navigation), but here is the code documentation example:

<android.support.design.widget.CoordinatorLayout
    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">

  <!-- Other components and views -->

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom"
      app:navigationIcon="@drawable/ic_menu_24"/>

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_anchor="@id/bar"/>

</android.support.design.widget.CoordinatorLayout>

So to me, it sounds as if you define your two page menu options and since the FAB is anchored to the bar it will push them to the sides.

The documentation also includes options for the optional FAB cradle that was shown during this year's Google I/O and shows how to handle menu and click handling.

Here is another useful link on how to set up gradle to include the new material components in your project.

回答2:

I used this, to get something similar.

BottomNavigationView + FloatingActionButton

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floating_button"
        style="@style/Widget.MaterialComponents.FloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_margin="16dp"
        app:backgroundTint="@color/colorPrimaryLight"
        app:elevation="@dimen/padding_10"
        app:layout_constraintBottom_toTopOf="@id/navigation"
        app:layout_constraintLeft_toRightOf="@id/navigation"
        app:layout_constraintRight_toLeftOf="@id/navigation"
        app:layout_constraintTop_toBottomOf="@id/navigation"
        app:layout_constraintTop_toTopOf="@id/navigation"
        app:layout_insetEdge="bottom"
        app:srcCompat="@drawable/ic_add_black_24dp"
        app:tint="@color/colorPrimary" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimaryDark"
        android:visibility="visible"
        app:itemIconTint="@drawable/bottom_navigation_icons"
        app:itemTextColor="@drawable/bottom_navigation_icons"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

回答3:

My solution simple and cool.

Parent layout must be a CoordinatorLayout and use BottomAppBar with FloatingActionButton as you can see below

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

       <-- your other views -->

    <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:backgroundTint="@color/colorPrimary">

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

            <RelativeLayout
                    android:id="@+id/homePage"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_percent="0.4">

                <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:src="@drawable/your_drawable"
                        android:padding="@dimen/small_margin"
                        app:tint="@color/white" />
            </RelativeLayout>

            <RelativeLayout
                    android:id="@+id/profile"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintWidth_percent="0.4">

                <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="wrap_content"
                        android:padding="@dimen/small_margin"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:src="@drawable/your_drawable" />
            </RelativeLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/categories"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_drawable"
            app:backgroundTint="@color/colorPrimary"
            app:layout_anchor="@id/navigation"
            app:tint="@android:color/white" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Result:

回答4:

You could wrap your BottomNavigationView and your FloatingActionButton in a ConstraintLayout and use the following constraints on the FloatingActionButton:

app:layout_constraintTop_toBottomOf="@id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="@id/bottomNavPrimary"  
app:layout_constraintLeft_toRightOf="@id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="@id/bottomNavPrimary"

This will center your FloatingActionButton vertically and horizontally relative to your BottomnavigationView

I hope that is what you asked for.

Final code would look something like this:

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/bottomNavPrimary"
        app:layout_constraintBottom_toTopOf="@id/bottomNavPrimary"
        app:layout_constraintLeft_toRightOf="@id/bottomNavPrimary"
        app:layout_constraintRight_toLeftOf="@id/bottomNavPrimary"/>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toTopOf="parent"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_primary" />

</android.support.constraint.ConstraintLayout>

回答5:

I think you can do this with bottomAppBar and embed some button inside that like below

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

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:fabAttached="true"
        app:fabCradleDiameter="8dp"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            <ImageButton
                android:id="@+id/btnReport"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"
                android:src="@drawable/ic_play"
                android:layout_weight="1"
                android:paddingRight="20dp"
                />

            <ImageButton
                android:id="@+id/btnPlayWords"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:background="@android:color/transparent"
                android:src="@drawable/ic_show_chart"
                android:layout_weight="1"
                android:paddingLeft="20dp"
                />
        </LinearLayout>

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabAddWord"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

来源：https://stackoverflow.com/questions/51094118/bottom-navigation-with-fab

标签

android

android-layout

android-coordinatorlayout

floating-action-button

bottomnavigationview