The Android standard menu can be limited sometimes, especially when you have more than 6 items. Some apps have dozens of menu and the menu starts to look very crowded. For instance, the Opera browser has the menu like below,

1

Figure 1. Opera Menu Panel

This tutorial introduces a tab-based menu (we call it TabMenu from this point onwrads) shown as below,

tabmenu

Figure 2. TabMenu

This types of menu have been used in apps like GoSMS, UC Web Browser, and it’s pretty neat, isn’t it? Smile

Design Idea

The menu is actually a PopupWindow with two grid layout. The first layout contains the TextView, indicating the menu titles; the second grid has a list of ImageView and TextView, forming the menu items. The two grids stack together to form the pop up window.

Source Code

You can download the source code package for the sample app shown in Figure 2 at here or my github repo here. The TabMenu.java and Main.java source files are identical to the source code provided by Reference 1. The PopupWindow.java is a modified version of the Android PopupWindow.

Why Customized PopupWindow

The Android PopupWindow is suppoed to be a modal window, which requires user to interact with it first before proceeding. Some Android popup dialogs are also built in this way. Therefore it is understandable that the Menu key press doesn’t work with the PopupWindow.

It’s fine for most case, but we’re building a menu here, so users will expect the menu key work. In order to meet the user expectation, the code is modified.

The PopupWindow is a view that put in FrameLayout. The FrameLayout part contains a method that dispatchKeyEvent.

The original source looks as below,

@Override

        public boolean dispatchKeyEvent(KeyEvent event) {

            if (event.getKeyCode() == KeyEvent.KEYCODE_BACK) {

                if (event.getAction() == KeyEvent.ACTION_DOWN

                        && event.getRepeatCount() == 0) {

                    getKeyDispatcherState().startTracking(event, this );

                    return true;

                } else if (event.getAction() == KeyEvent.ACTION_UP

                        && getKeyDispatcherState().isTracking(event)

                        && !event.isCanceled()) {

                    dismiss();

                    return true;

                }

                return super .dispatchKeyEvent(event);

            } else {

                return super .dispatchKeyEvent(event);

            }

        }

To make the menu key press to dismiss the popup window, we simply add the KEYCODE_MENU to the first if condition, and the code becomes,

@Override

        public boolean dispatchKeyEvent(KeyEvent event) {

            if (event.getKeyCode() == KeyEvent.KEYCODE_BACK || event.getKeyCode() == KeyEvent.KEYCODE_MENU) {

                if (event.getAction() == KeyEvent.ACTION_DOWN

                        && event.getRepeatCount() == 0) {

                    getKeyDispatcherState().startTracking(event, this );

                    return true;

                } else if (event.getAction() == KeyEvent.ACTION_UP

                        && getKeyDispatcherState().isTracking(event)

                        && !event.isCanceled()) {

                    dismiss();

                    return true;

                }

                return super .dispatchKeyEvent(event);

            } else {

                return super .dispatchKeyEvent(event);

            }

        }

This will make the menu key press work, and now the TabMenu behaves like a menu instead of a PopupWindow.

Reference:

1. Android Customized TabMenu: http://blog.csdn.net/hellogv/article/details/6168439

2. Android PopupWindow Source Code

 

5 Responses to Android Tutorial–TabMenu Based on Customized PopupWindow

  1. chen says:

    good,you save my life !

  2. Lorin says:

    Great!This is what I need.
    Thanks!

  3. zonk says:

    You got typo in adapter name. You got TabMenu.MneuAdapter (“Mneu”) :)

Leave a Reply

Your email address will not be published.

* Copy This Password *

* Type Or Paste Password Here *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Set your Twitter account name in your settings to use the TwitterBar Section.