Center title in AppBarLayout with MaterialToolbar

Question

I try to center the text in my toolbar. I use AppBarLayout and MaterialToolbar, as suggested in Material Design.

I tried everything I found on StackOverflow to center the title, but nothing seemed to work.

This is my toolbar:

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        style="@style/CenteredToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize" />

</com.google.android.material.appbar.AppBarLayout>

And CenteredToolbar is my custom style where I tried to center the title:

<style name="CenteredToolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="android:gravity">center_horizontal</item>
</style>

This doesn't work, however.

Any suggestions on what I can do to center the title?

Does this answer your question? [Android: How to Center title in ToolBar](https://stackoverflow.com/questions/29443604/android-how-to-center-title-in-toolbar) — Mostafa Soliman, May 11 '20 at 11:18
No it does not. Placing a TextView into the MaterialToolbar removes the text style, and I lose functionality like setting the title according to the selected tab on a bottom navigation (with `setupActionBarWithNavController(navController, appBarConfiguration)`. — Terry, May 11 '20 at 11:26
Try using foregroundGravity instead of gravity in your style or directly in your xml layout file. — lukger, May 11 '20 at 11:37

score 2 · Answer 1 · answered Oct 15 '21 at 19:52

2

I shared my answer for this here. From com.google.android.material:material:1.4.0 there's app:titleCentered="true"

https://stackoverflow.com/a/69589951/2810726

answered Oct 15 '21 at 19:52

Mbuodile Obiosio

1,463
1
15
19

score 1 · Answer 2 · answered May 11 '20 at 11:35

Unfortunately I have find only this method to create a centered title in the toolbar.

Bonus: you will have a complete control of toolbar's UI.

Create a custom layout for using it as toolbar like this.

activity_action_bar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_preference"
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="horizontal">

<TextView
    android:id="@+id/actionbar_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:maxLines="1"
    android:clickable="false"
    android:focusable="false"
    android:longClickable="false"
    android:fontFamily="@font/lato"
    android:textStyle="bold"
    android:textSize="20sp"
    android:textColor="@color/colorTextMain" />

</LinearLayout>

In your interface layout XML include toolbar like this.

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

Now in the class where you setContentView with the previous interface layout do this.

    setContentView(R.layout.activity_interface);
    // create and define a custom action bar
    View view = getLayoutInflater().inflate(R.layout.activity_action_bar, null);
    ActionBar.LayoutParams params = new ActionBar.LayoutParams(
            ActionBar.LayoutParams.WRAP_CONTENT,
            ActionBar.LayoutParams.MATCH_PARENT,
            Gravity.CENTER);
    TextView Title = view.findViewById(R.id.actionbar_title);
    Title.setText(getString(R.string.about));
    getSupportActionBar().setCustomView(view,params);
    getSupportActionBar().setDisplayShowCustomEnabled(true); // show custom title
    getSupportActionBar().setDisplayShowTitleEnabled(false); // hide the default title
    getSupportActionBar().setElevation(0);
    getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_back);
    getSupportActionBar().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.colorPrimary))); // set background

This will give you a full management of the toolbar, such as centered title or custom UI.

Result:

I am still having the same problems with centering the text in a material toolbar. Material Toolbar does stupid things when you only display one of the edge accessories (up nav/overflow menu). Can't believe Google have still not addressed this. — angryITguy, Sep 14 '21 at 08:09
@angryITguy Their move were simple: they deprecated and not suggesting anymore the usage of nav menu. — gcantoni, Sep 14 '21 at 11:36
@angryITguy this is already provided https://stackoverflow.com/a/69589962/2810726 — Mbuodile Obiosio, Jan 08 '22 at 00:46

Tarique Anowar · Answer 3 · 2021-11-06T18:06:46.640

0

This is how I have solved the problem. Works fine for me. I used material design theme.

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        style="@style/Widget.MaterialComponents.Toolbar.Surface"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:menu="@menu/top_app_bar"
        app:navigationIcon="@drawable/ic_baseline_arrow_back_24">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:textAppearance="?attr/textAppearanceHeadline6"
            android:text="Manali" />
    </com.google.android.material.appbar.MaterialToolbar>

</com.google.android.material.appbar.AppBarLayout>

edited Nov 06 '21 at 18:06

answered Jul 28 '21 at 20:57

Tarique Anowar

122
8

Looks nice See the demo. – Tarique Anowar Jul 31 '21 at 19:20
It's not actually centered. The issue is also when you display up-nav on the left and hide overflow menu. Developers need to centre the text independently of these extra bits – angryITguy Sep 14 '21 at 08:10
@angryITguy, you should give different solution because I didn't find any other. Just using this solution in all of my projects. – Tarique Anowar Sep 21 '21 at 02:37
i would, but i dont have time to invest in that right now. But it's important for SO users to know that it did not centre. (I was using Android 8.1 at the time. Subsequent version may differ.) – angryITguy Sep 21 '21 at 03:37

Center title in AppBarLayout with MaterialToolbar

3 Answers3