Center title in AppBarLayout with MaterialToolbar

user_902358 0
Viewed 2258

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?

android-appbarlayout android-toolbar material-design android
3 Answers
user_28107260

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:result

user_129693680

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>

enter image description here

user_160003460
Related