New Bottom Layout from Google

Question

First of all, I am sorry to ask a question like this but after I downloaded latest Google IO app,

I am just loving the bottom Layout as shown in the following screenshot

Being new to android development, I have no clue where to start, Any idea how to achieve this bottom Layout with circle star in XML? Does anyone know what this design is called?

Answer 1

You can use the new Material Components for Android and the BottomAppBar component.

Use something like:

 <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_gravity="bottom"
      app:fabCradleMargin="8dp"
      app:fabCradleRoundedCornerRadius="8dp"
      app:fabCradleVerticalOffset="0dp"
      ... />

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      app:layout_anchor="@id/bar"
      ../>

You have to use these attributes:

• fabCradleMargin attribute. It increases or decreases the distance between the FloatingActionButton and the BottomAppBar
• fabCradleRoundedCornerRadius attribute. It specifies the roundness of the corner around the cutout

OLD SUPPORT LIBRARY

With the Support Library 28.0.0, the Design Library contains the BottomAppBar.

You can use

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

You can customize the component using these attributes:

• app:fabAlignmentMode: Declares the position of the FAB which has been attached to the bottom app bar. This can be either end or center

• app:fabCradleVerticalOffset: Declares the vertical offset to be used for the attached fab. By default this is 0dp.

• app:backgroundTint: Used to apply a tint to the background of the view.

Also you you can attach a fab by using app:layout_anchor on the FAB component which you wish to attach, using the ID of the bottom app bar.