Search code examples
androidlayoutmaterial-designfloating-action-buttonmaterial-components-android

New Bottom Layout from Google

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

enter image description here

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?

Solution

  • 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"
      ../>

    enter image description here

    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

    enter image description here

    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">

    enter image description here

    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.