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 (5059 Views)