how to add floating icon in Bottom Nav Bar?

Question

How i can achive something like this for the center icon in a bottom nav bar?

Answer 1

my idea is to create two floating buttons one will be completely white and little bit bigger than original. you will put both on the same spot at the top of your bottom view and it will look like your background view is clipped.

<View
    android:id="@+id/view"
    android:layout_width="match_parent"
    android:layout_height="64dp"
    android:background="#f12"
    app:layout_constraintBottom_toBottomOf="parent" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:background="@drawable/bkg_circle"
    android:backgroundTint="#fff"
    android:padding="44dp"
    app:layout_constraintHorizontal_bias="0.85"
    app:layout_constraintBottom_toTopOf="@+id/view"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/view" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    android:background="@drawable/bkg_circle"
    android:backgroundTint="@color/colorAccent"
    android:padding="12dp"
    android:src="@drawable/ic_menu_offline"
    app:layout_constraintBottom_toBottomOf="@+id/fab1"
    app:layout_constraintEnd_toEndOf="@+id/fab1"
    app:layout_constraintStart_toStartOf="@+id/fab1"
    app:layout_constraintTop_toTopOf="@+id/fab1" />