September 2, 2011

Google Maps - Converting coordinates

We found that when converting the coordinates from Java double to Java int the notation makes all the difference:

When we used 1000000 instead of 1E6 the coordinates were rounded off and therefore up to one degree (110 km) off from the true location.

int lon = (int) item.getStatus().getGeo().mLongitude * 1000000
// rounded off coordinate lat :42000000 lon :-87000000

int lat = (int) (item.getStatus().getGeo().mLatitude * 1E6); 
// correct lat :42239902 lon :-87971504

Log.e("Map", "lat :" + lat + " lon :" + lon);
mPoints.put(item.getProfileImageUrl(), new GeoPoint(lat, lon));

Creating Google Maps Development Key

In Terminal execute below to get your MD5 fingerprint:

~ uki$ keytool -list -alias androiddebugkey  -keystore ~/.android/debug.keystore -storepass android -keypass android
androiddebugkey, Jun 29, 2011, PrivateKeyEntry,

Certificate fingerprint (MD5): 65:4D:21:AA...

Go to the site:

Copy the fingerprint: 65:4D:21:AA...

Your key is:
This key is good for all apps signed with your certificate whose fingerprint is:
Here is an example xml layout to get you started on your way to mapping glory:

FoodTrucks on Chicago Local Guide - Twitter Geo-location

You can now help us locate your favorite food truck by tweeting from where they are at with GEO-location enabled. Your tweet will show on the map as a semi-transparent circle. The tweets from the food trucks will show as icons, but only for short time and when geo-location is on.

To turn on the geo-location when tweeting, find the toggle switch (upper left in Plume)...

... or in preferences for Twitter app.

So that is how it looks for real!

You can write your Twitter posts from the app, too.

Don't forget to ask your friends to download the app by scanning this QR code:

Programming for UI designers: Android Options Menu

Ins and outs of Android Options Menu

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).
Note: The menu icons are not the case to improvise. The better we follow the guidelines the better and crisper they will look. I advise you to download the Icon Templates Pack - where you can find the PSD template for every screen size. Create your shape in Illustrator, paste it  in the PSD template, copy the layer styles from the template layer and paste it to yours. Voila, you got the icon.

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/. 

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

Programming for UI designers: Software Installation and set up for Android Development

How many times the designs did not look exactly as your Photoshop files?
Let me guess - MOST OF THE TIME.

In this new series of articles I will try to share my experience on how to improve and adjust your UI designs for Android mobile apps. We will learn how to change colors, adjust margins, add shadows and at a higher level - how to create beautiful and flexible layouts for different screen sizes. So let's get started.

For the start let's make sure we have everything we need for our little journey into programming.

Software Installation and set up for Android Development
(find step by step instructions on supported by
  • Install a development environment. On the Android platform most of the native apps are developed in Eclipse IDE for Java EE Developers.
  • In order to be able to import projects from the team's repository and to be able to share your changes in the code you need to install Install SVN plugin - Subclipse. (video by Uki D. Lucas
  • install Android SDK.
  • Android SDK and AVD Manager - updates - as for updates, you will see plenty, you will never go wrong by installing all of them
  • Create a virtual device - AVD - the virtual devices are very annoying and they load forever but they are very useful especially for testing your designs on various screen sizes.
The installation process might take you a few hours and cause you a lot of trouble. Ask the developers from your team for help if needed.

Uki's Google Java Technology blog