CODEWITHSUNDEEP
androidxml
aejsi5
aejsi5

Reputation: 147

Android: Space between BottomAppBar and BottomNavView

I'm very new to Android development. I want to have 4 menu buttons plus one floating action button in my bottom navigation.

This is my Layout.xml

<androidx.coordinatorlayout.widget.CoordinatorLayout
            android:id="@+id/container_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" android:background="@color/background">

        <com.google.android.material.bottomappbar.BottomAppBar
                android:id="@+id/bottomAppBar"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_gravity="bottom"
                style="@style/Widget.MaterialComponents.BottomAppBar.Colored"
                app:backgroundTint="@color/white"
                app:fabCradleMargin="10dp"
                app:fabCradleVerticalOffset="5dp"
                app:fabCradleRoundedCornerRadius="32dp"
                app:hideOnScroll="true"
        >
            <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/bottomNavView"
                    app:labelVisibilityMode="unlabeled"
                    app:menu="@menu/menu_action_bar"
                    app:itemIconSize="28dp" app:elevation="10dp">

            </com.google.android.material.bottomnavigation.BottomNavigationView>

        </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/bottomAppBar"
                android:src="@drawable/ic_camera"
        >
        </com.google.android.material.floatingactionbutton.FloatingActionButton>
        
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

This looks pretty much the way it should but there is a space between the bottomAppBar and the bottomNavigationView:

enter image description here

I don't find any padding or margin-properties. Does anybody know how to get rid of this space?

Upvotes: 1

Views: 243

Answers (1)

Rainbow_62
Rainbow_62

Reputation: 1297

Change contentInset to remove that extra space:

<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"
        android:contentInsetLeft="0dp"
        android:contentInsetStart="0dp"
        app:contentInsetLeft="0dp"
        app:contentInsetStart="0dp"
        ...

Upvotes: 2

Related Questions