Bottom app bar problem with placing icons

问题

I have a problem with bottom app bar, because I want the icons to be displayed to me in the first picture

Instead I got this:

回答1:

You can place a custom layout inside your BottomAppBar. The only thing is that you will need to align items in your custom layout manually.

<com.google.android.material.bottomappbar.BottomAppBar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@android:color/white"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp">

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

        <ImageButton
            android:id="@+id/first_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:drawableTop="@drawable/ic_first_icon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/second_menu_item"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:id="@+id/second_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_second_icon"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toStartOf="@+id/placeholder"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/first_menu_item" />

        <View
            android:id="@+id/placeholder"
            android:layout_width="70dp"
            android:layout_height="0dp"
            android:visibility="invisible"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toStartOf="@+id/third_menu_item"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/second_menu_item"
            app:layout_constraintTop_toTopOf="@+id/first_menu_item" />

        <ImageButton
            android:id="@+id/third_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_third_icon"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toStartOf="@+id/fourth_menu_item"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/placeholder" />

        <ImageButton
            android:id="@+id/fourth_menu_item"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_fourth_icon"
            app:layout_constraintBottom_toBottomOf="@+id/first_menu_item"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@+id/third_menu_item"
            app:layout_constraintTop_toTopOf="@+id/first_menu_item" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>

You will have something like this:

回答2:

The icons in the your BottomAppBar are regular action icons just like the ones in a regular Toolbar. So, you can't really position them like the one in the first picture as they will align to the right.

However, I managed to achieve something that is visually similar by nesting a BottomNavigationView inside a BottomAppBar like this:

    <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:fabAlignmentMode="center"
        app:fabAnimationMode="scale"
        app:hideOnScroll="true"
        app:layout_scrollFlags="scroll|enterAlways">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            app:menu="@menu/bottom_navigation_menu" />

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

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

You might notice that there's an extra android:layout_marginRight="16dp" attribute in the BottomNavigationView. Try to remove it and you will notice that the BottomNavigationView is pushed to the right and it is not aligned properly in the middle. So, by adding the right margin, it will be aligned perfectly.

Here's a tutorial to guide you on implementing the BottomNavigationView: https://code.tutsplus.com/tutorials/how-to-code-a-bottom-navigation-bar-for-an-android-app--cms-30305

Not sure whether this is the right way but it works. Happy coding!

来源：https://stackoverflow.com/questions/54767397/bottom-app-bar-problem-with-placing-icons