The standard Android Menu is one of the most common elements of an Android application, and provides users a familiar way to perform actions. It contains a collection of primary options and functionality which shows up when the user touches the MENU button on the device.
In this article we will explore how to make this simple item of Android user experience perfect.
Step 1. Create a menu icon
- open Photoshop, create a file with canvas size 72x72 (Notice: always start from the larger size)
- create your shape using Pen tool (P), or if you have it ready in some vector format paste it as a shape into your document. For the sake of sharpness it is important to use the shape tool and to adjust it, by moving its nods so that the margins fit to the pixel grid.
- scale it to 48x48 and center it. Keep this size for more square icons but make them a little bigger in case you have a custom shape icon so they will appear visually approximately the same size
- apply the following layer styles
- save it as *.png
- scale and save the icon for mdpi (48x38) and ldpi (36x36).
Step 2. Copy the icon to an existing project
Import (Checkout) an existing project in Eclipse IDE (see Software Installation and set up for Android Development). If one is absent you might want to download an open source application.
In the project explorer take a look at the resources folder (/res/). Its content is of the most interest to us, designers.
Notice that we have a lot of drawable folders in which reside all our graphical assets as well as elements/shapes drawn in xml which we will explore another time.
When an application is downloaded on the device, the app performs a check of the screen size and density and runs using the graphics from the appropriate folder. If graphics for a given device is not found, or it deals with an element shared with all the screen sizes, then the app is looking for it in the default folder .../drawable/.
When an application is downloaded on the device, the app performs a check of the screen size and density and runs using the graphics from the appropriate folder. If graphics for a given device is not found, or it deals with an element shared with all the screen sizes, then the app is looking for it in the default folder .../drawable/.
To import the icons in the project just drag and drop them in the specific folders.
Note: The icon should have exactly the same file name for all the screen densities. After importing you should get the following structure:
- /drawable-hdpi/ic_help.png
- /drawable-mdpi/ic_help.png
- /drawable-ldpi/ic_help.png
For the menu icons we will not consider screen sizes, only screen densities.
Step 3. Menu layout
Unfold the ../res/menu and ... /res/values:
In the menu.xml and events.xml, if we read attentively, even without knowing any programming its clear that we have a <menu> which contains <items>.
android:id="@+id/about_us" - is the name of the activity/functionality that will be started when we tap, until you do not get very comfortable with the programming part its better not to make changes here.
android:icon="@drawable/ic_help" - notice that even if the icon is placed in different folders, we do refer to the "/drawable", this is why it is so important to keep the same filename for all the desnsities.
android:title="@string/home_about" - in the image of the folders above, in the values folder there is a strings.xml file. This file stores all the strings (titles, notification messages, etc.) we might need including the title of the menu elements. Notice that in the <menu> we refer to string title and not to its content. Knowing this you can change the content or correct spelling yourself.
Note: Having an existing project with at least one menu item you should be able to add as many of them as you need to test. Just make copies of the <item> inside the <menu> in the xml menu file, and make sure to copy and create strings for the item title as well. As for android:id, you can copy the same value in all of them as our goal is to test the look of the icons and we do not care about the activity that follows, just be careful not to commit your experiments. If you want to temporally remove an item from the menu you can comment it out by selecting it in xml file and pressing command+shift+C.
Step 5. Run and test the application
- right click on the project and choose Refresh
- connect the device to the computer or set up your emulator
- right click on the project, select Run and choose as Android Project
Sucess!
