# Xamarin Forms – Creating a Gradient Header

In the design document for the Doctriod app you would’ve noticed that it uses a gradient header. To achieve a similar effect (shown in the screenshots below) in Xamarin Forms, we need to make changes in the Shared, Android and iOS project.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664280613877/D2_87f1rl.png align="left")

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1664280629664/W1SqiHBYd.png align="left")

### Shared Project

Start by creating a custom **NavigationPage** class in the shared project (_Doctriod_) called `GradientHeaderNavigationPage`. The class should inherit from the `NavigationPage` class.

The only thing happening in the class mentioned above is that we’re setting the navigation bar text color to white. Next, because the project uses [Prism](https://prismlibrary.github.io/), we need to change the  
`RegisterTypes` method in the `App` class (_App.xaml.cs_) to use our newly created `GradientHeaderNavigationPage` class instead of the normal `Navigationpage`.

### Android Project

In your Android project(_Doctriod.Android_) create a new class called `GradientHeaderNavigationPageRenderer` in the _Renderers_ folder. The class inherits from `NavigationPageRenderer` and there’s a lot of stuff happening this class, but the method that does the work is called `SetGradientBackground` which in turn is called from `OnViewAdded`

You can view the _GradientHeaderNavigationPageRenderer.cs_ file in its entirety on [Github](https://github.com/Pietervdw/doctriod-xamarin/blob/master/src/Doctriod/Doctriod/Doctriod.Android/Renderers/GradientHeaderNavigationPageRenderer.cs)

### iOS Project

Our last step will be to create a new class called `GradientHeaderPageRenderer` in our iOS project(_Doctriod.iOS_) You can create the file anywhere inside the iOS project, but I like to create renderers inside the _Renderers_ folder.

The `GradientHeaderPageRenderer` will inherit from `PageRenderer` and the method that does most of the work is called `SetGradientBackground` and is called from `ViewWillAppear`

You can view the contents of the entire file on [Github](https://github.com/Pietervdw/doctriod-xamarin/blob/master/src/Doctriod/Doctriod/Doctriod.iOS/Renderers/GradientHeaderPageRenderer.cs).

That should do it. If all goes well you should see similar results as shown in the images at the top of this post. Additional reading and research I used to compile this post is listed below.

Thank you for reading. Until next time, keep coding!


### Additional Reading

*   [https://github.com/CrossGeeks/CustomNavigationBarSample](https://github.com/CrossGeeks/CustomNavigationBarSample "https://github.com/CrossGeeks/CustomNavigationBarSample")
*   [https://stackoverflow.com/questions/46809733/how-to-add-a-gradient-in-xamarin-forms-toolbar-and-uinavigationbar](https://stackoverflow.com/questions/46809733/how-to-add-a-gradient-in-xamarin-forms-toolbar-and-uinavigationbar "https://stackoverflow.com/questions/46809733/how-to-add-a-gradient-in-xamarin-forms-toolbar-and-uinavigationbar")
*   [https://forums.xamarin.com/discussion/132362/cross-platform-gradient-navigationbar](https://forums.xamarin.com/discussion/132362/cross-platform-gradient-navigationbar "https://forums.xamarin.com/discussion/132362/cross-platform-gradient-navigationbar")
*   [https://github.com/vackup/StatusBarGradientBackground/](https://github.com/vackup/StatusBarGradientBackground/ "https://github.com/vackup/StatusBarGradientBackground/")