CODEWITHSUNDEEP
androidandroid-layoutmaterial-design
DolDurma
DolDurma

Reputation: 17279

Android make overlaping FloatingActionButton on BottomNavigation

I would like to design this layout on my project:

enter image description here

as many googleing AFIAK is some library to can design that on Android but I can't find it, I take this screen shot from Android material website. Can anybody help me to design that? thanks in advance

Upvotes: 1

Views: 61

Answers (1)

Mauker
Mauker

Reputation: 11487

At the bottom of the material design page there's a link on how you can implement that on Android, Flutter, iOS, etc.

As for Android, you'll have to use the BottomAppBar widget to achieve what you want. You can also read more about it on the docs.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Other components and views -->

  <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:navigationIcon="@drawable/ic_menu_24"/>

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

</android.support.design.widget.CoordinatorLayout>

Taken from here.

You can change the FAB position by using the method setAnchorId(int) with the following parameters:

Alternatively you can set that in the XML using the app:layout_anchor attribute.

P.S.: As stated on the docs, to change the BottomAppBar background use the app:backgroundTint attribute instead of the default android:background.

Upvotes: 2

Related Questions