Primary color (sometimes) goes transparent - android

I am developing with the latest SDK version (API 21) and Support Library 21.0.2 and I've been having trouble when trying to implement the new Material Design guidelines.
Material Design says that I need to have my primary color and my accent color and apply them over my app. But sometimes when I open the app the primary color becomes transparent in some widgets, it goes back to normal until I close the app (with the Back Button) and launch it again.
Here is an example of the primary color being transparent in my toolbar.
I am using Teal 500 as my primary color and, as you can see, it is transparent only in the android.support.v7.widget.Toolbar. This also happens on my Navigation Drawer and (sometimes , sometimes not) in another random widgets.
This is my Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" >
I've tried with #color/primary and ?attr/colorPrimary with no success.
Here is my Theme (I don't know if it is related, but just in case):
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#fff</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:textViewStyle">#style/Widget.TextView.White</item>
</style>
This just happens with the primary color, accent color works fine. My device is running 4.2.2 and I haven't checked on more devices.
Activity with Toolbar
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MergeRootFrame" />
</LinearLayout>
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/navdrawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:orientation="vertical" >
<!-- IN THIS IT ALSO HAPPENS -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp"
android:orientation="vertical"
android:background="#color/primary" >
<!-- Some stuff -->
</LinearLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/black_light"
android:divider="#color/grey"
android:choiceMode="singleChoice" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

The problem is related with the way the toolbar's background is handled. It is shared between all instances of toolbar, so if you tend to change the toolbar's background alpha, you change the alpha of the drawable that is reused on other screens too.
Make sure you are not manipulating with the Toolbar's background properties, instead set the new background color/drawable each time you want to customize it.

Maybe these Support Library bugs are related to your issue.
https://code.google.com/p/android/issues/detail?id=78289
https://code.google.com/p/android/issues/detail?id=78346
Sadly, still not fixed in 21.0.2

Related

Translucent Status bar makes the layout out of bounds(showing view behind)

I want to achieve a translucent status bar, and I found this,
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
yes it made my status bar translucent when my collapsing toolbar/appbar is expanded
but the problem is the one of the views(imageView) became behind on one of the other views(seems like its parent layout went out of bounds, please see the attach image)
opaque status bar, please see the image at the bottom
before that I didnt have any issues at all like this
non-translucent status bar
this is my xml, i tried to remove as much as possible, please bear with me,
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/mHomeAppBar"
android:layout_width="match_parent"
android:layout_height="430dp"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/image_view_on_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="#drawable/ic_near_me_white_18dp"/>
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/mHomeToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/mHomeScrollView"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/mLayoutTabComponents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<android.support.design.widget.TabLayout
android:id="#+id/mHomeTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/mHomeViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
and this is the style
<style name = "AppThemeNoActionBar" parent =
"Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="android:subtitle">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:background">#null</item>
<!-- Support library compatibility -->
<item name="background">#null</item>
</style>
Im trying everything around, I tried to put app:layout_behavior="#string/appbar_scrolling_view_behavior" in every parent container and layout, and I tried to remove the TabLayout's tabGravity from fill to nothing, but still no luck :(, can anyone help me figure whats wrong, I know Im missing something on the style, but please put me in the right direction, again, I apologise if the xml code is a bit long, thanks in advance!
Update: I removed all the unnecessary view contents on the layout xml. anyone? :(
I manage to solve my problem by setting
fitSystemWindows
to false
that resulted the status bar to remove the padding it generates, then I add a 25dp top padding on the next layout which is the AppBarLayout that contains all the child views, now it works perfectly as I wanted.
thanks to these posts, if everyone encounters the same, or related issue with translucent status bar, please have a look here
Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment
Using windowTranslucentStatus with CollapsingToolbarLayout

The Toolbar with AppCompatActivity in android cover whole area of upper side on device

I have used AppCompatActivity to show my toolbar on my android app but it hide whole upper part of my mobile devices.I have tried all kind of theme but can't able to figure it out how to decrease the height of toolbar from
upper side.
My xml file is
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:padding="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ImageButton
android:id="#+id/imageView4"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#f04d3c"
android:layout_gravity="right"
android:layout_alignParentRight="true"
android:src="#drawable/search_icon" />
<ImageButton
android:id="#+id/imageView5"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginRight="2dp"
android:background="#f04d3c"
android:layout_gravity="right"
android:layout_alignParentRight="true"
android:src="#drawable/cart_icon" />
<ImageButton
android:id="#+id/imageView3"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#f04d3c"
android:layout_gravity="right"
android:layout_marginRight="2dp"
android:layout_alignParentRight="true"
android:src="#drawable/notification_icon" />
</android.support.v7.widget.Toolbar>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar">
<ExpandableListView
android:id="#+id/navList"
android:layout_width="270dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:dividerHeight="1dp"
android:divider="#drawable/list_divider"
android:childDivider="#drawable/child_list_divider"
/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
and my style is this which use Theme.AppCompat.Light.NoActionBar
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#f04d3c</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#f04d3c</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#FF4081</item>
</style>
</resources>
My app image is this
Within your styles.xml, set a different color for "colorPrimaryDark".
The status bar above your Toolbar takes the color that you specify in colorPrimaryDark. Since your colorPrimary and colorPrimaryDark are same, it looks like its just a large Toolbar.
<item name="colorPrimaryDark">CHANGE_COLOR_HERE</item>
If you wish to restore the color to default, you can set it to transparent
<item name="colorPrimaryDark">#android:color/transparent</item>
In Lollipop and above, the default is that the ActionBar color reflects on the status bar.
Some solutions are : -
If you extend Activity instead of AppCompatActivity, this will actually not happen
If you want to set the status bar black or transparent, or any color you want, you can always do getActivity().getWindow().setStatusBarColor(R.id.your_color)
As mentioned by #Rachit, you can set a colorPrimaryDark

SearchView enlarges on focus

The problem i'm facing is, that when the SearchView gets the focus, the parent ActionBar enlarges nearly to the top of the keyboard (like in the screenshot below). The effect only occures if both, the android:fitsSystemWindow attribute of the Toolbar and the android:windowTranslucentStatus style property are set to true. If one of them is false, the problem doesn't exist anymore.
What am i doin wrong? Did i miss any configuration?
I have the following simple layout in my activity:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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:clickable="true"
android:focusableInTouchMode="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:fitsSystemWindows="true"
android:height="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<ScrollView
android:id="#+id/search_result_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
My styles.xml looks like this:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
The menu_main.xml looks like this:
<menu 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"
tools:context=".MainActivity">
<item
android:id="#+id/action_search"
android:icon="#android:drawable/ic_menu_search"
android:title="#string/search_button"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView"/>
</menu>
Screenshot of the 'bug':
Did you try to limit the toolbar's height like
<android.support.v7.widget.Toolbar
...
android:layout_height="?attr/actionBarSize" />
? Instead of using wrap_content?
(?attr/actionBarSize causes the system to choose the standard toolbar height for the current configuration, e.g. 56dp for portrait on mobile phone)

Strange custom Toolbar on pre-lollipop devices

I've issues with the appcompat toolbar on < 5.0 devices.
I was expecting this (Working result on Xperia and Nexus devices with lollipop):
Unfortunately I do get this on < 5.0 devices; black text and a weird looking statusbar hovering over the toolbar:
This is my toolbar design:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
And MainActivity design:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:clickable="true">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar">
</include>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#fff"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
My styles-v21.xml:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
Defining code inside MainActivity's onCreate:
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
mRecyclerView.setHasFixedSize(true);
Drawer = (DrawerLayout) findViewById(R.id.DrawerLayout);
Drawer.setStatusBarBackgroundColor(getResources().getColor(R.color.ColorPrimaryDark));
Okay I finally managed to get rid of this weird issue. I've changed the style.xml for v-19 to this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar" >
<item name="android:windowTranslucentStatus">true</item>
</style>
Which just makes the statusbar transparent on kitkat devices. And changed nothing in the style-v21.xml and the original styles.xml file.
Then changed the toolbar to add app:theme and app:popupTheme which is set to display white text theme. And a android:paddingTop to change the padding which is needed to be set on kitkat devices.
<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:background="#color/ColorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:paddingTop="#dimen/tool_bar_top_padding">
</android.support.v7.widget.Toolbar>
In the default dimens.xml:
<dimen name="tool_bar_top_padding">0dp</dimen>
dimens-v19.xml:
<dimen name="tool_bar_top_padding">20dp</dimen>
dimens-v21.xml:
<dimen name="tool_bar_top_padding">0dp</dimen>
And last but not least removed the android:fitsSystemWindows="true" from the DrawerLayout in the main_activity.xml design
I am not sure about reason of this error. But I think a work around can be done if you set Statusbar background color in Lollipop from API introduced recently
The API is setStatusBarColor(int color) and you are required to set some meaningful flags to WindowManager along with it :
Sample found from this descriptive answer :
Window window = activity.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(activity.getResources().getColor(R.color.ColorPrimary));
// to set ColorPrimary as status bar background color
This will remove the gray background shown in Samsung devices of lollipop

Material Design - AppCompat toolbar without showing shadow

I am using the toolbar from AppCompat V7 to replace the previous action bar and want to have the shadow of toolbar like the previous actionbar. but the toolbar doesn't have shadow by default, and I have tried the fixes mentioned from reddit. but without luck.
the code to set the shadow:
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
The toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:minHeight="?attr/actionBarSize"
android:background="#F1F1F1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
foreground="?android:windowContentOverlay">
the activity layout:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:layout_width="match_parent"
android:id="#+id/drawer_layout"
android:layout_height="match_parent">
<!-- activity view -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout android:id="#+id/fragment_container"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
<!-- navigation drawer -->
<RelativeLayout
android:id="#+id/left_drawer"
android:layout_gravity="start"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:divider="#eee"
android:background="#EEE"
android:id="#+id/drawer_header">
<ImageView
android:id="#+id/user_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:contentDescription="#string/user_icon"
android:src="#drawable/ic_action_person"
android:paddingTop="0dp"
android:paddingLeft="0dp"/>
<TextView
android:id="#+id/userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/user_icon"
android:gravity="center"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:textSize="14sp"
android:text="#string/not_logged_in"
android:paddingTop="0dp"
android:paddingBottom="0dp"/>
</RelativeLayout>
<ListView
android:id="#+id/drawer_list"
android:layout_below="#+id/drawer_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#eee"
android:background="#fff"
android:dividerHeight="0dp" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Setting in the style.xml:
<style name="myAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowContentOverlay">#drawable/drawer_shadow</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/black</item>
</style>
Can anyone help?
thanks!
update 1: with the suggestion from Willis, I get the shadow displayed, but it is not below the toolbar, instead it is to the left of the toolbar.
Update 2: I have noticed that if I don't set the windowContentOverlay in toolbar.xml and styles.xml, the shadow is actually on the top of the toolbar.
Those two are completely different shadows. The vertical one is that of DrawerLayout. It's supposed to be showing beside expanded drawer. The horizontal one is part of windowContentOverlay on APIs below LOLLIPOP (on LOLLIPOP it's #null).
When you work with Toolbar widget the toolbar isn't part of window decor anymore so the shadow starts at the top of the window over the toolbar instead of below it (so you want the windowContentOverlay to be #null). Additionally you need to add an extra empty View below the toolbar pre-LOLLIPOP with its background set to a vertical shadow drawable (8dp tall gradient from #20000000 to #00000000 works best). On LOLLIPOP you can set 8dp elevation on the toolbar instead.
Note: Use the same gradient but horizontal as the drawer shadow for best results.
You can set the amount of shadow by using the setElevation method. For example:
getSupportActionBar().setElevation(25);
Increasing/decreasing the value passed to setElevation will consequently increase/decrease the presence of the shadow effect.
To show shadow under your toolbar please use AppBarLayout available in Google Android Design Support Library. Here is an example of how it should be used.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
To use Google Android Design Support Library enter following into your build.gradle file:
compile 'com.android.support:design:22.2.0'

Categories

Resources