Android centre title with navigation drawer

Question

I currently have a navigation drawer with a toolbar that has a title, i wish to centre this title within the toolbar but the toolbar does not seem to take into consideration the drawer icon as you can see in the following picture.

whereas when i use the same toolbar layout for other activities that are not inside the navigation drawer the title is centred perfectly, as show in this picture:

So how do i get it to take into account this icon?

Here is my layout:

<android.support.design.widget.AppBarLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:theme="@style/Theme.App.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/black"
        app:popupTheme="@style/Theme.App.PopupOverlay">

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

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:text="Title"
                android:textSize="16sp" />

        </RelativeLayout>

    </android.support.v7.widget.Toolbar>

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

Answer 1

You need to understand that Toolbar widget extends ViewGroup class, and it has it's own LayoutParams .

So you do not require RelativeLayout inside Toolbar, and need to add just single line with TextView.

android:layout_gravity="center_horizontal"

And final xml should look like this,

<android.support.design.widget.AppBarLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.App.AppBarOverlay" >

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/black"
    app:popupTheme="@style/Theme.App.PopupOverlay" >

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Title"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:textStyle="bold" />
</android.support.v7.widget.Toolbar>

Answer 2

Remove the RelativeLayout , then change your TextView like this:

<android.support.design.widget.AppBarLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:theme="@style/Theme.App.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/black"
        app:popupTheme="@style/Theme.App.PopupOverlay">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Title"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold"/>

    </android.support.v7.widget.Toolbar>

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

After that call setDisplayShowTitleEnabled , to remove the original title, in the onCreate method of your activity:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);

        ...
    }
}

This is the result obtained:

Answer 3

您需要在 Textview 中将android:layout_width="wrap_content"更改为android:layout_width="match_parent" .....

Answer 4

Hope this will help. try to use this code into your xml , your code with few changes :

<TextView
        android:id="@+id/toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="title"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="21dp"
        android:textStyle="bold"
        android:paddingRight="30dp"
        android:paddingLeft="10dp"
        android:paddingTop="15dp" />

Use this for each activity. This will makes sure that your text would cover the entire space next to the icon and center the text within it.

<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
    android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:paddingTop="15dp"
        android:src="@drawable/ic_keyboard_arrow_left_black_24dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="title"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textSize="21dp"
        android:textStyle="bold"
        android:paddingRight="30dp"
        android:paddingLeft="10dp"
        android:paddingTop="15dp" />

</RelativeLayout>

--------Nav_Drawer layout 

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="@dimen/nav_header_height"
        android:background="@drawable/side_nav_bar"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:theme="@style/ThemeOverlay.AppCompat.Dark" android:orientation="vertical"
        android:gravity="bottom">

        <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            android:src="@android:drawable/sym_def_app_icon" android:id="@+id/imageView" />

        <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
            android:paddingTop="@dimen/nav_header_vertical_spacing" android:text="Android Studio"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:text="android.studio@android.com" android:id="@+id/textView" />

    </LinearLayout>

Answer 5

For me, it did not work either of the answers. Instead, I just put to the TextView a margin start of -40dp which is the icon width of the drawer. And it's working great. Maybe it's useful for someone