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.

Answer 2

I believe it's the BottomAppBar, coming in support library 28.0.0. You can read more here: https://medium.com/@lupajz/the-place-for-bottomappbar-31e0db8f70b1

Answer 3

App bars: bottom

Bottom app bars provide access to a bottom navigation drawer and up to four actions, including the floating action button.

Bottom app bars can contain actions that apply to the context of the current screen. They include a navigation menu control on the far left and a floating action button (when one is present). If included in a bottom app bar, an overflow menu control is placed at the end of other actions.

Informações enter link description here

<android.support.design.widget.FloatingActionButton
    android:id="@+id/FloatingActionButtonAddEmp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    app:srcCompat="@drawable/ic_save_black_24px"
    app:layout_anchor="@+id/bottom_appbar"/>

<android.support.design.bottomappbar.BottomAppBar
    android:id="@+id/bottom_appbar"
    android:elevation="4dp"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:fabAttached="true"
    app:backgroundTint="@color/io15_grey"/>