Bottom navigation bar - rectangle action button

Question

Using google.android.material :

1. Is it possible to make action button rectangle ?
2. Is it possible to move it a little higher / lower ?

I am talking about the middle circle button.

Answer 1

You can use the app:shapeAppearanceOverlay attribute to achieve a square button and the app:fabCradleVerticalOffset attribute to change the distance of the FAB to the BottomAppBar .

Something like:

  <com.google.android.material.bottomappbar.BottomAppBar
         app:fabCradleVerticalOffset="16dp"
         app:fabCradleRoundedCornerRadius="0dp"
         app:fabCradleMargin="0dp"
          ..>


      <com.google.android.material.floatingactionbutton.FloatingActionButton
          app:shapeAppearanceOverlay="@style/SquareFloatingShapeOVerlay"
          ../>

with:

  <style name="SquareFloatingShapeOVerlay" parent="">
    <item name="cornerSize">0dp</item>
  </style>

If you want a rectangular shape you can use a ExtendedFloatingActionButton instead of the FloatingActionButton .

Something like:

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      app:layout_anchor="@id/bottom_app_bar"
      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlayExtended"
      ../>

with:

  <style name="ShapeAppearanceOverlayExtended" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
  </style>

Note: it requires the version 1.1.0 of the Material Components Library.

Answer 2

Try this: If you are using FloatingActionButton

app:borderWidth="0dp"

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add"
    android:layout_marginRight="20dp"
    app:fabSize="normal"
    android:elevation="@dimen/fab_elevation"
    android:background="#000000"
    app:borderWidth="0dp"
    android:stateListAnimator="@animator/fab_anim"
    android:layout_gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true" />

Hope this will help !

Answer 3

To change the shape of the Floating Action Button, you can create a separate resource file in the drawable folder for eg: shape.xml as-

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

<solid android:color="@color/colorAccent" />

and then in Floating Action Button add the following property:

 android:background="@drawable/shape"

Also, you can use margin to move it higher.

Answer 4

Use elevation attribute to FAB

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/nav_items" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="40dp"
        android:clickable="true"
        app:elevation="8dp"
        app:srcCompat="@android:drawable/ic_input_add" />