Creating menus for Android applications

Android Menus Creating

Creating menu-content

Where are the menus located?

For each menu, it is necessary to define the items contained in it. This is defined in XML format in a file located in a specific folder called “menu” (located within the “res” folder). We generate this file by right-clicking on the “menu” folder in the project section and selecting the New / “Menu resources file” option.

<? xml version = "1.0" encoding = "utf-8"?>
<menu xmlns: android = "http://schemas.android.com/apk/res/android">
    // here goes the contents of the menu
</menu>

Menu item attributes

Menu items are defined through an element that can have many attributes defined, the most commonly used attributes are the following:

  • id (android:id=”@+id/delete”)
  • title (android:title=”@string/delete”)
  • icon (android:icon=”@drawable/ic_delete”)
  • enabled (android:enabled=”false”)
  • checkable (android:checkable=”true”)
  • showAsAction (These attributes are related to the display of “options menu” items within the action bar)
    • ifRoom (app:showAsAction=”ifRoom”)
    • withText (app:showAsAction=”withText”)
    • never (app:showAsAction=”never”)
    • always (app:showAsAction=”always”)

Example

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:id="@+id/edit_menu_item"
            android:title="@string/edit"
            android:checkable="true"
            android:checked="true"
            android:icon="@drawable/ic_mode_edit" />
    <item
            android:id="@+id/make_default"
            android:title="@string/make_default"
            android:checkable="true"
            android:checked="true"/>
    <item
            android:id="@+id/delete_menu_item"
            android:title="@string/delete"
            android:icon="@drawable/ic_delete" />
</menu>

Groups

It is possible to group similar menu members into groups:

<group android:id="@+id/group_delete">
    <item android:id="@+id/menu_archive"
          android:title="@string/menu_archive" />
    <item android:id="@+id/menu_delete"
          android:title="@string/menu_delete" />
</group>

Submenu

Creating a sub-menu is easy; a new menu element should be installed within the item element:

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/edit_menu_item2"
        android:icon="@drawable/ic_mode_edit"
        android:title="@string/edit"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/options_menu"
        android:icon="@drawable/ic_device_hub_black"
        android:title="Options">
        <menu>
            <item
                android:id="@+id/subMenu1"
                android:title="Submenu1"/>
            <item
                android:id="@+id/subMenu2"
                android:title="Submenu2"/>
        </menu>
    </item>
</menu>

REMARK:
For items that use the android attribute: checkable = “true”, after clicking on this menu item, you need to adjust the status in the checkbox, as checkBox (or radio button) does not automatically change its status. After the click, we have to ask what the status of the item was before this click (whether it was checked) using isChecked ().
If previously checked then now after click it is no longer and we have to put state setChecked (false) and vice versa if it was not checked item.isChecked () = false now after click is and we have to put item.setChecked (true);

switch (item.getItemId()) {
     case R.id.make_default:
        if (item.isChecked()){
            item.setChecked(false);
            Toast.makeText(this, "Sada više nije čekirano", Toast.LENGTH_SHORT).show();
        }else {
            item.setChecked(true);
            Toast.makeText(this, "Sada je čekirano", Toast.LENGTH_SHORT).show();
        }
        return true;
}

Floating context menu

Creating menu-content

First, you need to define the menu content in XML format.

Example (some_menu.xml)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <item
        android:checkable="true"
        android:id="@+id/make_default"
        android:title="@string/make_default" />
    <item
        android:id="@+id/save"
        android:title="@string/save" />
    <item
        android:id="@+id/remove"
        android:title="@string/remove" />
</menu>

In this case, the first menu item is the so-called. checkbox.

Integrating menus into activity

After defining the content, it is necessary to make that menu available in the activity.

Example

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
    super.onCreateContextMenu(menu, v, menuInfo);
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.neki_menu, menu);
}

Registering the button that opens the menu

As part of the activity, you need to register a button (in the onCreate () method) that will be linked to that menu:

ImageView ivOptionsMenuBtn;
ivOptionsMenuBtn = findViewById(R.id.ivOptionsDots);
 
registerForContextMenu(ivOptionsMenuBtn);

And then hook a clickListener to it that will call the openContextMenu (view) method on a click:

ivOptionsMenuBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        openContextMenu(v);
    }
});

Defining what will happen by clicking on a menu member

In the onContextItemSelected () method, we define what will happen by clicking on one of the menu members. To select a menu member, use the “id” of the XML defined id (some_menu.xml):

@Override
public boolean onContextItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.make_default:
            Toast.makeText(this, "Make default", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.save:
            Toast.makeText(this, "Save", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.remove:
            Toast.makeText(this, "Remove", Toast.LENGTH_SHORT).show();
            return true;
        default:
            return super.onContextItemSelected(item);
    }
}

Options menu

Options menu does not need to define a button that will respond to the click and open this menu, because this button inserts the android in the action bar and assigns it an icon with three vertical points.

It should be emphasized that here we have the opportunity to define which menu item will be immediately displayed in actionBar next to the options icon (three vertical points). This is provided with the app attribute: showAsAction = “ifRoom“. The options menu is displayed exactly where the button is clicked. If a member is displayed immediately in the action bar, it is not in the menu itself.

Creating menu-content

In addition to these specifics, as with all other menus, here it is necessary to define the contents of the menu in XML format.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
            android:id="@+id/share"
            android:icon="@drawable/ic_device_hub_black"
            android:title="device"
            app:showAsAction="ifRoom" />
    <item
            android:id="@+id/edit_menu_item"
            android:icon="@drawable/ic_mode_edit"
            android:title="@string/edit" />
    <item
            android:id="@+id/make_default"
            android:checkable="true"
            android:title="Make default" />
    <item
            android:id="@+id/delete_menu_item"
            android:title="@string/delete"
            android:icon="@drawable/ic_delete" />
    <item
            android:id="@+id/exit"
            android:title="Exit" />
</menu>

Integrating menus into activity

Similar to the context of the Context Float menu, the menu is integrated here as well:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater =getMenuInflater();
    inflater.inflate(R.menu.options_menu, menu);
    return true;
}

Defining what will happen by clicking on a menu member

In the onOptionsItemSelected method, we define what happens after clicking on one of the menu members:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.share:
            Toast.makeText(this, "Share", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.edit_menu_item:
            Toast.makeText(this, "Edit", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.make_default:
            if (item.isChecked()){
                item.setChecked(false);
                Toast.makeText(this, "Is not default", Toast.LENGTH_SHORT).show();
            }else {
                item.setChecked(true);
                Toast.makeText(this, "Is default", Toast.LENGTH_SHORT).show();
            }
            return true;
        case R.id.delete_menu_item:
            Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.exit:
            Toast.makeText(this, "Exit", Toast.LENGTH_SHORT).show();
            return true;
        default:
            return super.onOptionsItemSelected(item);
    }
}

PopUp menu

This menu is specific because it is tied to where it was clicked. The menu is displayed where there is space either below the clicked place or above the clicked place. The PopUp menu is hidden from the screen when a user clicks on a menu member or somewhere off the menu.

Defining what will happen by clicking on a menu member

In order for a class (e.g., activity) to execute actions after a click, the class needs to implement the PopupMenu.OnMenuItemClickListener interface.
After implementing the interface, it is necessary to implement (Override) and its abstract method onMenuItemClick (), through which we are able to define for each menu member what action will be taken after clicking on the member.

@Override
public boolean onMenuItemClick(MenuItem menuItem) {
    switch (menuItem.getItemId()) {
        case R.id.edit_menu_item:
            Toast.makeText(this, "Edit", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.delete_menu_item:
            Toast.makeText(this, "Delete", Toast.LENGTH_SHORT).show();
            return true;
        case R.id.make_default:
            Toast.makeText(this, "MakeDefault", Toast.LENGTH_SHORT).show();
            return true;
        default:
            return false;
    }
}

Integrating menus into activity

In order to display the PopUp menu we need to define an onClick method (eg showPopup ()) on the trigger (eg some button) that looks like this:

public void showPopup (View v) {
     PopupMenu popup = new PopupMenu (this, v);
     // Adding a listener to each menu member
     popup.setOnMenuItemClickListener (this);
     // Connect to the contents of the menu
     MenuInflater inflater = popup.getMenuInflater ();
     inflater.inflate (R.menu.popup_menu, popup.getMenu ());
     // Display the menu
     popup.show ();
}

Contextual Action Mode menu

This specific menu is displayed as part of actionBar, more precisely via actionBar. In addition to the menu members shown by the icons at the right, there is a menu title in the middle, and an arrow to close the menu on the left.

Creating menu-content

As with any menu, you must first create the contents of the menu in XML format (New “Menu resources file”) in the “menu” folder

Example (context_action_menu.xml)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/edit_menu_item"
        android:title="@string/edit"
        android:icon="@drawable/ic_mode_edit" />
    <item
        android:id="@+id/delete_menu_item"
        android:title="@string/delete"
        android:icon="@drawable/ic_delete" />
</menu>

Defining the ActionModeCallback method

First of all, within the activity it is necessary to define a variable of type ActionMode (note choose version v.7) as it is used within the callback method:

private ActionMode mActionMode;

And then the ActionModeCallback instance where all the work on the Contextual Action Mode menu is done. There are 4 methods, in the first onCreateActionMode () the predefined menu content is linked to the Action Mode menu. The onActionItemClicked () method defines actions after clicking on one of the members. And what happens when the menu closes is defined in the onDestroyActionMode () method.

private ActionMode.Callback mActionModeCallback = new ActionMode.Callback () {
    @Override
    public boolean onCreateActionMode (ActionMode actionMode, Menu menu) {
        // Associate predefined content with this menu type
        actionMode.getMenuInflater (). inflate (R.menu.context_action_menu, menu);
        // Define the Title menu
        actionMode.setTitle ("Select option");
        return true;
    }
    @Override
    public boolean onPrepareActionMode (ActionMode actionMode, Menu menu) {
        return false;
    }
    @Override
        public boolean onActionItemClicked (ActionMode actionMode, MenuItem menuItem) {
            // Define a click action on each menu member
            switch (menuItem.getItemId ()) {
                case R.id.edit_menu_item:
                    // Action that takes place after clicking on a menu member:
                    Toast.makeText (MainActivity.this, "We're editing something", Toast.LENGTH_SHORT) .show ();
                    // We can close the menu after clicking on the selection
                    actionMode.finish ();
                    return true;
                case R.id.delete_menu_item:
                    Toast.makeText (MainActivity.this, "We're deleting something", Toast.LENGTH_SHORT) .show ();
                    // We can close the menu after clicking on the selection
                    actionMode.finish ();
                    return true;
                default:
                    return false;
            }
        }
    @Override
    public void onDestroyActionMode (ActionMode actionMode) {
        // We define the ActionMode value after closing the menu
        mActionMode = null;
    }
};

Registering the button that opens the menu

As part of the activity, it is necessary to define a clickListener (in the onCreate () method) with a specific button, with which we will enable a predefined callback method mActionModeCallback () to be called:

mActionMode = startSupportActionMode(mActionModeCallback);

So the whole listener code would look like this:

Button btnContextActionMenu = findViewById(R.id.btnContextActionMenu);
btnContextActionMenu.setOnLongClickListener(new View.OnLongClickListener() {
    @Override
    public boolean onLongClick(View view) {
        // Ako je aktivan menu vratiti false
        if(mActionMode != null){
            return false;
        }
        // Ako je nekativan onda ga aktiviramo
        mActionMode = startSupportActionMode(mActionModeCallback);
        return true;
    }
});
Likes:
15 0
Views:
1975
Article Categories:
PROGRAMMINGTECHNOLOGY

Leave a Reply

Your email address will not be published. Required fields are marked *