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,
Figure 1. Opera Menu Panel
This tutorial introduces a tab-based menu (we call it TabMenu from this point onwrads) shown as below,
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?
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.
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,
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,
This will make the menu key press work, and now the TabMenu behaves like a menu instead of a PopupWindow.
1. Android Customized TabMenu: http://blog.csdn.net/hellogv/article/details/6168439
2. Android PopupWindow Source Code