Monday, August 9, 2010

Overlay on Android Layout

This will help you to create custom Layout and add Overlay on a LinearLayout. The concept can be reused on other Layout classes i.e. RelativeLayout, FrameLayout etc.

I have added a popup Selection Palette, containing "Map Pin" and "List" icons. You can minimize the popup by clicking on the section in Green on the left side bottom corner of the screen.

How can I do that-
You need to follow 4 steps-
1. Override LinearLayout
Create a Class which should overwrite LinearLayout

2. Drawing
You need to overwrite dispatchDraw(Canvas canvas) method. It gives control to the whole screen. Make sure you set android:layout_height="fill_parent" for the associated layout definition in XML. You can draw anything and anywhere on the canvas. dispatchDraw(Canvas canvas) gets called only after underlying views are drawn, so whatever you draw comes in the foreground.
3. Event Handling
You need to overwrite dispatchTouchEvent(MotionEvent e) method. onTouchEvent(MotionEvent e) doesn't work. Make sure you don't pass click event controls when user clicks on your specific drawing region.

4. Using your custom Layout on XML
You can now use your custom Layout class in Layout XML files (define your class name with package, see below example) -

You can download complete source code from here.

Sunday, August 8, 2010

Overlay on Android ListView

I was searching for some solution to display an Overlay on ListView, just like what I can do over the MapView. As Android Framework doesn't support multi-hierarchy views in Z-Axis, so it looks challenging. The solution lies behind overwriting standard ListView. The benefit from this feature is multiple, you can display your custom popup over list and there are many more use cases.
In the above screen shot, I have displayed my "selection palette" (Map Pin Icon and List Icon) at the bottom. You can hide/show the palette by clicking the "green triangle" section.

How I can do that-
There are 2 steps-

1. Drawing-
The trick is overriding dispatchDraw(Canvas canvas) method of ListView. This method gets called from Android Framework once List drawing is over. So, whatever you draw inside of dispatchDraw(Canvas canvas), comes in the foreground. You get drawing control over the whole screen, so you can draw popup at anywhere on the screen.

2. Click Event Handling-
To intercept user click events, you need to define Region and need to restrict ListView to handle clicks which falls under your custom Region. You can read my previous post on Region handling in Canvas.
To intercept click events, you need to overwrite onTouchEvent(MotionEvent e).

You can download the complete source from here.

Thursday, August 5, 2010

Region Handling in Android Canvas

In my previous post I have shared an Image Geo Tagging application for Android. A very important concept of Canvas Region handling was used in that application and thought lets discuss more on that concept. The concept of Region can be used in User Click event handling for any Canvas based drawing and Custom View.

Region is a section of Canvas area- its shape can be rectangular or non rectangular (i.e. circle, triangles, multi-phased polygons etc.). Android provides class, which has a very important and useful method contains(int x, int y);which easily detects whether your click event on the screen falls within the region or not. x and y are the co-ordinate position on the Screen.

How I can use it-
Suppose you have created a custom View and want to do specific operations depending upon which portion of screen user has clicked. Lets explain this with following screen shot-

Above screen is from my application (Image Geo Tagging for Android). Each Pin and its associated image thumbnail popups are part of a single Custom Overlay. Each Custom Overlay instance needs to detect when user has clicked on Pin and Popup, so that it can take appropriate action.

To handle this, we have to define 2 regions-
Region pinRegion = new Region (x1, y1, x1 + pinIcon.getWidth, y1 + pinIcon.getHeight());
Region popupRegion = new Region (x2, y2, x2 + popUpWidth, y2 + popUpHeight);

You need to now overwrite onTouchEvent( MotionEvent e, MapView mapView) method to get user Click events. Get the (x, y) co-ordinates from MotionEvent instance and use the magic function contains(x, y) e.g. pinRegion.contains(x, y) and popupRegion.contains(x, y).

This is really an important concept, if you are planning to control user Click events on specific sections of your Custom View or any Canvas based drawing. For complete code bases please refer my previous post

Tuesday, August 3, 2010

Image Geo Tagging for Android

"onMap" is an Image Geo Tagging application, which can read EXIF header of images stored in your Android device and Map them over Google Map. So if you enabled the GPS feature while capturing images from your Android device, you can use this application to Map them based on their Geographic position.

As you can see above screen shot, I have a set of images captured at 4 different positions and I have mapped them on Google Map. Each Map pin will display the count of images stored at that position. If you click on the Pin, it will display a Popup with maximum of 3 thumbnail images. If you Click on the Popup, it will display all images in a Gallery.

This is just a sample application with limited functionality. So if anyone wants to get a customize version of it, please feel free to contact me.

1. OnMap.apk
2. Source Code

Reference Sites:
Google Map handling in Android
Invoke Gallery from your Application