• 1 min read

Xamarin.Forms: Drop Shadows on Android Navigation Toolbar

One thing that always bothered me when developing Xamarin.Forms applications for Android is that for some reason the toolbar area looked flat... well because it was flat:

NoShadow

See how it just melds together with the rest of the applicaton. Where is that lovely drop shadow that we know and love?!?!?!

Well, it is a bit complicated as that elevation drop shadow comes from the Toolbar and Xamarin.Forms applications only have 1 today that you don't really have access to. I have asked to extend the SetElevation platform specificly over on GitHub, but for now we will need to fix this up in our Toolbar.axml. This means that if you are using a TabbedPage and have tabs on top then you will NOT want to do this.

If we head over to the Toolbar.axml inside of the Android project and go to the source tab we will add a new property on the Toolbar:

android:elevation="6dp"

That is it! We are now good to go:

Shadow

Look at that beautiful drop shadow! It is the little things in life that make me happy.

James Montemagno
Author

James Montemagno

James Montemagno is a Principal Lead Program Manager for Developer Community at Microsoft. He has been a .NET developer since 2005, working in a wide range of industries including game development, printer software, and web services. Live, Love, Bike, and Code.

Milli the dog peeking up from the bottom of the page