Setting title in the Bottom App Bar not allowed

Question

I have a main activity in my app with the new Bottom App Bar from the Material Design Components. On User interaction, I replace different fragments.

In order to make the User aware of their present position inside the app, I decided to the set the title of the Bottom App Bar same as that of the fragment. But, I was unable to set the title and on seeing the implementation I found that "Bottom App Bar cannot have title".

I wanted to know how should I make the User aware of his position inside the app in this scenario or if there is any way to set the title for the Bottom App Bar.

looks like they are suggesting to use a regular toolbar at the top to display the title https://material.io/design/components/app-bars-bottom.html — denvercoder9, Jul 11 '18 at 10:13

score 14 · Answer 1 · edited Dec 12 '18 at 07:52

Yesss its true that we can't use the title in BottomApp Bar because it is not convenient in some case where the Floating Button may in Center of BottomApp Bar.

But your problem is genuine, we can't have app bar (even if it is bottom) we need to have a title for that.

Hence I solved it by (old times) compound layout.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <include layout="@layout/content_main" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="end"
        app:backgroundTint="@color/colorPrimaryDark">

        <!-- Here is the magic happens -->

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/your_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textColor="#fff"
                android:layout_centerInParent="true"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Title"/>

        </RelativeLayout>

    </com.google.android.material.bottomappbar.BottomAppBar>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        app:layout_insetEdge="right"
        app:rippleColor="@color/colorPrimary"
        android:src="@drawable/ic_menu_24"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

In above implementation I set the app:fabAlignmentMode="end" so that we can have neat space for title.

And good thing we this approach is that you can customize your title to any extent using custom fonts, colors.

Output of above implementation :

I hope this solves your problem.

Setting title in the Bottom App Bar not allowed

1 Answers1