Coordinator Layout with Xamarin.Forms

Coordinator Layout with Xamarin Forms

In this article we’ll create a simple Xamarin Forms app that uses the Coordinator Layout. The app is inspired by a view from the Blinkist app and it will have similar animations for its title section and the buttons right below it.

The Coordinator Layout allows you to synchronise a top view and a bottom view by changing the top view based on the scrolling position of the bottom view.

Have a look at the gif below and notice how the title view is expanding and the label is increasing in size while scrolling down. Source.

Heads Up

In a production-ready app you’d use MVVM and have the content be provided by a viewmodel from a data source. Since the focus of this article is to use CoordinatorLayout, I decided not to muddle the waters by providing any code that’s not directly relevant.

To build the app you’ll need:

• Visual Studio with the Mobile app workload or Rider.
• Android Emulator or a real device.
• Basic Xamarin.Forms knowledge.