Develop Reference

Styling the Toolbar

I'm trying to get a transparent Toolbar over the top of my Navigation Drawer. I had it working pretty nicely until I had to put a Toolbar in my layout so I had a reference to it, to pass to ActionBarToggle.
Styling the Toolbar is awful. I've played for hours and nearly got it right now, but there are a couple of things I cannot for the life of me fix.
1 I want the hamburger icon and the option menu icon to be white.
2 I want the Toolbar to be visible over the NavDrawer.
3 I don't want any shadow or elevation around the Toolbar.
These three things seem massively improbable.
Here is my Activity Layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/load_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".load.LoadActivity"
tools:openDrawer="start">
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/md_transparent"
android:theme="#style/DefaultToolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextColor="#color/md_white_1000"/>
</android.support.design.widget.AppBarLayout>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/load_drawer_actions" />
the Styles.xml
<resources>
<style name="AppTheme" parent="Base.AppTheme" />
<style name="AppThemeNoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="SplashTheme" parent="AppThemeNoActionBar">
<item name="android:windowBackground">#drawable/splashscreen</item>
</style>
<style name="Base.AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBarOverlay">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/secondary_text</item>
<item name="colorControlActivated">#color/primary_text</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<item name="progressBarStyle">#style/DefaultProgressBarStyle</item>
<item name="android:progressBarStyle">#style/DefaultProgressBarStyle</item>
<item name="buttonStyle">#style/DefaultButtonStyle</item>
<item name="android:buttonStyle">#style/DefaultButtonStyle</item>
<item name="actionBarStyle">#style/ClearActionBar</item>
<item name="android:actionBarStyle">#style/ClearActionBar</item>
</style>
<style name="DefaultToolbar" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
<style name="DefaultAppbar" parent="Base.Widget.Design.AppBarLayout">
<item name="android:background">#android:color/transparent</item>
</style>
<style name="DefaultProgressBarStyle" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:indeterminate">true</item>
</style>
<style name="DefaultButtonStyle" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:padding">#dimen/defaultPadding</item>
</style>
<style name="ClearActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="background">#android:color/transparent</item>
<item name="elevation">0dp</item>
</style>
<style name="DefaultFABStyle">
<item name="elevation">#dimen/defaultElevation</item>
<item name="android:layout_marginRight">#dimen/defaultMargin</item>
</style>
</resources>
If anyone knows how to start to get what I need.. It seems impossible at the moment. I actually had it nearly perfect, until I had to declare a Toolbar in XML, since then, themeing it has been near impossible. All to get the hamburger animation..

android:background changed title background color

I have different themes in styles.xml and I have used different background color in each theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:background">#color/transparent</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#android:color/black</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:background">#181818</item>
</style>
<style name="AppThemeLight" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimaryLight</item>
<item name="colorPrimaryDark">#color/colorPrimaryDarkLight</item>
<item name="colorAccent">#color/colorAccentLight</item>
<item name="android:background" >#color/backgroundLight</item>
</style>
xml snippet,
<android.support.design.widget.CoordinatorLayout 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="match_parent"
android:fitsSystemWindows="true">
<include layout="#layout/content_main" />
<android.support.design.widget.AppBarLayout
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
When I change the theme, the title background also changed to that color.
I tried using the following in each theme,But it doesn't work.
<item name="android:windowTitleBackgroundStyle">#style/titletheme</item>
And titletheme ,
<style name="titletheme">
<item name="android:background">#00000000</item>
</style>
See the image, the title background is changed with android:background color in that theme.
How to prevent change of the title background color?

Just change one thing and tell me its working or not: remove "android:background" from your theme and add "android:windowBackground". see if this helps. rest leave the same.

Activity's status bar color is different for no apparent reason

I've created a new activity and for some reason, when it is used, it uses a different color in the status bar. What's strange is that in the "design" preview it renders the correct color.
Below are two screen shots, the darker color is the correct color.
Incorrect
Correct
The themes are the same as the other .xml layouts, so I'm having trouble really figuring out where this error is coming from. Below is the code for the layout:
activity_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.brewguide.android.coffeebrewguide.MenuActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/myfragment"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I'm not sure what other code would be useful to include for diagnosing this.
Edit:
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="DescriptionTextView">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:background">#color/mainBackground</item>
</style>
<!--style for the start button in the clock view layout-->
<style name="AppTheme.Button.Start" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/complimentaryLeft</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the stop button in the clock view layout-->
<style name="AppTheme.Button.Stop" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the reset button in the clock view layout-->
<style name="AppTheme.Button.Reset" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorAccent</item>
<item name="android:textColor">#color/cardview_light_background</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>

I had the same issue. For me it was an issue with a second styles.xml file (still not sure why I had two). The specific line that was causing the issue was:
<item name="android:statusBarColor">#android:color/transparent</item>
I don't see this in your posted styles.xml, but perhaps it will help someone else.

Check your colors.xml for color named primary_dark and change it to be the same to primary, because Android use that(primary_dark) color to colorize status bar.

Managed to programatically set the color using the following line:
getActivity().getWindow().setStatusBarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
I would prefer to have this done in the .xml however.

Text background issue on Toolbar

When adding some alpha to my Toolbar background color, I notice there is a background applied to the title's TextView:
Here is my layout:
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#0099cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
<ImageView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"/>
</FrameLayout>
And my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
</style>
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<!--For compatibility-->
<item name="actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/black_overlay</item>
<item name="android:background">#color/black_overlay</item>
</style>
<style name="ActionBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">50sp</item>
</style>
</resources>
"black_overlay" color value is #66000000
I am using AppCompat and Support libraries v24.2.1.
Do you have any idea on how to get rid of this text background?
Cheers.

As you can see in the following issue, the problem comes from the attribute app:theme. It is applied to every view that a viewgroup inflate.
Replace app:theme by style:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>

Alright, removing the background properties on the FullscreenActionBarStyle style and putting it in the Toolbar layout definition make it work.
As #apelsoczi pointed out, settings these properties in the toolbar style also apply them on children components.

Encapsulate a TextView inside the Toolbar and set the value of that.
<android.support.v7.widget.Toolbar
...>
<TextView ... />
</android.support.v7.widget.Toolbar>

colorPrimaryDark is not applying for particular activity in Status Bar

For information, I am using Android Studio 2.0 Preview 7, API 23.
Activity that is having the issue
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="in.ezyride.blovia.OfferRide"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/view">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/view">
<include
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/basicLayoutAddl"
layout="#layout/content_offer_ride"
/>
</ScrollView>
</RelativeLayout>
But other activities are regular. This happened when I was trying to fix the keyboard covering EditText issue. However I almost solved that, new one raised.
For fixing it, I added scroll view in the above relative layout.
The manifest part of the activity is as follows
<activity
android:name=".OfferRide"
android:label="#string/title_activity_offer_ride"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustPan|stateAlwaysVisible"
android:theme="#style/AppTheme.NoActionBar" />
Other activity where things are normal.
File: styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="md_positive_color">#color/colorPrimary</item>
<item name="md_neutral_color">#color/colorPrimary</item>
<item name="md_title_color">#color/colorPrimary</item>
<item name="md_negative_color">#color/colorPrimary</item>
<item name="md_widget_color">#color/colorPrimary</item>
</style>
<style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

In my case, the problem was because I had two files styles.xml in my project, in both of them had the same name of theme for the activities.
Let me describe it.
This is my activity in the AndroidManifest.xml:
This is my first styles.xml (default):
This is my second styles.xml (V21):
The app in running mode used the second style, it had the problem, because we couldn't see the colorPrimaryDark of the app.
The solution was, comment the last item in the second style.xml:

http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
AppBarLayout is a vertical LinearLayout which implements many of the
features of material designs app bar concept, namely scrolling
gestures.
Children should provide their desired scrolling behavior through
setScrollFlags(int) and the associated layout xml attribute:
app:layout_scrollFlags.
This view depends heavily on being used as a direct child within a
CoordinatorLayout
Use CoordinatorLayout instead of RelativeLayout and instead of ScrollView, Use NestedScrollView.
And change this:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
to:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Since you already have Toolbar, let's imagine you've already added this in your OnCreate:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

For me, the issue was windowTranslucentStatus:
Before:
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:colorPrimary">#color/bright_purple</item>
<item name="android:colorPrimaryDark">#android:color/background_dark</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
After:
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:colorPrimary">#color/bright_purple</item>
<item name="android:colorPrimaryDark">#android:color/background_dark</item>
</style>

Use this in your styles.xml:
<item name="android:statusBarColor">#color/colorPrimaryDarkBlue</item>