Toolbar title full width

Question

How/Is it possible to make the title span the whole width of the toolbar? Currently the text is cut off by the menu items.

Ive tried playing around with different xml attributes such as paddingEnd, contentInsetRight, titleMarginEnd with no result.

Thanks! :)

Jemena

Make custom toolbar , put LinearLayout or FrameLayout inside toolbar tag. – Ahders

@TusharPandey Valid solution but it also results in 2 additional views, for such a small thing.. – Jemena

everything is accepted in love and war :-) – Ahders

@TusharPandey unfortunately ;) i ended up with 4 extra views, for such a small thingie. but its the best fix I can find to date. hoping for a better way in the future. – Jemena

Answer 1

Normally, the title always has to fit between the toolbar's menu & action items in order to move the title up when the toolbar is collapsing.

An easy way around this is to put a TextView inside the toolbar and set the toolbar's background to transparent. Also notice how I've set the elevation to the LinearLayout and disabled it on the toolbar (although the shadow isn't visible in the screenshot since I was running it on a KitKat device).

<!-- App Bar container -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/blue"
    android:elevation="2dp"
    android:orientation="vertical">

    <!-- App Bar -->
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:elevation="0dp"
        android:gravity="center"
        android:minHeight="?attr/actionBarSize">
    </android.support.v7.widget.Toolbar>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:text="Title below the AppBar itself."
        android:textColor="#fff"
        android:textSize="20sp"/>
</LinearLayout>

Which gives the following result:

This might look like two extra views, but keep in mind that if you don't set a title to the ToolBar, no TextView is inflated there. Net result is still one extra view though.

Citrine

Answer 2

A hackish solution

private void fixToolbarTitleBug()
{
    fixToolbarTitleBug("mTitleTextView");
}

private void fixToolbarTitleBug(String fieldName)
{
    try
    {
        Field field=Toolbar.class.getDeclaredField(fieldName);
        field.setAccessible(true);
        TextView titleTextView=(TextView) field.get(toolbar);
        Toolbar.LayoutParams params=(Toolbar.LayoutParams) titleTextView.getLayoutParams();
        params.width=ScreenSize.width()*3/4; //replace this
        titleTextView.setLayoutParams(params);
    }
    catch (Exception ex)
    {
        ex.printStackTrace();
    }
}

Usage: You must call this after setTitle, or it won't work because mTitleTextView is added to the toolbar after you set you set the toolbar title for the first time.

supportActionBar.setTitle(title);
fixToolbarTitleBug();

If you have a toolbar with title and subtile you can also use

private void fixToolbarSubtitleBug()
{
    fixToolbarTitleBug("mSubtitleTextView");
}

Usage:

supportActionBar.setSubtitle(subtitle);
fixToolbarSubtitleBug();

Seato