In my v27\style.xml I have the following code to set a white navbar:
<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:navigationBarColor">#android:color/white</item>
<item name="android:windowLightNavigationBar">true</item>
</style>
It works, but the white navbar "joins" with the white background. I would to add an horizontal line on the navbar, in each activity. How can I do?
This is what I would (from Youtube), I highlighted it with red rectangle:
I think for cases like these you may need to have a custom toolbar layout so that you can optimise the layout whichever way you like.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.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_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvToolBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18sp"
android:text="Toobar"
android:fontFamily="#font/filson_pro_book"
android:textColor="#color/white"
android:visibility="visible"/>
<FrameLayout
android:layout_gravity="center_horizontal"
android:background="#color/white"
android:layout_width="100dp"
android:layout_height="1dp"/>
</LinearLayout>
You would probably want to add an horizontal line each time you open the nav drawer:
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#FF0000FF"
android:layout_gravity = "bottom/>
If you want the line to be on half of the screen (only on the nav)- add it inside the nav.
If you want the line to be on the whole screen (as you marked in the picture)- add it after adding the nav.
Since API 27 there is an attribute in the style called navigationBarDividerColor that allows to do that. You can complement it with the navigationBarColor to make it look like the one in your screenshot.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
...
<item name="android:navigationBarColor">#android:color/white</item>
<item name="android:navigationBarDividerColor">#DBDBDB</item>
</style>
</resources>
I am trying to make the toolbar background color transparent however, the colorPrimary theme seems to be showing instead. When I set the background of the toolbar to a standard color, it overrides colorPrimary and work as intended, but is there a way for me to get rid of it completely as to make the toolbar background transparent? The reason that I still want colorPrimary is because of the recent apps tab color, I just want it to not show in the toolbar. Thank you.
Toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent" />
Style
<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:elevation">0dp</item>
<item name="elevation">0dp</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:textColorSecondary">#color/colorPrimary</item>
</style>
use the code instead of only toolbar
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:background="#android:color/transparent"
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="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
use this
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/background_toolbar_translucent" />
background_toolbar_translucent.xml
<?xml version="1.0" encoding="utf-8"?>
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/black_alpha_40"/>
colors.xml
<color name="black_alpha_40">#66000000</color>
make toolbar.xml inside layout folder. Use below code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
And use this toolbar in your activity's xml. This way you will have a transparent toolbar.
I am using support Toolbar from version suppport lib 25.0.1 and randomly it shows like this:
Now this is random and I dont know how to reproduce this. Some times it shows ok some times doesnt show correctly.
This is how I use the Toolbar in my fragment:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:id="#+id/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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.App.Toolbar"
android:elevation="#dimen/toolbar_elevation"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/Theme.App.Toolbar.Popup"/>
<style name="Theme.App.Toolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:textColorHint">#color/white</item>
</style>
Fragment:
toolbar.setTitle("Story title");
appCompatActivity().setSupportActionBar(toolbar);
As it can be seen from the screeenshot somehow the toolbar tries to put the subtitle but I dont have one.
Is this happening to other people, is this a known bug for this problem, any solution for this.
Try to use it like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/Theme.MyTheme"
tools:ignore="NewApi">
<TextView
android:id="#+id/tv_title_toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textSize="18sp"
/>
</android.support.v7.widget.Toolbar>
Here you can set title gravity to left.
Then access it in the code like this way:
toolbar = (Toolbar) findViewById(R.id.tb_toolbar);
tvToolbarTitle = (TextView) toolbar.findViewById(R.id.tv_title_toolbar);
tvToolbarTitle.setText(title);
The only solution for me until now is to use support library version 25.0.0
Other solutions or updates are welcomed
I defined a Gradient Drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:endColor="#2F3F59"
android:startColor="#4078A7"
android:type="linear"
android:angle="90" />
</shape>
And I set it on my Toolbar:
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="actionMenuTextColor">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:background">#drawable/custom_background_blue</item>
</style>
This is working! BUT:
This is what happens with the title. It gets the same gradient. This looks really ugly so I have to change this. How can I set the background of that info text to be transparent?
You can also solve this by setting the background of the toolbar to your drawable.
mToolbar().setDrawable(R.drawable.your_gradient)
link - Set transparent background of an imageview on Android
use this color in your color xml file and then give this color to your startcolor and end color
The solution is to disable the title of the toolbar:
this.getSupportActionBar().setDisplayShowTitleEnabled(false);
and to add a custom TextView:
<?xml version="1.0" encoding="utf-8"?>
<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_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:elevation="2dp"
android:focusable="false"
android:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/AppTheme.Toolbar" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#null"
android:text="Toolbar Title"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
Changing the background color to transparent in the style section should fix the issue
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#00000000</item>
</style>
The question How to make title background transparent on android app had similar issue above solution did the trick. The android app was for Renesas RX130 and Texas Instrument CC2650 BLE solution. Bellow is solution after the fix.
I'm updating my app with the new Toolbar from the support library v21. My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?
My code is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.
And in my Activity - OnCreate method:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
I ended up setting my own drop shadow for the toolbar, thought it might helpful for anyone looking for it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_alizarin"
android:titleTextAppearance="#color/White"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- **** Place Your Content Here **** -->
<View android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_dropshadow"/>
</FrameLayout>
</LinearLayout>
#drawable/toolbar_dropshadow:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#android:color/transparent"
android:endColor="#88333333"
android:angle="90"/>
</shape>
#color/color_alizarin
<color name="color_alizarin">#e74c3c</color>
Google released the Design Support library a few weeks ago and there is a nifty solution for this problem in this library.
Add the Design Support library as a dependency in build.gradle :
compile 'com.android.support:design:22.2.0'
Add AppBarLayout supplied by the library as a wrapper around your Toolbar layout to generate a drop shadow.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
.../>
</android.support.design.widget.AppBarLayout>
Here is the result :
There are lots of other tricks with the design support library.
http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
http://android-developers.blogspot.in/2015/05/android-design-support-library.html
AndroidX
As above but with dependency:
implementation 'com.google.android.material:material:1.0.0'
and com.google.android.material.appbar.AppBarLayout
You can't use the elevation attribute before API 21 (Android Lollipop). You can however add the shadow programmatically, for example using a custom view placed below the Toolbar.
#layout/toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<View
android:id="#+id/toolbar_shadow"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#drawable/toolbar_dropshadow" />
#drawable/toolbar_dropshadow
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#android:color/transparent"
android:endColor="#88333333"
android:angle="90"/> </shape>
in your activity layout
<include layout="#layout/toolbar" />
Use /values folders to apply the correct shadow style based on OS version.
For under 5.0 devices, use /values/styles.xml to add windowContentOverlay to the body of your activity:
<style name="MyViewArea">
<item name="android:foreground">?android:windowContentOverlay</item>
</style>
<style name="MyToolbar">
<item name="android:background">?attr/colorPrimary</item>
</style>
Then add your own custom shadow by changing your Theme to include:
<item name="android:windowContentOverlay">#drawable/bottom_shadow</item>
You can grab Google's IO app shadow resource here: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png
For 5.0 devices & later, use /values-v21/styles.xml to add elevation to your toolbar using a custom header style:
<style name="MyViewArea">
</style>
<style name="MyToolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="android:elevation">4dp</item>
</style>
Note that in the second case, I had to create an empty MyViewArea style so the windowContentOverlay wouldn't show up too.
[Update: changed resource names and added Google shadow.]
If you are seting the ToolBar as ActionBar then just call:
getSupportActionBar().setElevation(YOUR_ELEVATION);
Note: This must be called after setSupportActionBar(toolbar);
This worked for me very well:
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="0dp">
<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" />
</android.support.v7.widget.CardView>
i added
<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>
in toolbar description and it works for me.
Using 5.0+
My problem is that the toolbar does not cast any shadow if I don't set the "elevation" attribute. Is that the normal behavior or I'm doing something wrong?
That's the normal behavior. Also see the FAQ at the end of this post.
Was toying with this for hours, here's what worked for me.
Remove all the elevation attributes from the appBarLayout and Toolbar widgets (including styles.xml if you are applying any styling).
Now inside activity,apply the elvation on your actionBar:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);
This should work.
All you need is a android:margin_bottom equal to the android:elevation value. No AppBarLayout, clipToPadding, etc. required.
Example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="4dp"
android:background="#android:color/white"
android:elevation="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Inner layout goes here-->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
You can also make it work with RelativeLayout. This reduces layout nesting a little bit ;)
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_below="#id/toolbar"
android:background="#drawable/toolbar_shadow" />
</RelativeLayout>
In my situation elevation doesn't work well because I haven't given any background to the toolbar. Try giving background color to the toolbar then set elevation and it will work well.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:elevation="4dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:buttonGravity="center_vertical" />
</androidx.cardview.widget.CardView>
Most solutions work fine here. Would like to show another, similar alternative :
gradle:
implementation 'androidx.appcompat:appcompat:1.0.0-rc02'
implementation 'com.google.android.material:material:1.0.0-rc02'
implementation 'androidx.core:core-ktx:1.0.0-rc02'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
You layout can have a Toolbar View, and a shadow for it, below, similar to this (need modification of course) :
<LinearLayout
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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/>
<include
layout="#layout/toolbar_action_bar_shadow"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
res/drawable-v21/toolbar_action_bar_shadow.xml
<androidx.appcompat.widget.AppCompatImageView
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="wrap_content" android:src="#drawable/msl__action_bar_shadow"/>
res/drawable/toolbar_action_bar_shadow.xml
<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="wrap_content"
android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>
res/drawable/msl__action_bar_shadow.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:dither="true"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#33000000" />
<size android:height="10dp" />
</shape>
</item>
</layer-list>
styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar as Toolbar)
}
}
Full sample here, as I've noticed the IDE has a bug of saying foreground attribute is too new to be used here.
The correct answer will be to add
android:backgroundTint="#ff00ff"
to the tool bar
with
android:background="#android:color/white"
If you use other color then white for the background it will remove the shadow.
Nice one Google!
For 5.0 + : You can use AppBarLayout with Toolbar. AppBarLayout has "elevation" attribure.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:elevation="4dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
actionbar_background.xml
<item>
<shape>
<solid android:color="#color/black" />
<corners android:radius="2dp" />
<gradient
android:startColor="#color/black"
android:centerColor="#color/black"
android:endColor="#color/white"
android:angle="270" />
</shape>
</item>
<item android:bottom="3dp" >
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
add to actionbar_style background
<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">#drawable/actionbar_background</item>
<item name="android:elevation">0dp</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:layout_marginBottom">5dp</item>
name="displayOptions">useLogo|showHome|showTitle|showCustom
add to Basetheme
<style name="BaseTheme" parent="Theme.AppCompat.Light">
<item name="android:homeAsUpIndicator">#drawable/home_back</item>
<item name="actionBarStyle">#style/Theme.ActionBar</item>
</style>
I had similar problem with the shadow. The shadow is drawn by direct parent of AppBarLayout in my case. If height of the parent is the same as AppBarLayout's the shadow cannot be drawn. So checking size of the parent layout and maybe layout remake can solve the problem. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/
I am posting this because this took me hours to find so i hope it may help someone.
I had a problem that the shadow/elevation was not showing though i created a simple activity and placed the toolbar as follows:
<androidx.appcompat.widget.Toolbar
android:id="#+id/mt_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#color/colorPrimaryDark"
android:elevation="12dp"/>
It turns out that in the manifest
setting android:hardwareAccelerated="false" was causing it! once i removed it, the shadow appeared
Just put background
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:elevation="8dp"
android:background="#fff"
android:layout_height="?android:attr/actionBarSize"></androidx.appcompat.widget.Toolbar>
You need to use background color and elevation togather.
<com.google.android.material.appbar.MaterialToolbar
app:elevation="8dp"
android:elevation="8dp"
android:background="#color/white"/>