Bottom app bar problem with placing icons
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: