Android Toolbar with two lines in the title?

Question

I want to have a double height actionbar (as in the material guideline examples), but with (possibly) 2 lines of text in the title. The title I'm using is dynamic and depends on the item displayed in the page. If there's one line it should look like a normal actionbar, if there's 2 lines then the text should break and drop down onto a new line. The action buttons should stay aligned with the top line of text no matter if there is one or two lines.

I read that the Toolbar is the new dynamic way to do actionbars so I thought that would probably be the way to go (I know there are answers out there that let you override the old action bar title textview to make it 2 lines, but that doesn't look like what I'm going for either). I'm using Android 4.4+ so I need to use the appcompat v7 library for the Toolbar.

I found when looking at the code that the title textview is constrained to just a single line (https://android.googlesource.com/platform/frameworks/support/+/refs/heads/master/v7/appcompat/src/android/support/v7/widget/Toolbar.java - contains the code mTitleTextView.setSingleLine();).

Then I thought that since there's a single line subtitle below, and we can change the format of that text, I could format it the same as the title text and just put my title up in two parts if necessary. I wrote some basic code to split the string, but it relied on being able to tell if I needed to split it - and in practice I found that toolbar.isTitleTruncated() always returns false (both from my toolbar object accessed directly, and from getSupportActionBar().isTitleTruncated()).

I tried the answer here to wrap a TextView within the Toolbar, but I can't get the TextView to align with the Toolbar action buttons when I do that. If I align it correctly for a single line (using top padding), then it's wrong for a double line, and vice versa. Here's my code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/view_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<fragment
    android:id="@+id/fragment_pager"
    android:name="com.example.ProductPagerFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<android.support.v7.widget.Toolbar
    android:id="@+id/product_details_toolbar"
    style="@style/style.toolbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/double_height_toolbar"
    android:minHeight="?attr/actionBarSize"
    android:gravity="top"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

    <TextView
        android:id="@+id/product_details_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top"
        android:paddingTop="@dimen/padding_normal"
        style="@android:style/TextAppearance.Holo.Widget.ActionBar.Title.Inverse"
        android:maxLines="2" />

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

Does anyone have any ideas? Is this really something that's so against the Android guidelines that it should be so difficult?

Update: adding images for demonstration purposes:

How it should look:

How it looks now:

Solution 1

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(getResources().getString(R.string.myTitle));
toolbar.setSubtitle(getResources().getString(R.string.mySubTitle));
setSupportActionBar(toolbar);

Tutorial:

ToolBar Example

Add Title, Subtitle, Color to Actionbar/Toolbar

Solution 2

Hmmm, it works fine for me.

<android.support.v7.widget.Toolbar
        android:layout_height="200dp"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:gravity="top"
        android:background="?attr/colorPrimaryDark"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Title"
            android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"/>

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

Comments

[gkee]

I created code.google.com/p/android/issues/detail?id=81987 for the issue of isTitleTruncated() not working.

[gkee]

This works fine for me if I have one line of text. If I have two, then the alignment gets all messed up. Try it with a longer title.

[Erdi]

Do not use toolbar.setTitle() with this solution. Get the TextView inside the Toolbar view and set it's text programatically.