Develop Reference

CollapsingToolbarLayout in API 21

If you take a look at the CheeseDetailActivity in the cheesesquare app, the CollapsingToolbarLayout seems to cause the Toolbar to be misaligned on API 21:
This also causes the Toolbar to be obscured after scrolling down:
Presumably, it should look like this (API 18 screenshot):
Has anyone encountered this or know of a solution to get the toolbar to align correctly?

Since the v21 theme changes to include:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
The margin needs to be modified on the toolbar for v21 to account for the space that the system bar takes.
dimens.xml
<dimen name="action_bar_margin_top">0dp</dimen>
dimens.xml (v21)
<dimen name="action_bar_margin_top">-24dp</dimen>
Add margin and fitsSystemWindows to the Toolbar.
<android.support.v7.widget.Toolbar
android:layout_marginTop="#dimen/action_bar_margin_top"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />

How to get actionbar for activities styled as dialog with appcompat-v7 22.1?

Some background: I'm adding tablet support for a game that's previously been available on phones for a long time. Some of the activities make up a “wizard” where the user chooses game type, some options, and an opponent before the game can start. For the tablet version using a theme inheriting Theme.AppCompat.DialogWhenLarge for these activities looked like a good, easy solution. This worked fine when using appcompat-v7 version 22.0.0.
In appcompat-v7 version 22.1, in all these DialogWhenLarge activities, suddenly getSupportActionBar() started returning null on tablets. I was relying on the actionbar for back navigation and more importantly for Search and other buttons.
What's the appropriate way to get an action bar on these activities on tablets? Do I need to implement my own toolbar?
I have tried calling requestWindowFeature(Window.FEATURE_ACTION_BAR) in my onCreate (before calling super) but that has no effect. I tried subclassing from AppCompatActivity instead of ActionBarActivity but that didn't help either (both with and without requestWindowFeature).
I have read Chris Banes' blog post on this new library version as well as Ian Lake's post on the Android Developers Blog; I couldn't see anything mentioning that actionbars should no longer be available.

I had the same issue. The only way I could find to fix it was to replace the action bars with toolbars.
// Replace the action bar with a toolbar
Toolbar toolbar = (Toolbar)findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
My toolbar layout:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:theme="#style/DefaultActionBarTheme"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
included in my activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include android:id="#+id/tool_bar" layout="#layout/tool_bar" />
<ListView
android:id="#+id/detail_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="always" />
</LinearLayout>
DefaultActionBarTheme (in styles.xml):
<!-- Action bar theme -->
<style name="DefaultActionBarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#1d7caf</item>
</style>

Android Toolbar too high in landscape mode

My min and target sdk is 21, and I am not using the support library.
I am using the new Toolbar widget, and generally it works, I just have a glitch in the way it looks. The action icons are centered in portrait mode, whereas the toolbar in landscape mode is higher, and the icons are not centered. Please take a look at the screenshots (read lines are just to make the problem more visible):
portrait:
landscape:
This might look like nothing, but when the actions are selected (like the 'up' arrow at the very left of the bar) the result is that a strip of few pixels below it is visible. I don't like the way it looks.
The activity does not manage any configuration changes itself.
This is my code:
styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme.Material.NoActionBar">
<item name="android:toolbarStyle">#style/MyToolbarStyle</item>
</style>
<style name="MyToolbarStyle" parent="android:Widget.Toolbar">
<item name="android:background">?android:attr/colorPrimary</item>
<item name="android:elevation">2dp</item>
</style>
</resources>
XML usage:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.test.TestActivity">
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
I tried messing around with the android:minHeight attribute, but setting to so, say, 30dp just moved the icons even more upwards, also in portrait mode.
I found this: https://code.google.com/p/android/issues/detail?id=77874
But there is no ?attr/actionBarSize...
How, if at all, can this problem be fixed? The phone the screenshots were taken on is a Nexus 6 (xxxhdpi), and the icon is from the google icon pack, and the biggest resource is xxhdpi. Is this the problem?
Update: the workaround from the aforementioned link does work when I use ?android:attr/actionBarSize. But, is this the only way? Seems a bit wrong, to need such workarounds for a new shiny component like this, even more so that the workaround requires an attribute value for a component to be replaced by the new one.

try to use:
android:height="?android:attr/actionBarSize"
for your toolbar.

Add this in your toolbar style:
<item name="maxButtonHeight">?attr/actionBarSize</item>

I had the same problem with android.support.v7.widget.Toolbar.
My solution:
Put your toolbar into a RelativeLayout with the height you want for your toolbar. Set your toolbars layout_height to "wrap_content" and align it to the vertical center. I hope it helps.
<RelativeLayout
android:id="#+id/main_toolbar_relative_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
</android.support.v7.widget.Toolbar>
</RelativeLayout>

Android Lollipop Toolbar Invert Colors

Am using Android L v21 Support library for Android L's Toolbar-ActionBar. I want the items in the toolbar to be white in color. i.e. Navigation Back button, Action Buttons, Overflow Actions. If I use the dark version as the application theme(Theme.AppCompat.NoActionBar) then all the toolbar items are shown in white. But when I use the light version (Theme.AppCompat.Light.NoActionBar) for the application all the toolbar items are shown dark. I want to use the light theme and want to make the toolbar to be show in white.
I have used activity.setTitleTextColor() to change the title's text color but not sure how to change the color for the rest.
SOLUTION:
Thanks to #ianhanniballake
<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_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>

Per the AppCompat v21 blog post under Styling:
Styling of Toolbar is done differently to the standard action bar, and is set directly onto the view.
With the example of:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
Note the app:theme attribute which sets the action bar to use light color text / styling (ThemeOverlay.AppCompat.Dark.ActionBar does the opposite).

Android Material with Extended Toolbar

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!

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.