Develop Reference

Change the title of MaterialToolbar into center

I'm using navigation component and material toolbar.
I've just setup navigation component with material toolbar. By doing so whenever fragment changed the back button shown and the title of material toolbar changed by navigation component automatically.
The question is I just want to change the title gravity into center without removing those navigation components toolbar support.
How can I do that ?
Note : I`ve tried to change the toolbar style, but it seems does not work.
And creating an extra text view into toolbar view its not a solution since I want to use navigation component toolbar support.
Thanks in advance.

Starting from com.google.android.material:material:1.4.0 you can use app:titleCentered="true" to center the title.
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/materialToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Toolbar"
app:titleCentered="true"/>
I hope this helps. You can mark it as accepted if it matches your needs.

You can use a Custom Toolbar
<androidx.appcompat.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" />
<androidx.appcompat.widget.Toolbar/>
It's just a part of view Group, 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);

As a tricky way you can use: com.google.android.material.appbar.CollapsingToolbarLayout
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:collapsedTitleTextAppearance="?attr/textAppearanceHeadline3"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="?attr/textAppearanceHeadline1"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_back_24dp"
app:title="#string/parvaneh_personal_info" />
</com.google.android.material.appbar.CollapsingToolbarLayout>

How to change Toolbar height and font size programmatically depending of text length

I have a lot of different titles for Toolbar that I pass from previous activity trough intent:
title = getIntent().getStringExtra("title");
And I set them to my Toolbar of new activity like this:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setTitle(title);
But the font is too large and only covers one line of toolbar:
This is one of the example titles:
CONVERSION OF RADAR RANGE PROPAGATION KILOMETER INTO MICROSECOND TIME AND VICE-VERSA
I would like to know is there a way to dynamically change Toolbar height and text size to fit this titles? Can this be done programmatically?
Thanks

try this create custom toolbar like this
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Did you know"
android:id="#+id/myTitle"
android:textColor="#android:color/white" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
and use theme of your activity as NoActionBar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
TextView myTitle = (TextView) toolbar.findViewById(R.id.myTitle);

You can try like this:
<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>
and in java file;
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);

Toolbar title not in center when Back Button is enable

I'm trying to display my toolbar title in the center and to do it I use the method which is given in this answer :-Toolbar Center title
However, when I enable back button in my activity by following code:
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mActionBar = getSupportActionBar();
mActionBar.setDisplayHomeAsUpEnabled(true);
mActionBar.setDisplayShowHomeEnabled(true);
The title of toolbar doesn't show up in the center but slightly off-centered towards the right.
How can I achieve centered title without being affected by the back button or menu bar?

Add a TextView inside the Toolbar & don't forget to set the following attribute inside your TextView.
android:layout_marginRight="?android:attr/actionBarSize"
OR
android:layout_marginEnd="?android:attr/actionBarSize"
code snippet:
<android.support.v7.widget.Toolbar
android:id="#+id/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/holo_red_dark">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="abc"
android:textColor="#android:color/white"
android:textSize="20sp"
android:layout_marginRight="?android:attr/actionBarSize"
android:gravity="center"/>
</android.support.v7.widget.Toolbar>
Refer to this tutorial for more information.

Having a placeholder image the same size as the back arrow and setting it to be invisible when the back arrow is not shown and gone when it's displayed did the trick for me.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
android:minHeight="?attr/actionBarSize"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ImageView
android:id="#+id/iv_placeholder"
android:layout_width="72dp"
android:layout_height="48dp"
android:src="#drawable/ic_actionbar_hamburger"
android:visibility="invisible"/>
<TextView
android:id="#+id/logo_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="?attr/actionBarSize"
android:gravity="center"
android:text=""
android:textColor="#color/white"
android:textStyle="normal"/>
</android.support.v7.widget.Toolbar>

Just add android:paddingEnd="72dp; to the Toolbar layout.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:contentScrim="#color/colorPrimary"
app:layout_collapseMode="pin"
android:paddingEnd="72dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:title="Title"/>

Just put your content in a child view inside the Toolbar tag in XML, using the following attributes:
android:layout_width="wrap_content"
android:layout_gravity="center"
Offical docs for Toolbar state:
One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's LayoutParams indicates a Gravity value of Gravity#CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
This works for me, using androidx.appcompat.widget.Toolbar with a child view.

The reason why the title is not centered when you use a back button as navigation icon, is that navigation icon is represented as AppCompatImageButton and is added to the same layout as your title TextView. Using Arshak's answer is not a bad idea, but ?android:attr/actionBarSize is not a good way to define the end margin. As the action bar height is probably the same size as icon's width, it might work, but might not work on all devices. Could be a good idea to specify this size from material design guidelines.

In my case I was using an imageview inside the toolbar which I didnt want shifting around while navigating between fragments of a activity.
I kept it centered by placing it out the toolbar. I used constraintlayouts
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.google.android.material.appbar.MaterialToolbar>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="#id/toolbar"
app:layout_constraintBottom_toBottomOf="#id/toolbar"
android:src="#drawable/ic_logo"
tools:ignore="ContentDescription" />
...
</androidx.constraintlayout.widget.ConstraintLayout>

I think the nicest and most up-to-date method is to have full control over the appbar. This way you can change other things from textview location.
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:title="#string/app_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textSize="20dp"
android:textColor="?attr/colorPrimary"
android:layout_centerInParent="true"
android:layout_marginEnd="20dp"/>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
You can use this directly inside your activity. However, you may need to change the active toolbar by making such a definition in the activity where you added this toolbar.
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Dont set propterties like this
mActionBar = getSupportActionBar();
mActionBar.setDisplayHomeAsUpEnabled(true);
mActionBar.setDisplayShowHomeEnabled(true);
Do like this
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Title and subtitle
toolbar.setTitle(R.string.about_toolbar_title);
toolbar.setSubtitleTextColor(Color.WHITE);
toolbar.setTitleTextColor(Color.WHITE);
toolbar.setBackgroundColor(getResources().getColor(
R.color.themeToolbarColor));
toolbar.setNavigationIcon(R.drawable.ic_action_back);
toolbar.setNavigationOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
finish(); // to go back finish() will do your work.
//mActionBar.setDisplayHomeAsUpEnabled(true);
//mActionBar.setDisplayShowHomeEnabled(true);
}
});

Aligning items in support actionbar appcompat

I have an appCompatActivity with a supportActionBar similar to whatsApp chat screen interface. Having been able to customise the actionbar with all the necessary components, I am not not able to apply padding/margin of any sort on the leftmost up/back button. However, with rest of the items I set up in the toolbar are aligned properly.
Here is how my layout of the activity looks like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/relMainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/avatar"
android:layout_width="#dimen/action_bar_avatar_size"
android:layout_height="#dimen/action_bar_avatar_size"/>
<TextView
android:id="#+id/txtUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
...
In the activity:
mImageViewAvatar = (ImageView) findViewById(R.id.avatar);
mTextViewUserName = (TextView) findViewById(R.id.txtUserName);
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(false);
mImageViewAvatar.setBackgroundImage(Contacts.getImage());
mTextViewUserName.setText(recipientId);
I have tried to set my layout_marginLeft to a negative value as well to the image even, it does not move to left. How do I apply margin/padding alignments to only this toolbar? Not the toolbar used in the application.

I guess you're looking for app:contentInsetLeft respectively app:contentInsetStart. Setting these attributes to 0dp will remove the padding - see the following two screenshots:
Without explicity setting contentInset:
Setting contentInset to 0dp
Please note: This won't work if you're using getSupportActionBar().setDisplayHomeAsUpEnabled(true) since the drawable which will be used by the system has a padding which can't be removed. See the following Screenshot:
So if you're trying to achieve the same as WhatsApp you have to use your own "back-button" drawable and add it to your Toolbar layout.
Edit
That's how I would do it:
*.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:id="#+id/layout_back_button"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackgroundBorderless"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_action_arrow_back" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/avatar" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="StackOverflow"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textSize="20dp" />
</android.support.v7.widget.Toolbar>
Java code
Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(tb);
getSupportActionBar().setTitle(null);
View view = findViewById(R.id.layout_back_button);
view.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
onBackPressed();
}
});
Result:
Notice that I wrapped the back button drawable and the avatar in an extra layout, which has the selectableItemBackgroundBorderless set as the background. Due that we achieve this ripple effect like in WhatsApp.

How to replace title by logo in Android Toolbar?

I want to replace the title in my Toolbar by a logo like Twitter App.
I think we can replace this programmatically like that :
mToolbar = (Toolbar) findViewById(R.id.app_toolbar);
mToolbar.setLogo(R.drawable.ic_logo);
But I want to replace it directly in my XML toolBar declaration, but I can't see the property app:logo or android:logo.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/MyCustomToolBarTheme" />
Please help me, thank you.

If you check source code of Toolbar and Toolbar's custom attributes, there are only a few attributes you can use to customize Toolbar, but logo is not one of them:
titleTextAppearance
subtitleTextAppearance
navigationIcon
...
Toolbar.setLogo(resId) seems to be the only option at the moment.

A toolbar contains a ViewGroup that you can populate with whatever views you wish --- you can add an ImageView there if you want a logo. Example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_logo"/>
</android.support.v7.widget.Toolbar>
If you manually attach it to AppCompatActivity or ActionBar activity, it "becomes" an ActionBar, and then has to be manipulated using those code functions.