Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Toolbar with two lines in the title?

Tags:

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 should look

How it looks now:

How it does look

like image 659
gkee Avatar asked Dec 05 '14 08:12

gkee


People also ask

How do I change the title text bar in android?

First, add a font file in the src/main/assets/fonts/ of your project. Then create variables for Toolbar and text title and call the method findViewById(). Create a new Typeface from the specified font data. And at last setTypeface in text title.

What is title bar in android?

The Title bar is a small part of the UI that you can supply with some text and a color. You see it on a lot of Android 2.0 Apps. See here. The Actionbar is the bar with buttons that has back navigation etc. If you can chose, you use it instead of the Titlebar.


2 Answers

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

like image 117
Half Moon Avatar answered Sep 22 '22 00:09

Half Moon


Hmmm, it works fine for me.

Screenshot

<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>
like image 35
Chris Banes Avatar answered Sep 25 '22 00:09

Chris Banes