How to get title at center of Toolbar

Question

I am trying to get the title of the Collapsed Toolbar to the center. But there seems to be some bug in the basic layout itself. The title has an offset for some reason. Unable to figure out how to fix this. Also there seems to be no property to apply negative margin/padding to the collapsedTitle.

<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinator_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true"
    android:theme="@style/XXXXAppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:collapsedTitleGravity="center"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleGravity="top|center_horizontal"
        app:expandedTitleMarginTop="-10dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:title="REGISTER">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/XXXXAppTheme.PopupOverlay"/>

        <ImageView
            android:id="@+id/ivContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/white_background"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            app:layout_collapseMode="parallax"/>

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


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <FrameLayout
        android:id="@+id/flContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Well, unable to argue with my manager. This is what is needed unfortunately. :) — iZBasit, Jan 05 '16 at 10:04
The offset appears to be because of the up navigation button. If you really want to do this, it's best to use a custom layout and add a toolbar therein. It will give you complete control over the design. However, I agree with @Sufian. This is very iOS. :) — SlashG, Jan 05 '16 at 10:08
if you just select your toolbar in xml editor preview you will find that there is a certain offset in it. To remove that you will have to use custom toolbar or either shift your register text to left accordingly — Vivek Mishra, Jan 05 '16 at 10:19

score 5 · Answer 1 · answered Jan 05 '16 at 10:04

5

Try this within your "Toolbar"

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_top"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/color"
    app:theme="@style/ToolBarTheme" >


     <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Register"
         android:layout_gravity="center"
         android:id="@+id/toolbar_title" />


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

answered Jan 05 '16 at 10:04

TejjD

2,571
1
17
37

How to get rid of the default title? – iZBasit Jan 05 '16 at 10:05
remove "app:title" from your xml on the CollapsingToolbar, if that does not work, then set the text of the CollapsingToolbar to "" in your code – TejjD Jan 05 '16 at 10:08
@iZBasit check my answer below – piotrek1543 Jan 05 '16 at 10:11

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

To make it centered, please follow the steps:

To use a custom title in your Toolbar all you need to do is remember is that Toolbar is just a fancy ViewGroup so you can add a custom title like so:
 <android.support.v7.widget.Toolbar       
  android:id="@+id/toolbar_top"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:minHeight="?attr/actionBarSize"
  android:background="@color/action_bar_bkgnd"
  app:theme="@style/ToolBarTheme" >


   <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Toolbar Title"
        android:layout_gravity="center"
        android:id="@+id/toolbar_title" />


  </android.support.v7.widget.Toolbar>
This means that you can style the TextView however you would like because it's just a regular TextView. So in your activity you can access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
From: Android toolbar center title and custom font

To remove the default app name title, do this:

setSupportActionBar(toolbar_top); 
getSupportActionBar().setDisplayShowTitleEnabled(false);

Hope it help

edited May 23 '17 at 12:02

Community

1
1

answered Jan 05 '16 at 10:06

piotrek1543

19,130
7
81
94

1

Please update your answer with the link where you took this from :) – Sufian Jan 05 '16 at 10:08
@piotrek1543 how will it do the scaling, if I use a custom textview? – iZBasit Jan 05 '16 at 10:13
@scaling of what? maybe `android:textsize`, `android:textScaleX`, `android:scaleX`, `android:scaleY` – piotrek1543 Jan 05 '16 at 10:18
@piotrek1543 I am using a `CollapsingToolbarLayout` will the collapse animation be supported when I add a `TextView` as you have suggested? – iZBasit Jan 05 '16 at 10:27
just give it a try and tell me, I don't have any idea about it, but I feel that yes – piotrek1543 Jan 05 '16 at 10:30

score -1 · Answer 3 · edited Feb 25 '16 at 12:07

You should use this. To add TextView in side Toolbar

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="130dp"
    android:id="@+id/toolbar">

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:layout_gravity="center"/>

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

How to get title at center of Toolbar

3 Answers3