Contents x
    Action Menu
    • 07 Feb 2024
    • 4 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    Contents

    Action Menu

    • Updated on 07 Feb 2024
    • 4 Minutes to read
    • Contributors
    • Print
    • Dark
      Light
    Article Summary

    As mentioned before, the best UX designs on the Blade are the ones that are quick to create, simple to use, have highly visible "Action Menus" to guide, and that easily tell users their available options and actions.

    The "Action Menus" are just custom actions that are highly visible, simple to understand and simple to select with the available Blade interaction methods.
    ​

    The ActionMenuActivity class in com.vuzix.hud.actionmenu with the HUD Action Menu Libraries provides Action Menu functionality in Blade apps. This class can be a great base for your Blade apps. It provides a great deal of features and custom methods that utilize the Blade's platform. You can also customize those methods via Method overrides to create your own new and unique applications and features.

    The ActionMenuActivity provides the following base features to help you get started quickly:

    • Custom methods to create custom "action menus" via the same simple mechanism as options menus.

    • Method override to control the look and feel of the Action menu:

      • Auto Pop-Up, Always Up and other menu styles

      • Default simple navigations like a simple Back navigation option and icon

      • Automatic generation of Action menus base on Normal Menu XML resource files like option menus

    • Additional menu items can be configured and further customized via View controls and custom menu item overrides.

    • Integration with BladeOS features and other HUD features like automatic dynamic theming

    For more information on the ActionMenuActivity, its features and other provided features in our HUD ActionMenu Librariy please refer to the JavaDoc documentation.

    The ActionMenuActivity provides an extension of the Android Default Activity which makes working on it almost identical to working on a normal Android Activity.

    Also the ActionMenus themselves are very comparable with the OptionMenus. We do have some custom tweaks and features, but for the most part, if you understand how to develop OptionMenus, you understand how to create ActionMenus.
    ​

    Now lets get started with integrating and using Vuzix ActionMenuActivity.

    To implement Action Menu on your Blade app, simply extend the MainActivity class from the ActionMenuActivity class as shown on line 7 in the screen below.

    NOTE: For simplicity and easier code reading, please remove the android.app.activity import. We will not be using that in the sample app.

    Java

    public class MainActivity extends ActionMenuActivity { . . . }


    ​

    Extending ActionMenuActivity Class

    Now that you are using the ActionMenuActivity, you can start using the custom override to simply add and create an Action Menu.

    As we mentioned before, for the most part we utilize the normal Android OS Menu style resource with some tweaks that will be described below.
    ​
    ​

    Create and Add an Action Menu

    First we need to create the Menu.

    To create a basic action menu, lets create a menu folder under res and create a new menu.xml file for our new action menu.


    ​


    ​

    When adding the menu resource folder, remember to change the Resource type to menu.


    ​


    ​

    Now that we have a menu, lets create a few dummy actions to practice.

    On the menu.xml editor, just create (Drag and Drop or via the Text Style) three items and customize the items in their Attributes to be:

    item1

    • ID = item1

    • Title = HelloWorld

    • OnClick = showHello

    item2

    • ID = item2

    • Title = Vuzix

    • OnClick = showVuix

    item3

    • ID = item3

    • Title = Blade

    • OnClick = showBlade
      ​

    Since we are going to do a few custom items, first lets add an Android ID to the text view in our main activity_main.xml layout.
    ​

    Open the activity_main.xml (res/layout/) and add an android id to the items attribute with a value of mainTextView. Below is the code if you want to do it in a text editor.

    NOTE: if you have not already completed the section for adding our Blade Device profile, we highly recommend doing that for you to see how the App will look on your Blade.

    Java

    <TextView android:id="@+id/mainTextView" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content" 
	android:text="Hello World!"
/>


    ​


    ​

    Now lets go back to the MainAcitvity.java file and tell the ActionMenuActivity to load these items as part of the action menu and create the onClick events for it to use.

    To get the sample action menu and some custom actions for it loaded, we will do the following:

    1. On the MainActivity override the "onCreateActionMenu" method and tell it to load our new menu.

    2. Create fields for those action menus to do some custom simple UI modifications for demonstration and fun.

    3. Create the custom OnClick events for the menu items to trigger on Click event.
      ​

    For simplicity and clarity, lets begin by putting the fields on top of the activity .

    Java

    private MenuItem HelloMenuItem; private MenuItem VuzixMenuItem; 
private MenuItem BladeMenuItem; private TextView mainText;


    ​

    Now override the onCreateActionMenu and do some actions and setup.

    At the same time, create an internal method to do some Action menu update and finally add the onClick actions.

    Here we are overriding the "alwaysShowActionMenu" and returning True. This is for demo purposes only. You can customize all this functionality on your own. Feel free to change and play with the sample code.

    NOTE: We are using a simple toast message to show a notification on the screen.

    Java

    @Override protected boolean onCreateActionMenu(Menu menu) {
	super.onCreateActionMenu(menu);
	getMenuInflater().inflate(R.menu.menu, menu);
	HelloMenuItem = menu.findItem(R.id.item1);
	VuzixMenuItem = menu.findItem(R.id.item2);
	BladeMenuItem = menu.findItem(R.id.item3);
	mainText = findViewById(R.id.mainTextView);
	updateMenuItems();
	return true;
}
@Override protected boolean alwaysShowActionMenu() {
	return true;
}
private void updateMenuItems() {
	if (HelloMenuItem == null) {
		return;
	}
	VuzixMenuItem.setEnabled(false);
	BladeMenuItem.setEnabled(false);
}
//Action Menu Click events 
//This events where register via the XML for the menu definitions.
public void showHello(MenuItem item){
	showToast("Hello World!");
	mainText.setText("Hello World!");
	VuzixMenuItem.setEnabled(true);
	BladeMenuItem.setEnabled(true);
}
public void showVuzix(MenuItem item){
	showToast("Vuzix!");
	mainText.setText("Vuzix!");
}
public void showBlade(MenuItem item){
	showToast("Blade");
	mainText.setText("Blade");
}
private void showToast(final String text){
	final Activity activity = this;
	activity.runOnUiThread(new Runnable() {
		@Override public void run() {
			Toast.makeText(activity, text, Toast.LENGTH_SHORT).show();
		}
	});
}


    ​

    Your class should look something like this:


    ​

    Running the Sample Blade App in your Blade

    If you have a Blade, you can connect and run this Sample Blade App on it.

    There are other features, resources and methods provided to allow you to customize the actions menus and other parts of the user interface.

    Feel free to explore these by reading the JavaDocs or trying them out on your own.


    ​

    Now we are going to modify and learn about our own recommended UI styles.
    ​
    Next: UI Layout Style Change

    Was this article helpful?
    What's Next
    Resources
    Legal
    Regions
    Copyright © 2024 Vuzix Corporation All Rights Reserved