1

How to style Toolbar in this style as shown in Material Guidelines for Bottom App Bar?

It's white, has no elevation, has more title top padding than usual etc. I couldn't find any specs for it in Material Guidelines or any theme references in material-components-android.

Screenshot: material design guidelines

ʍѳђઽ૯ท
  • 16,646
  • 7
  • 53
  • 108
alashow
  • 2,735
  • 3
  • 21
  • 47

1 Answers1

0

So, you're trying to achieve that white Toolbar with BottomAppBar together. It's so easy.

To do this, add AppBarLayout with Toolbar in CoordinatorLayout, place the the BottomAppBar and FloatingActionButton into parent CoordinatorLayout and set app:layout_anchor attribute of FloatingActionButton to reference id of BottomAppBar as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/yourwhitebackground"
    app:elevation="0dp">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/yourwhitebackground"
        app:layout_collapseMode="pin"
        app:layout_scrollFlags="scroll|enterAlways"
        />
</android.support.design.widget.AppBarLayout>

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_appbar"
        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/colorPrimary"
        app:fabCradleVerticalOffset="12dp">

    </android.support.design.bottomappbar.BottomAppBar>

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


</android.support.design.widget.CoordinatorLayout>

Read: https://medium.com/@lupajz/the-place-for-bottomappbar-31e0db8f70b1 for more details.

Also, app:elevation might not work so, try this: https://stackoverflow.com/a/45703684/4409113

ʍѳђઽ૯ท
  • 16,646
  • 7
  • 53
  • 108
  • My question is about the toolbar styling, not the FAB. Sorry for the confusion. – alashow Sep 07 '18 at 04:18
  • I have updated the answer. It was confusing at first but now, everything's clear. – ʍѳђઽ૯ท Sep 07 '18 at 06:05
  • I was looking for specs for it, not how to actually add a toolbar with a white background and no elevation. – alashow Sep 07 '18 at 08:09
  • My bad I thought you're looking for the buttombar implementation. that's just a design, just remove the elevation and make it white. Couldn't find any specs for that in material guidelines so, there might be none out there. – ʍѳђઽ૯ท Sep 07 '18 at 09:19
  • @Mohsen Elevation for bottom app bars has been fixed in release 1.1.0 (alpha) – J-me Nov 26 '18 at 14:37