ActionBar with Menus in Android Xamarin

This code sample demonstrates the different types of menus available in Android and its ActionBar. The Options Menu, Popup Menu, and Sliding Menu/Flyout Menu.

1) Options Menu:
a) Create menu .xml file and must be located in a menu folder under resources and the menu items are as below.
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

  <item
      
android:id="@+id/action_sync"
      
android:title="Sync"
      
android:showAsAction="ifRoom"
      
android:icon="@drawable/ic_navigation_refresh" />
  <item
    
android:id="@+id/action_overflow"
    
android:title="Sliding Menu"
    
android:showAsAction="ifRoom"
    
android:icon="@drawable/action_overflow"/>
  <item
    
android:id="@+id/action_slide"
    
android:title="Popup Menu"
    
android:showAsAction="ifRoom"
    
android:icon="@drawable/action_menu"/>
</menu>

b) OnCreateOptionsMenu function is available in Activity, override this method and associate the menu.xml to MenuInflater as below.
public override bool OnCreateOptionsMenu(IMenu menu)
        {
            MenuInflater.Inflate(Resource.Menu.main, menu);
             return true;
        }
c) The next setup is implementing the method that will fire when one of the options of the menu is clicked. That is done by overriding the OnOptionsItemSelected.

public override bool OnOptionsItemSelected(IMenuItem item)
        {
            switch (item.ItemId)
            {
                case Resource.Id.action_sync:
                     return true;
                case Resource.Id.action_overflow:
                     this.FirstViewModel.NavigateToPopup();
                     return true;
                case Resource.Id.action_slide:
                     this.FirstViewModel.NavigateToPopup();
                     return true;
                 default:
                     return base.OnOptionsItemSelected(item);
            }
        }
In above function, respective viewmodel methods are being called when each menu item gets selected.

2) Popup Menu:
When you create the options menu as explained above and actionbar does not accommodate with all the menu item icons, then you see overflow image in Actionbar, when clicks on overflow image, menu will be opened as popup as shown in below image.


When you are implementing a Custom ActionBar where you want to implement the Popup menu, follow below steps.
a) Create menu.xml file as explained in section 1.
b) Create Custom Actionbar layout in .axml file and place the overflow image button
  <FrameLayout
        
android:layout_width="fill_parent"
        
android:layout_height="wrap_content"
        
android:id="@+id/frameLayout1"
        
android:background="@color/app_actionbar_background_color">
        <RelativeLayout
            
android:orientation="horizontal"
             
android:layout_width="fill_parent"
             
android:layout_height="40dp"
             
android:id="@+id/linearLayout1">
            <View
                 
android:background="@drawable/action_menu"
                 
android:layout_width="30dp"
                 
android:layout_height="40dp"
                 
android:id="@+id/MenuButton"
                 
android:layout_margin="2dp" />
            <TextView
                 
android:text="Menu"
                 
android:textAppearance="?android:attr/textAppearanceMedium"
                 
android:layout_width="wrap_content"
                 
android:layout_height="fill_parent"
                 
android:id="@+id/txtHomeTitle"
                 
android:gravity="center"
                 
android:textColor="@color/app_title_background_color"
                 
android:layout_marginLeft="90dp" />
            <ImageButton
                 
android:src="@drawable/action_overflow"
                 
android:layout_width="wrap_content"
                 
android:layout_height="fill_parent"
                 
android:id="@+id/imgpopupMenu"
                 
android:gravity="right"
                 
android:background="@color/app_actionbar_background_color"
                 
android:layout_alignParentRight="true" />
        </RelativeLayout>

c) OnCreate function of activity find the imagebutton, associate the menu.xml to PopupMenu and open the PopupMenu when clicks on imagebutton as below.
var imgpopupMenu = FindViewById<ImageButton>(Resource.Id.imgpopupMenu);

            //Popup Menu
            imgpopupMenu.Click += (s, arg) =>
            {
                PopupMenu popupMenu = new PopupMenu(this, imgpopupMenu);
                 popupMenu.Inflate(Resource.Menu.popup);

                 //popupMenu.MenuItemClick += popupMenu_MenuItemClick;
                popupMenu.Show();
            };
d) Refer the below screenshot for custom actionbar with Popupmenu.

3) Sliding Menu:
The idea is to put the navigation menu of your application in an initially hidden drawer that can be revealed by a button click or a horizontal swipe as shown in below screenshot.
In this case, menu is implemented as FrameLayout containing two items, the Menu view and Content View. This FrameLayout is responsible for showing the menu.

a) This is the skeleton of our main activity layout:
<Menus.Droid.Views.FlyOutContainer xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/FlyOutContainer">
    <include
        layout="@menu/MenuLayout" />
    <include
        layout="@layout/ContentLayout" />
</Menus.Droid.Views.FlyOutContainer>

From above, outer layout is a custom FlyoutContainer class created to handle the two views, one for menu which ID will be FlyoutMenu and one for the Content view which ID will be FlyoutContent.

Sample Menu Layout is created with ID FlyoutMenu as below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="300dp"
    android:layout_height="fill_parent"
    android:background="@color/app_actionbar_background_color"
    android:id="@+id/FlyOutMenu"
    android:padding="4dp">

  <View
      android:layout_width="fill_parent"
      android:background="@color/sub_section_item_divider_color"
      android:layout_height="3dp"/>

  <LinearLayout
      android:orientation="horizontal"
      android:minWidth="25px"
      android:minHeight="25px"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_margin="8dp">
    <TextView
        android:text="Home"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:linksClickable="true"
        android:clickable="true"
        android:cursorVisible="true"
        android:id="@+id/txtHome"
        android:layout_gravity="center"
        android:layout_marginLeft="8dp"
        android:textColor="@color/app_title_background_color"
        />
  </LinearLayout>
  <View
      android:layout_width="fill_parent"
      android:layout_height="1dp"
      android:background="#abe4e4e4"
      android:layout_gravity="center"
      android:layout_marginLeft="8dp"
      android:layout_marginRight="14dp" />
  
</LinearLayout>

Sample Content Layout with Custom ActionBar in Frame Layout and Content view with ID as FlyoutContent as below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:id="@+id/FlyOutContent"
    android:layout_height="fill_parent"
    android:background="@color/app_title_background_color">
    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:id="@+id/view1"
        android:background="@color/app_actionbar_background_color" />
  <!--Custom Action Bar-->
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/frameLayout1"
        android:background="@color/app_actionbar_background_color">
        <RelativeLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:id="@+id/linearLayout1">
            <View
                android:background="@drawable/action_menu"
                android:layout_width="30dp"
                android:layout_height="40dp"
                android:id="@+id/MenuButton"
                android:layout_margin="2dp" />
            <TextView
                android:text="Menu"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/txtHomeTitle"
                android:gravity="center"
                android:textColor="@color/app_title_background_color"
                android:layout_marginLeft="90dp" />
            <ImageButton
                android:src="@drawable/action_overflow"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:id="@+id/imgpopupMenu"
                android:gravity="right"
                android:background="@color/app_actionbar_background_color"
                android:layout_alignParentRight="true" />
        </RelativeLayout>
    </FrameLayout>
    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:id="@+id/view2" />
  <!--Content/body of the view-->
</LinearLayout>

b) In  OnCreate method of Activity, write piece of code to open the sliding navigational menu.
   var menu = FindViewById<FlyOutContainer>(Resource.Id.FlyOutContainer);
            var menuButton = FindViewById(Resource.Id.MenuButton);
            menuButton.Click += (sender, e) =>
            {
                menu.AnimatedOpened = !menu.AnimatedOpened;
             };

Please download the working sample from below link.
http://nullskull.com/FileUpload/-407123783_Menus.zip      

By Siva Jagan Dhulipalla   Popularity  (5389 Views)