Implementing a fadding menu – Android with Xamarin

By | February 3, 2014
slinding_1

Figure 1. Sliding view in the Facebook app

By now you are quite familiar with those sliding views like the ones available on the LinkdIn or Facebook apps.

sliding_2

Figure 2. Home menu and Home button.

As with the previous articles I will continue using the CustomTitle project and I’ll be showing a simple way to implement that type of views which gives an interesting look and can also be useful in organizing the information to the user of an app.

In our example the fading view will actually be a fading menu. The fading view will be displayed when the Home option of the Action Bar is clicked.

Download the code here.

One thing to be aware off and the reason why I added the Figure 2. is that both the Home/Back option in the Action Bar and the Home/Back button are supposed to provide a similar function meaning, whether the user clicks the Home/Back option or clicks the Home/Back button the app is supposed to return to the previous view.

As always it’s up to the app designer to decided what will provide the user the most functional navigational options and implement accordingly and that’s what apps like LinkedIn and Facebook do. The Android API allows for the control of both so I show you how you can take advantage of it.

sliding_3

Figure 3. The sliding menu.

In our example when you click the Home/Back option which is the < sign in front of the logo on the Action Bar a menu will fade in to the existing view. When you click one of the options it will display a corresponding message in the click me textview and will fade out of the view.

To build the main menu I added a new LinearLayout to the existing layout and added the buttons you see in Figure 3. The Main.xml layout now looks like this:

<?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
    android:id=“@+id/main”
    android:orientation=“vertical”
    android:layout_width=“fill_parent”
    android:layout_height=“fill_parent”
    android:minWidth=“25px”
    android:minHeight=“25px”>
    <TextView
        android:text=“@string/clickme”
        android:textAppearance=“?android:attr/textAppearanceMedium”
        android:layout_width=“match_parent”
        android:layout_height=“wrap_content”
        android:id=“@+id/txClickMe” />
    <LinearLayout
        android:orientation=“vertical”
        android:minWidth=“25px”
        android:minHeight=“25px”
        android:layout_width=“166.0dp”
        android:layout_height=“463.8dp”
        android:id=“@+id/slidingMenuLayout”>
        <Button
            android:text=“@string/button1”
            android:drawableLeft=“@drawable/ic_action_share”
            android:layout_width=“match_parent”
            android:layout_height=“wrap_content”
            android:id=“@+id/shareButton” />
        <Button
            android:text=“@string/button2”
            android:drawableLeft=“@drawable/ic_action_copy”
            android:layout_width=“match_parent”
            android:layout_height=“wrap_content”
            android:id=“@+id/copyButton” />
        <Button
            android:text=“@string/button3”
            android:drawableLeft=“@drawable/ic_action_paste”
            android:layout_width=“match_parent”
            android:layout_height=“wrap_content”
            android:id=“@+id/pasteButton” />
    </LinearLayout>
</LinearLayout>

The fading effect is provided by the LayoutTransition object that is associated with the layout by adding the following code to the OnCreate of the activity:

      layoutTransition = new LayoutTransition ();
  layoutTransition.SetDuration (1000);

  mainLayout = FindViewById<ViewGroup> (Resource.Id.main);
  this.slidingLayout = mainLayout.FindViewById<View> (Resource.Id.slidingMenuLayout);
  this.slidingLayout.Visibility = ViewStates.Gone;
  mainLayout.LayoutTransition = layoutTransition;

The display of the menu is handled by OnOptionsItemSelected method which fires when any of the buttons in the Action Bar is clicked. In this case I added a case to the existing switch for the Android.Resource.Id.Home. It looks like this:

      case Android.Resource.Id.Home:
  {
    if (this.slidingLayout.Visibility != ViewStates.Visible)
    {
       this.slidingLayout.Visibility = ViewStates.Visible;
    }
    break;
  }

You can download the code here.

Drop us a comment or if you have any questions please contact us through our QualTech-Software Solutions or QualTechCloud Integrated Cloud solutions customer form

Leave a Reply