Insights

How to use Xamarin and Sitecore to create a music app - Part 4

October 28, 2016

In this series of articles, I'll explore some of the resources available in Sitecore Mobile SDK and show you how to create a cool app that you can use as the base for future mobile apps that interact with Sitecore.

If you have missed the previous articles, please read:

I uploaded the complete code to Github. Additionally, I added a Sitecore package so that you can install it in your local Sitecore instance.

Today we will be talking about Glide, which is an image loading framework for Android, AppBarLayout, and CollapsingToolbarLayout.

Glide

Glide is a fast and efficient open source media management and image loading framework for Android that wraps media decoding, memory and disk caching, and resource pooling into a simple and easy to use interface.

Originally it was developed for Android - bumptech/glide - and then adapted to Xamarin - beraybentesen/glide-xamarin-android.

In order to install Glide you have to include the Glide.Xamarin package. You can use either the Nuget Package Manager (Tools > Nuget Package Manager > Manage NuGet Packages for Solution...) or install it through Package Manager Console (Tools > Nuget Package Manager > Package Manager Console):

001.png

Now in your solution, open the class AlbumsAdapter.cs and replace the code of OnBindViewHolder method with the following:

002.png

Don't forget to add a "using Com.Bumptech.Glide" at the beginning of the class AlbumsAdapter.cs.

If you run your app you should see the following:

003.png

You can do much more with Glide. There is support for animated GIFs, custom animations, fast loading from cache, etc. For more information, see Glide wiki.

AppBarLayout

AppBarLayout is a vertical LinearLayout which was introduced in the Design Support Library, intended to contain the toolbar to display animations based on scrolling events.

Children views should provide their desired scrolling behavior through the associated layout XML attribute: app:layout_scrollFlags.

Additionally, AppBarLayout is intended to be contained in CoordinatorLayout.

Open the /Resources/layout/Main.axml file and replace the current code with the following:

004.png

If you run your app, you should see a red app bar:

005.png

CollapsingToolbarLayout

CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of an AppBarLayout. The CollapsingToolbarLayout enhances the standard toolbar by providing a range of options and level of control over the collapsing of the app bar and its children in response to coordinated scrolling actions.

One of the CollapsingToolbarLayout features is the collapsing title where a title which is larger when the layout is fully visible collapses and becomes smaller as the layout is scrolled off screen.

Open the /Resources/layout/Main.axml file and replace the current code with the following:

006.png

007.png

And then open the class MainActivity.cs and replace the current code with the following:

008.png

009.png

010.png

In the code above you will notice the following:

  • We added a SetupCollapsingToolbar() method that sets the toolbar title to empty, sets its initial state to expanded, and binds the OffsetChanged event so that when the user scrolls down and the toolbar is totally collapsed, we update the toolbar title with the application name;
  • We added a LoadBackdropCover() method that loads the cover image using Glide framework;
  • AppBarLayout_OffsetChanged() method basically calculates the scroll range in order to clear/update the toolbar title with the application name.

If you run your app you should see the Collapsing Toolbar in action.

011.png

This concludes our music app article series - I hope you have enjoyed it!

Meet The Challenges Of Today's Digital Economy

Ready to take that first step and rise to your digital potential? Contact Valtech today.
Talk to us