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

Tutorial 1 - final result

Tutorial 1 - final result (closeup)

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 are the source files for this tutorial as well as all my other tutorials.

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

Tagged with →  
Share →

62 Responses to Tutorial 1: Transparent Panel (Linear Layout) On MapView (Google Map)

  1. Todd Farrell says:

    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

  2. Wiliam Dewey says:

    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…

  3. pocketjourney says:

    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)

  4. Jack says:

    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!

  5. pocketjourney says:

    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

  6. Hielko says:

    I have trouble displaying a contextmenu from a mapview, but at the moment I doubt that it’s even possible…

  7. pocketjourney says:

    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

  8. [...] Tutorial 1:  Transparent Panel (Linear Layout) on MapView (Google Map) [...]

  9. goro says:

    Awsome!
    I was looking for that for a quite long time. Thanx!

  10. andrd_devlpr says:

    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.

  11. pocketjourney says:

    If you download either .zip file now, you should get all the files you’ll need.

    Anthony

  12. [...] Tutorial 1:  Transparent Panel (Linear Layout) On MapView (Google Map) Tutorial 2: “Hit” testing on a View (MapView) Tutorial 3: Custom Media Streaming with MediaPlayer Possibly related posts: (automatically generated)Tutorial 1: Transparent Panel (Linear Layout) On MapView (Google Map)Glossy Button Video Tutorial and PSD [...]

  13. [...] Tutorial 1: Transparent Panel (Linear Layout) On MapView (Google Map) Tutorial 2: “Hit” testing on a View (MapView) Tutorial 3: Custom Media Streaming with MediaPlayer [...]

  14. android_coding says:

    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?

  15. Biosopher says:

    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

  16. missammoune says:

    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

  17. Biosopher says:

    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

  18. wajdi says:

    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… :)

  19. rayan says:

    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… :)

  20. Biosopher says:

    Hi Rayan,

    Check out this method for zooming programmatically:

    MapView.getController().zoomTo();

    To display the zoom dialog, use this:

    MapView.displayZoomDialog();

    Cheers,
    Biosopher

  21. bryan says:

    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 !

  22. Biosopher says:

    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

  23. Emile says:

    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…

  24. Biosopher says:

    Hi Emile,

    Checkout http://www.anddev.org. They have excellent beginner tutorials on many topics.

    Cheers,
    Biosopher

  25. Rayan. says:

    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 ;)

  26. Biosopher says:

    Hi Ryan,

    The x,y are the positions on the map.

  27. [...] Tutorial 1: Transparent Panel (Linear Layout) On MapView (Google Map) Tutorial 2: “Hit” testing on a View (MapView) Tutorial 4.1: Image and Text-Only Buttons Possibly related posts: (automatically generated)Rewind, play, rewind, play: AudioLobe makes transcription easier [...]

  28. jeffld says:

    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.

  29. Paul says:

    This has to be the BEST set of tutorials on these Android topics, thanks a million you have helped me no end!

  30. Peeyush says:

    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,

  31. [...] Tutorial 1:  Transparent Panel (Linear Layout) upon MapView (Google Map) [blog.pokerjourney.com] Share and [...]

  32. allankliu says:

    I am developing a Wifihunter app on Android. Since I am using SDK1.5, the builtinZoomControl is used. I wonder if I can align the positions with other custom buttons together? I am not sure about the SDK version for this tutorial.

    I just want to reproduce the UI layout and logic with my own data sources. That means zoom control, focus navigation button(previous/next buttions) and a list/layer button to get list of all onscreen iterized overlay objects.

    After reading your tutorial, I know I have to modify the layout file, add/override some functions. But still I am hesitated if I can deal my new buttons with builtinzoom control.

    Is there any new update?

  33. Dominik says:

    great tutorial. thanks! it works perfectly!
    however, I have a question. Some how I cannot make this work in a ListActivity – is this so?
    It works perfectly with RelativeLayout but not with TableLayout. What would I have to change to make this work?

  34. allankliu says:

    I have downloaded the zip code for SDK1.5. It works fine. However, when I add following code into the tutorial 2 as following:

    public void onCreate(Bundle icicle){

    MapView mapView = (MapView)findViewById(R.layout.tutorial1);
    mapView.setBuiltInZoomControls(true);

    }

    The code is stopped with following error message.

    01-05 19:05:59.203: INFO/ActivityManager(583): Starting activity: Intent { comp={com.pocketjourney.tutorials/com.pocketjourney.tutorials.Tutorial1} }
    01-05 19:06:00.424: ERROR/ActivityThread(876): Failed to find provider info for com.google.settings
    01-05 19:06:01.422: DEBUG/AndroidRuntime(876): Shutting down VM
    01-05 19:06:01.453: WARN/dalvikvm(876): threadid=3: thread exiting with uncaught exception (group=0x4000fe70)
    01-05 19:06:01.463: ERROR/AndroidRuntime(876): Uncaught handler: thread main exiting due to uncaught exception
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.pocketjourney.tutorials/com.pocketjourney.tutorials.Tutorial1}: java.lang.NullPointerException
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2268)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2284)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.app.ActivityThread.access$1800(ActivityThread.java:112)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1692)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.os.Handler.dispatchMessage(Handler.java:99)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.os.Looper.loop(Looper.java:123)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.app.ActivityThread.main(ActivityThread.java:3948)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at java.lang.reflect.Method.invokeNative(Native Method)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at java.lang.reflect.Method.invoke(Method.java:521)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:782)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:540)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at dalvik.system.NativeStart.main(Native Method)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): Caused by: java.lang.NullPointerException
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at com.pocketjourney.tutorials.Tutorial1.onCreate(Tutorial1.java:21)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1123)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2231)
    01-05 19:06:01.603: ERROR/AndroidRuntime(876): … 11 more
    01-05 19:06:01.683: INFO/Process(583): Sending signal. PID: 876 SIG: 3
    01-05 19:06:01.683: INFO/dalvikvm(876): threadid=7: reacting to signal 3
    01-05 19:06:01.983: INFO/dalvikvm(876): Wrote stack trace to ‘/data/anr/traces.txt’
    01-05 19:06:09.333: WARN/ActivityManager(583): Launch timeout has expired, giving up wake lock!
    01-05 19:06:09.553: WARN/ActivityManager(583): Activity idle timeout for HistoryRecord{437acb48 {com.pocketjourney.tutorials/com.pocketjourney.tutorials.Tutorial1}}

    I plan to design a focus and list buttons as Google map does. I used to think tutorial 1 is used to implmented on that. However since it is not compatible with BuiltinZoomControl. I guess maybe I should design an Overlay sticks to the screen as the on-screen control? Rather than a button.

  35. naTe says:

    Is this kind of override still necesary in android 2.0 ? Was it only needed for v1.5? Can’t you just change the background color value?

  36. Manoj says:

    Hey Anthony,
    I have been trying for long to have a alert dialog box without any border and transparent background. Used setInverseBackgroundForced(true) but this does not give any desired result. Setting the background to what you’ve mentioned in the tutorial makes it with grayish background but I do not want that. How can I have absolutely no background and just the button floating on top of the parent page/view? Would be really grateful if you could provide some tips/help.

    Thanks,
    Manoj

    • Biosopher says:

      Have you tried using this in your XML layout for the View in question?

      android:background=”@android:color/transparent”

  37. flansch says:

    First of all, thanks for this great tutorial. Its exactly what i was looking for!! Keep on developing & writing ofc ;)

    Ive a simple question, is it possible to add Google Map-Marker via urlstring (with EditText & Button) without refreshing the whole mapview ?

    best regards,
    flansch

  38. [...] your Android layout, you can simple start with an existing layout like Transparent Panel (from Poket Journey) Additional if your a fan of the typical google maps info cloud u can import the BalloonOverlay [...]

  39. Sam says:

    Very helpful! Thank you!

  40. Krish says:

    Hi

    Really nice tutorial thanks a lot because i wasted nearly one month for this example
    one more thing my panel will be displaying in top i want it in bottom what i want to do please help

    waiting for reply
    Thanks again

  41. Vikalp says:

    Thanks for this great tutorial. Would you be able to update this tutorial or publish a new one which can tell how to do it using Overlay/ItemizedOverlay ? I’ve been trying for it for sometime but without any success…

  42. john bull says:

    Nice work . Is your source code free to use by all? like bsd or mit ?

  43. shuren says:

    Thanks for this grate Tutorial !

  44. Bob says:

    Hi Can you tell me how I can get the address of an icon that I have placed on my map to display it name and address in a pop up textveiw.

  45. Julian says:

    Where innerPaint is defined??

  46. Julian says:

    Ok, I supposed we should define it with something like this:

    innerPaint = new Paint();
    innerPaint.setARGB(225, 75, 75, 75);
    innerPaint.setAntiAlias(true);

  47. sindhukam says:

    Hello frnds,
    Can anyone tell me how to make this panel invisible and panel2 visible on button click?

  48. Anagha says:

    great .. this is what i wanted.thanx a lot

  49. Susheel says:

    transparency ain’t working for me !!!

  50. chintan says:

    Hi, i am tiring to make canvas on video play. not able to set transparent drawing surface over surfaceview.

    please help

    xml code is—–

  51. Stefan Beike says:

    Great stuff! Thanks a lot!

  52. ebcperson says:

    Thank’s a lot. I’m totally new in Android. Could you please show how to place that panel vertically and to the left of the screen? I’ve tried it in Eclipse but it stuck.
    Thank’s beforehand.

  53. debegr says:

    Hey,
    your blog does really helped me with my problem on Android.
    Thanks for the great work!

    Dennis
    hobbyrobotic.wordpress.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>