CODEWITHSUNDEEP
androidandroid-toolbarandroid-collapsingtoolbarlayout
iZBasit
iZBasit

Reputation: 1313

How to get title at center of Toolbar

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>

CollapsedToolbar

Upvotes: 2

Views: 6939

Answers (3)

Mithil Amin
Mithil Amin

Reputation: 207

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>

Upvotes: -1

piotrek1543
piotrek1543

Reputation: 19351

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

Upvotes: 1

TejjD
TejjD

Reputation: 2571

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>

Upvotes: 5

Related Questions