Bottom app bar problem with placing icons

Question

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:

Answer 1

Based on @amatkivskiy response i made a version with ConstraintLayout, guideline and style. I really appreciate what you did @amatkivskiy.

First, create your xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
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"
tools:context=".MainActivity">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <!-- Note: A RecyclerView can also be used -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:paddingBottom="100dp">

        <!-- Scrollable content -->

    </androidx.core.widget.NestedScrollView>

    <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:contentInsetRight="0dp"
        app:contentInsetStart="0dp"
        android:backgroundTint="@color/colorPrimary">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="50dp">
            <!--region GuideLine-->
            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/first_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.20" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/second_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.40" />


            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/third_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.60" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/last_guideline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.80" />
            <!--endregion-->

            <!--region icon 1-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/first_guideline"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/first_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:textColor="@android:color/white"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/second_icon_image"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/second_icon_image"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/first_icon_title"
                    tools:ignore="MissingConstraints"
                    app:srcCompat="@drawable/ic_food_selected" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->

            <!--region icon 2-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/second_guideline"
                app:layout_constraintStart_toEndOf="@+id/first_guideline"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/second_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/imageView"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/imageView"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/second_icon_title"
                    app:layout_constraintVertical_chainStyle="packed"
                    tools:ignore="MissingConstraints"
                    app:srcCompat="@drawable/ic_food" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->
            <!--region icon 3-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout2"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@+id/last_guideline"
                app:layout_constraintStart_toStartOf="@+id/third_guideline"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/third_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/third_icon_image"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/third_icon_image"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/third_icon_title"
                    app:layout_constraintVertical_chainStyle="packed"
                    app:srcCompat="@drawable/ic_food"
                    tools:ignore="MissingConstraints" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->

            <!--region icon 4-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/last_guideline"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/last_icon_title"
                    style="@style/Menu.Icon.Title"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:text="@string/menu_icon_shop"
                    app:layout_constraintTop_toBottomOf="@id/last_icon_image"
                    tools:ignore="MissingConstraints" />

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@+id/last_icon_image"
                    style="@style/Menu.Icon.Image"
                    app:layout_constraintBottom_toTopOf="@+id/last_icon_title"
                    app:layout_constraintVertical_chainStyle="packed"
                    app:srcCompat="@drawable/ic_food"
                    tools:ignore="MissingConstraints" />
            </androidx.constraintlayout.widget.ConstraintLayout>
            <!--endregion-->

        </androidx.constraintlayout.widget.ConstraintLayout>

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

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

   </androidx.coordinatorlayout.widget.CoordinatorLayout>
   </androidx.constraintlayout.widget.ConstraintLayout>

Note that in order to change size or position, change the Style so all of them will have the same modification.

Next, you need to add those in your style. Put your theme instead of mine

parent="Theme.ChefJeff"

    <style name="Menu.Icon.Title" parent="Theme.ChefJeff">
    <item name="android:gravity">center</item>
    <item name="android:textSize">12sp</item>
    <item name="layout_constraintVertical_chainStyle">packed</item>
    <item name="layout_constraintBottom_toBottomOf">parent</item>
    <item name="layout_constraintEnd_toEndOf">parent</item>
    <item name="layout_constraintStart_toStartOf">parent</item>
</style>

<style name="Menu.Icon.Image" parent="Theme.ChefJeff">
    <item name="android:layout_width">24dp</item>
    <item name="android:layout_height">24dp</item>
    <item name="android:layout_marginTop">3dp</item>
    <item name="layout_constraintEnd_toEndOf">parent</item>
    <item name="layout_constraintStart_toStartOf">parent</item>
    <item name="layout_constraintTop_toTopOf">parent</item>
    <item name="layout_constraintVertical_chainStyle">packed</item>
</style>

For more details : I used the guideline in order to align my icons and text. You can play with that in order to the percentage that you like. You can even make icon more bigger, remove the text. I feel like with an imageview and a Textview we have more control and it s more easy to custom it.

I did not put the code to control the color when you clic on a item as it depends on your architecture and code style. But you can modify all in kotlin or java at runtime =)

Answer 2

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:src="@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:

Answer 3

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!