XamGirl

Material design is a comprehensive guide for visual, motion, and interaction design across platforms and devices. In mobile apps, Android support it by using the Material Theme which determines the look and feel of views and activities starting from Android 5.0 (Lollipop) on. One particular thing of Material Design is the use of shadows.

In the official documentation, you can find some guidelines of the correct use of shadows in each component. For example if you are using a ToolBar the elevation should be 4dp.

In this article, I’m going to show you how to add a bottom shadow to the Navigation Bar on iOS and Android.

Let’s code

To achieve this, we are going to do different approaches per platform. In the case of iOS will use a custom renderer and on Android will change it by modifying the style file.

iOS

The code in iOS is pretty simple, we just create a custom renderer for the NavigationPage and add some shadow to the NavigationBar.

Android

In Android, the first thing we are going to do is creating a new XML file called actionbar_shadow.xml. In this file, we will have our custom shadow.

After that, the next step is going to our style.xaml file(located in the ‘values’ folder) and add that shadow to the theme. For example:   <item name=“android:windowContentOverlay“>@drawable/actionbar_shadow</item> 

Also, you have to add the elevation you want. As I mentioned before according to the guidelines it should be 4dp:
<item name=“android:elevation“>4dp</item>

The result would be something like this:

And that’s it!

If you want to check the full source code, you can find it here: https://github.com/CrossGeeks/ShadowNavBarSample

References:

• https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows
• https://xipdev.wordpress.com/2014/10/10/how-to-create-a-material-style-action-bar-on-kitkat-and-older-android-versions/
• https://developer.android.com/design/material/index.html

Happy coding! 🙂