Adding Guillotine Menu to Xamarin.Android Application


1

Overview

I’m sure you must have come across newest menu animation called Guillotine.  In this, the menu Side bar becomes a Top bar 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:
<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="AppTheme" parent="Theme.Guillotine"/>
  <style name="Theme.Guillotine" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimaryDark">#444153</item>
    <item name="colorPrimary">#383547</item>
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
   </style>
</resources>
  • Edit Properties/AndroidManifest.xml and add the following android: theme attribute to the element so that the app uses the AppTheme.
<application 
       android:label="@string/app_name"
       android:icon="@drawable/ic_launcher"
       android:theme="@style/AppTheme"></application>
  • 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 guillotine animation. Replace Main.axml source code with the below code snippet:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#383547"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
           <android.support.v7.widget.Toolbar
                     android:id="@+id/toolbar"
                     android:layout_height="wrap_content"
                     android:layout_width="match_parent"
                     android:minHeight="?attr/actionBarSize"
                     app:contentInsetStart="0dp"
                     android:windowNoTitle="true">
                     <ImageView
                       android:id="@+id/contentHamburger"
                       android:layout_height="wrap_content"
                       android:layout_width="wrap_content"
                       android:src="@drawable/ic_menu_90" />
                    <android.support.v7.widget.AppCompatTextView
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_gravity="center"
                       android:text="My Activity"
                       android:textStyle="bold"
                       android:textSize="20dp" />    
             </android.support.v7.widget.Toolbar>
           <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="48dp"
                android:src="@drawable/content_1" />
          <ImageView
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:src="@drawable/content_2" />
     </LinearLayout>
</FrameLayout>

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 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.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
               xmlns:android="http://schemas.android.com/apk/res/android"
               xmlns:app="http://schemas.android.com/apk/res-auto"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:background="#444153"
               android:orientation="vertical">
              <android.support.v7.widget.Toolbar
                    android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:minHeight="?attr/actionBarSize"
                    app:contentInsetStart="0dp"
                    android:windowNoTitle="true">
               <ImageView
                   android:id="@+id/guillotineHamburger"
                   android:layout_height="wrap_content"
                   android:layout_width="wrap_content"
                   android:src="@drawable/ic_menu" />
                 </android.support.v7.widget.Toolbar>
            <LinearLayout
                    android:id="@+id/profile_group"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_marginTop="48dp">
             <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="100dp"
                android:src="@drawable/ic_profile" />
             <android.support.v7.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="24dp"
                android:text="Profile" />
          </LinearLayout>
    <LinearLayout
        android:id="@+id/feed_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="48dp">
        <ImageView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:layout_marginLeft="100dp"
             android:src="@drawable/ic_feed" />
        <android.support.v7.widget.AppCompatTextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginLeft="24dp"
             android:text="feed"/>
    </LinearLayout>
    <LinearLayout
         android:id="@+id/activity_group"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:layout_marginTop="48dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:src="@drawable/ic_activity_active" />
        <android.support.v7.widget.AppCompatTextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginLeft="24dp"
             android:text="activity" />
    </LinearLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="40dp" />
    <LinearLayout
         android:id="@+id/settings_group"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:layout_marginTop="48dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:src="@drawable/ic_settings" />
        <android.support.v7.widget.AppCompatTextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginLeft="24dp"
             android:text="settings" />
    </LinearLayout>
</LinearLayout>

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 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
       using Com.Yalantis.Guillotine.Animation;
  • 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().
           SetContentView(Resource.Layout.Main);
           var toolbar = 
           FindViewById<Android.Support.V7.Widget.Toolbar>
           (Resource.Id.toolbar);
           var root = FindViewById<FrameLayout>(Resource.Id.root);
           SetSupportActionBar(toolbar);
           SupportActionBar.Title=null;
  • In order to show Guillotine Menu, it needs to be created and then added to the root(frameLayout). To achieve this, add following code to OnCreate() method of  MainActivity.cs file.
View navigationLayout = LayoutInflater
                         .From(this)
                         .Inflate(Resource.Layout.guillotine, null);
                         root.AddView(navigationLayout);
var navigationHamburger = navigationLayout
                        .FindViewById(Resource.Id.guillotineHamburger);
  • Add below code to OnCreate() method, to get content Hamburger, which is required for construction of Guillotine Animation.
var contentHamburger = FindViewById<ImageView>
                              (Resource.Id.contentHamburger);
  • 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.
   new GuillotineAnimation
               .GuillotineBuilder(
                            navigationLayout,
                            navigationHamburger,
                           contentHamburger)
               .SetClosedOnStart(true)
               .SetDuration(1000)
               .SetStartDelay(250)
               .SetActionBarViewForAnimation(toolbar)
               .SetInterpolator(new BounceInterpolator()).Build();
  • 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
Tagged with: , , , , ,
Posted in Xamarin
2 comments on “Adding Guillotine Menu to Xamarin.Android Application
  1. venkataramanam says:

    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.

  2. Nidhin says:

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: