Adding Guillotine Menu to Xamarin.Android Application

1

Overview

I’m sure you must have come across the newest menu animation called Guillotine.  In this, the menu Sidebar becomes a Topbar as shown in below animation, where it drops down from the top of the page and gives a feeling of a Guillotine.

2

Currently, this animation is available for Native Android applications only and I didn’t see this available off-the-shelf in Xamarin.Android applications. So I’ve made use of Android binding library tutorial and created Xamarin.Android binding library and Nuget package for Guillotine Menu as well.

In this blog, I’ll demonstrate how to make use of this NuGet package and add GuillotineMenu to Xamarin.Android applications.

Prerequisites

  • Familiarity with creating Xamarin.Android applications

Add Guillotine Menu to Xamarin.Android Application

  • Create a New Blank Xamarin.Android Application.
  • Add NuGet package into your application, go to References select Manage Nuget Packages.  Search for GuillotineMenu-Xamarin and select the 1.2.0 version and click on install.

3

  • Add following nuget package called Xamarin.Android.Support.v7.AppCompat select 23.1.1 version for implementing ActionBar (Toolbar).
  • Open the Resources/values directory and a create a new file called styles.xml. Replace its contents with the following XML:

  • Edit Properties/AndroidManifest.xml and add the following android: theme attribute to the element so that the app uses the AppTheme.

  • Implement ActionBar with hamburger button in the “Main.axml file, so that when you click on this hamburger button, the corresponding animation is shown. In this case, it is a guillotine animation. Replace Main.axml source code with the below code snippet:

Note: You have to download the images from this link and paste it into your drawable folder (Goto References -> drawable) so that it takes respective images.

  • Create a Layout for the navigation menu (Goto References->Layout->Add->New item->select Android Layout). Name it as guillotine.axml, and click on Add button.

4

  • Replace guillotine.axml source code with the below code snippet.

When you click on Hamburger icon for the first time, animation should be shown. On the subsequent click, animation should be closed. Since you are achieving guillotine-style animation via guillotine.axml this layout should appear on top of any other layout. In this case guillotine.axml appears on top of Main.axml.

NOTE: One Important point to understand here is, the content layout (Main.axml) should also have hamburger icon at the same coordinates as the navigation menu (guillotine.axml) has.

  • Add the following using statement to MainActivity.cs – so that you can refer to the methods  of the java-based GuillotineMenu class that resides in the Bindings Library

  • Make sure MainActivity class is derived from AppCompatActivity class, so that we can set the toolbar with images.
  • Add the below statements to find a view (that was identified by the id attribute i.e. Resource.Id.toolbar and Resource.Id.root from the XML that was processed in Activity.OnCreate(Bundle),  and assign it to toolbar and root respectively inside OnCreate().

  • In order to show Guillotine Menu, it needs to be created and then added to the root(frameLayout). To achieve this, add the following code to OnCreate() method of  MainActivity.cs file.

  • Add below code to OnCreate() method, to get content Hamburger, which is required for construction of Guillotine Animation.

  • In order to achieve GuillotineAnimation, you need to instantiate GuillotineAnimation class by passing navigation layout, navigation Hamburger and content Hamburger objects in the constructor.  Add below code snippet to OnCreate Method.

  • Build and Run the application to see Guillotine Animation as shown below.2

Summary

This article explained how to add Guillotine Menu to Xamarin.Android application by adding the respective NuGet package. While this article is more specific about Guillotine menu, I am sure you this article will also give you enough idea about how to add something not available off-the-shelf into the Xamarin.Android. 

At WalkingTree we would love to hear from you and help you take advantage of the awesome Xamarin framework to create a native application.

You can find the source code related to this article at this repository.

References

  • For information on GuillotineMenu-Android refer to this link
  • For information on – “How to create Xamarin.Android Bindings Library” refer to this link
  • For information on – “How to change parameter names for Bindings Library” refer to this link
  • For information on – “How We Created Guillotine Menu Animation for iOS” refer to this link

Comments (3)

I just implement this menu..but how can I implement onclick menu Item listener?

var settingsButton = navigationLayout.FindViewById(Resource.Id.settings_group);
settingsButton.Click += (sender, e) => {
Toast.MakeText(this, “You clicked Settings icon”, ToastLength.Long);
};

You can find related source code at the below link https://github.com/walkingtree/XamarinSamples/blob/master/GuillotineMenu/GuillotineMenuTestApp/MainActivity.cs

Let me know for any questions.

Thanks for your comments. Glad to know that you’ve liked my blog posts.
With respect to Xamarin topic , following links , blogs are of my interest which you may find useful.
MotzCod.es by James Montemagno – http://motzcod.es/
Greg Shackles http://gregshackles.com/
Cheese, code and lulz http://blog.ostebaronen.dk/
Michael Ridland http://www.michaelridland.com/
Last but not least Xamarin official blog http://blog.xamarin.com

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.