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?

Gabriele Mariotti · Accepted Answer · 2019-09-02T18:31:40.270

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.

score 2 · Answer 2 · answered May 03 '18 at 01:19

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

answered May 03 '18 at 01:19

stkent

19,772
14
85
111

1

Thank you, any idea when will the support library 28 be released ? :) – Ali May 03 '18 at 02:34
You can use the alpha version now, and keep an eye on https://developer.android.com/topic/libraries/support-library/revisions?authuser=1 for the full release. No idea when that will be though :/ – stkent May 03 '18 at 03:20
cheer - I am using xamarin so I don't think xamarin has support for 28 alpha yet – Ali May 03 '18 at 03:22

score 0 · Answer 3 · edited Jul 11 '21 at 07:57

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

New Bottom Layout from Google

3 Answers3

Linked

Related