Android Material with Extended Toolbar

Question

I'm testing material design and i'm developing an app using extended toolbar. My app is very simple: The main activity extends ActionBarActivity and my layout looks like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WeatherActivity"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/my_toolbar"
        android:layout_height="128dp"
        popupTheme="@style/ActionBarPopupThemeOverlay"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/location_placeholder"
        android:textAlignment="viewStart"
        android:layout_gravity="start"
        />
</LinearLayout>

Now i'd like to show as title the current location. The first thing i'm noticing is in my Android Emulator (API 18) the title doesn't seem to respect material guidelines about left margin bottom margin, it appears on the left side and entered vertically inside the Toolbar. So Should i use tool bar title (toolbar.setTitle) or something else? Second if i want to create something more complex like Title and a short description (as shown in the material guidelines in the layout structure) what should be my layout? Thx for your support!

Answer 1

Ok your activity extends ActionBarActivity so you also have to make sure that the theme for this activity is a child of either Theme.AppCompat.NoActionBar or Theme.AppCompat.Light.NoActionBar. If you are not using the Theme.AppCompat variants then you can alternatively add the following lines to your theme:

<item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item> 

Then all you need to do is add the Toolbar to your layout (which it looks like you already have):

<android.support.v7.widget.Toolbar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_toolbar"
    android:layout_height="128dp"
    popupTheme="@style/ActionBarPopupThemeOverlay"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />

Then in your activity set the Toolbar to be your ActionBar via setSupportActionBar:

    Toolbar mToolbar = (Toolbar) findViewById(R.id.my_toolbar);
    setSupportActionBar(mToolbar);

That last part is where all the magic happens because you're saying "Android, take this Toolbar widget and use it exactly how you would use the SupportActionBar". This means that if you want to set the title/subtitle all you need to do is call:

    getSupportActionBar().setTitle("Toolbar Title");
    getSupportActionBar().setSubtitle("Toolbar Subtitle");

This also means that you can use the same callbacks to create a menu on the Toolbar.

To answer your questions directly:

So Should i use tool bar title (toolbar.setTitle) or something else?

You can actually use either, toolbar.setTitle() or getSupportActionBar().setTitle()

Second if i want to create something more complex like Title and a short description (as shown in the material guidelines in the layout structure) what should be my layout?

Toolbar supports Titles and Subtitles so you should be set. I would checkout the documentation just to see what all the Toolbar supports. As a general rule, if the Actionbar could do it, the Toolbar can. If you have crazy requirements beyond what is supported by the Toolbar then just remember that the Toolbar is just a fancy ViewGroup so you can add widgets/views just as easily as if it were a LinearLayout.