Android Bottom Navigation with Cut-Out Design

That’s what we will create, so start the fun part step by step.

Step 1: Implement Material Design library
In material design, there is a bottom app bar, so we use that to meet our requirements.

put this in build.gradle (:app)

implementation 'com.google.android.material:material:1.1.0-beta01'

Step 2: Create a menu

create menu file to use in BottomNavigationView

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_home"
        android:title="Home"
        android:icon="@drawable/ic_home_black_24dp"
        />
    <item
        android:id="@+id/action_invisible"
        android:title=""
        android:enabled="false"/>
    <item
        android:id="@+id/action_chat"
        android:title="Chat"
        android:icon="@drawable/ic_chat_black_24dp"
        />
</menu>

here I take 3 menu items and set no title and icon to second item because we want to show cut out in the middle.

Step 3: Create View

<?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"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:fitsSystemWindows="true">
    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/cordinatorBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent">
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginTop="60dp"
            android:paddingBottom="0dp"
            android:theme="@style/Theme.MaterialComponents.Light"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:fabAlignmentMode="center"
            app:fabCradleMargin="10dp"
            app:fabCradleRoundedCornerRadius="25dp"
            app:fabCradleVerticalOffset="0dp">
            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="0dp"
                android:layout_marginEnd="0dp"
                android:background="@android:color/transparent"
                app:labelVisibilityMode="selected"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:menu="@menu/menu_bottom" />
        </com.google.android.material.bottomappbar.BottomAppBar>
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/btnAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_add_black_24dp"
            app:layout_anchor="@id/bottom_bar" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

here we used coordinator layout as root view for out bottom app bar, inside BottomAppBar we inserted BottomNavigationView.

Now the best part, how it shows the cut-out, no need to worry android take care of it, just put a floating action button inside the coordinator layout and add an anchor to BottomAppBar, and it automatically goes to center with a cut out of design.

Here is our result

but there is a problem with shadow, it is not looking good, there is a walkthrough for it, create a transparent drawable and use it as the background instead of transparent color.

Step 4: Add transparently drawable

background_transparent.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
</shape>

Step 5: Put the above created drawable to BottomNavigationView as background.

here is our final code looks like:

<?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"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:fitsSystemWindows="true">
    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/cordinatorBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent">
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginTop="60dp"
            android:paddingBottom="0dp"
            android:theme="@style/Theme.MaterialComponents.Light"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:fabAlignmentMode="center"
            app:fabCradleMargin="10dp"
            app:fabCradleRoundedCornerRadius="25dp"
            app:fabCradleVerticalOffset="0dp">
            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/nav_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="0dp"
                android:layout_marginEnd="0dp"
                android:background="@drawable/background_transparent"
                app:labelVisibilityMode="selected"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:menu="@menu/menu_bottom" />
        </com.google.android.material.bottomappbar.BottomAppBar>
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/btnAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_add_black_24dp"
            app:layout_anchor="@id/bottom_bar" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

That’s all, hope you like it.

You can check out the full project code on Github

The post Android Bottom Navigation with Cut-Out Design appeared first on TechPaliyal.