This tutorial is for Google’s Android mobile operating system. If you haven’t already heard about Android, then check it out immediately because it’s way cool. We have benefited so much from the Android developer community that we want to give back our own insights into the platform and how to better design/develop on the platform.
For this tutorial, we’re going to help the several people that have asked us how to create transparent panels. While we show how to overlay onto a Google Map, you can use the same technique to overlay a transparent panel onto any other view.
Starting at the end, this what we’ll develop today – a transparent panel with a single button displayed at the base of an Android MapView
We’ll assume that you already know the basics of Android programming and will only address these “advanced” topics:
1) Creating a class that can draw a transparent background and border.
2) Adding a custom View class as a declaration in your layout XML.
(1) Creating a Custom Layout as a Transparent Panel
We wanted our transparent panel to hold children so we looked for the most natural Android view to extend and selected Linear Layout because we wanted our TransparentPanel class to layout its children horizontally. We could just as easily chosen to extend RelativeLayout of any other layout class.
TransparentPanel extends LinearLayout
The ‘magic’ of TransparentPanel happens in the dispathDraw() method. For those of you that have already created their own custom Views, you might wonder why we override dispatchDraw() instead of onDraw(). For some reason, LinearLayout does not call it’s own onDraw() method…apparently because its developer assumes a LinearLayout would never have anything to draw. BUT we want our TransparentPanel to draw a background so we override dispatchDraw() to draw the background and then let super.dispatchDraw(canvas) render any child components.
protected void dispatchDraw(Canvas canvas) {
RectF drawRect = new RectF();
drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
canvas.drawRoundRect(drawRect, 5, 5, borderPaint);super.dispatchDraw(canvas);
}
For those new to drawing their own graphics, let’s review a few items here. First, we populate a RectF with the coordinates of the background that we want to draw. Next we make to calls to drawRoundRect(). The 1st call passes innerPaint to draw the transparent gray background while the 2nd call passes the white border that we want to paint. Lastly we call super.dispatchDraw(canvas) to render our child components (in this case a Button).
The gray background is rendered with an alpha (transparency ) == 225. This allows just enough of the map to show through.
innerPaint.setARGB(225, 75, 75, 75);
And borderPaint allows us to render a white border with a Stroke of width = 2.
borderPaint = new Paint();
borderPaint.setARGB(255, 255, 255, 255);
borderPaint.setAntiAlias(true);
borderPaint.setStyle(Style.STROKE);
borderPaint.setStrokeWidth(2);
As we did above, make sure to setAntiAlias(true) so the borders of your paint blend seamlessly with its surroundings. Set this option to false to see how your borders would have jagged edges otherwise.
(2) Adding our custom TransparentPanel class as a declarations in the layout XML.
Now we’re ready to insert the TransparentPanel into our layout XML class and to add a button. To reference our new class, we simply provide the full classpath to our the TransparentPanel and then provide layout parameters as we would for any LinearLayout. In this case, we provide padding so our Button does not rest against the edges of our TransparentPanel’s border.
<com.pocketjourney.view.TransparentPanel
android:id=”@+id/transparent_panel”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:paddingLeft=”5px”
android:paddingTop=”5px”
android:paddingRight=”5px”
android:paddingBottom=”5px”><Button android:id=”@+id/button_click_me”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Click Me!”></com.pocketjourney.view.TransparentPanel>
And that’s it. Here is the .apk you can use along with the source files: tutorial1.zip.
Please give us your feedback and let us know any suggestions for improving this tutorial. Also please visit these other tutorials for more tips:
Other Tutorials
Tutorial 2: “Hit” testing on a View (MapView)
Tutorial 3: Custom Media Streaming with MediaPlayer
Tutorial 4.1: Image and Text-Only Buttons
Thanks for the tutorial. I was looking for exactly this solution, but as a novice UI programmer, didn’t know where to start.
I’m now much closer to my Android Challenge goal except I need to show a popup window when users click locations on the Google Map. Any recommendations on how I might do this would be greatly appreciated.
cheers,
todd
Thanks for the tutorial. Would you have a copy of the main.xml file around.
I am trying to test in Eclipse but so far no luck.
Again Thanks.
Regards…
Sorry about that, Wiliam. I meant to include all the files necessary but left out the \res folder.
Please redownload, and you should find all the files now.
Best Regards,
Anthony (Acopernicus)
Thank you so much Anthony! This panel is exactly what I wanted to do in my mapping app and I would not have figured it out myself. You da man!
Glad I could help Jack.
I’m considering an extension of the tutorial to show how to display popups information windows like the Android maps. Would that be helpful? What other UI design issues are you having problems with?
Anthony
I have trouble displaying a contextmenu from a mapview, but at the moment I doubt that it’s even possible…
I assume by “context menu”, that you mean the right-click type accessible in Windows.
The problem with right-click context menus like this…and Android in general…is that we don’t know what hardware platform/capabilities the user will be running under. A right-click style context menu would work fine in a Treo/Palm or Windows Mobile style phone as the user has stylus touch precision. For an iPhone-like systems, such a tiny right-click context menus would be too small to be easily touchable…and touch screen supports appears to be the primary reason for Android’s new OS UI redesign.
All that said, you can display a “context-dependent” menu by simply listening to mouse clicks on your map and then showing the appropriately populated menu off the bottom of your screen.
Do you know how to “hit test” mouse clicks on your Google Map to detect whether the user clicked your overlayed icon?
Hope that helps,
Anthony
Awsome!
I was looking for that for a quite long time. Thanx!
In order to build this using Eclipse and the very latest version of the SDK, we need the original versions of all the xml files plus the AndroidManifest.xml file.
Moreover, we need these for the Tutorial2 example also.
Can you please provide these with the zip file examples?
Thank you.
If you download either .zip file now, you should get all the files you’ll need.
Anthony
Hello!
Great tutorial. But there is sth I don’t understand. How do you determine the height of the rectangle? And why has the top coordinate be smaller than the bottom coordinate?
Hi android_coding,
1) The height of a Rect is:
height = rect.bottom-rect.top
or more accurately
height = Math.abs(rect.bottom-rect.top)
since the bottom could be greater than the top if you’re painting it upside-down (which I don’t advise and am unsure Android supports).
2) Rect.top is typically smaller than the Rect.bottom because the UI coordinate system in Android (as in other UIs) begins at the upper-left as (0,0) and increases towards to bottom-right at (right,bottom).
Android can “possibly” handle cases where your Rect.bottom is greater than Rect.top, but I would avoid such cases as bad UI programming.
Biosopher
hi!
i was very glad when i find your tutorials!it was what i ‘m looking for long time!but
i have just download the .zip right now but i did not find all the files !please if you can give us the entire project to test in Eclipse as soon as possible !please i realy need it !i will be thankfull
Hi missammoune,
You can easily import the code & create a new project in Eclipse by selecting, the “Create Project from Existing Source” option when creating a new project.
Simply select the base directory that from the .zip package and everything will be generated for you.
Cheers,
Biosopher
hi Biosopher,
i’ve created a simple android project wich gives me a map view
now i want to add a zoom option to my aplication but i didnt find
useful guide on the internet
could you please help me, or give me any instructions for this issue ?
THANKS…
hi ,
i’ve created a simple android project wich gives me a map view
now i want to add a zoom option to my aplication but i didnt find
useful guide on the internet
could you please help me, or give me any instructions for this issue ?
THANKS…
Hi Rayan,
Check out this method for zooming programmatically:
MapView.getController().zoomTo();
To display the zoom dialog, use this:
MapView.displayZoomDialog();
Cheers,
Biosopher
hello ,,
thanks for this great tutorial, could you please help me
to create simple bubbles on my map view and how to change their icons !
Hi bryan,
You can find information on that in my 2nd tutorial:
http://blog.pocketjourney.com/2008/03/19/tutorial-2-mapview-google-map-hit-testing-for-display-of-popup-windows/
Cheers,
Anthony
hi !
thanks for this tutorial, it really helped me in my new project,
now i ve created a simple database in a website, but i don’t know how to
create a connection between my application and this database.
could please help me in this issue ?!!
thanks…
Hi Emile,
Checkout http://www.anddev.org. They have excellent beginner tutorials on many topics.
Cheers,
Biosopher
hi, this is Rayan again! last time,i asked you about the mapview.displayZoomDialog(int x, int y)
but i really didnt unterstand the two parameters’ role( x and y ), are they for the zoom dialog position on the map? and if not how can i manipulate its position ??
thanks
Hi Ryan,
The x,y are the positions on the map.
This is a good tutorial.
I’m a little bit behind in regards to the G1. I only got my G1 in December of 2008.
This has to be the BEST set of tutorials on these Android topics, thanks a million you have helped me no end!
Hi All,
I tried to apply theme on my new activity which show the transparent background(Previous window)..
I got it but when i depoly on device it is not working it is showing black background..
@android:color/transparent
@null
0.6
true
can anybody please tell me what is going wrong here..
Thanks,