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

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

31 Responses to “Tutorial 1: Transparent Panel (Linear Layout) On MapView (Google Map)”


  1. 1 Todd Farrell March 16, 2008 at 7:30 pm

    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. 2 Wiliam Dewey March 17, 2008 at 1:22 pm

    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. 3 pocketjourney March 17, 2008 at 2:21 pm

    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. 4 Jack March 17, 2008 at 8:40 pm

    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. 5 pocketjourney March 17, 2008 at 9:19 pm

    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. 6 Hielko March 19, 2008 at 3:22 am

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

  7. 7 pocketjourney March 19, 2008 at 7:14 am

    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. 8 goro March 21, 2008 at 6:28 am

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

  9. 9 andrd_devlpr March 23, 2008 at 5:18 pm

    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.

  10. 10 pocketjourney March 23, 2008 at 7:44 pm

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

    Anthony

  11. 11 android_coding May 6, 2008 at 5:19 am

    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?

  12. 12 Biosopher May 6, 2008 at 8:39 am

    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

  13. 13 missammoune June 19, 2008 at 2:47 pm

    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

  14. 14 Biosopher June 19, 2008 at 3:52 pm

    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

  15. 15 wajdi June 28, 2008 at 7:42 am

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

  16. 16 rayan June 28, 2008 at 7:46 am

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

  17. 17 Biosopher June 28, 2008 at 7:59 am

    Hi Rayan,

    Check out this method for zooming programmatically:

    MapView.getController().zoomTo();

    To display the zoom dialog, use this:

    MapView.displayZoomDialog();

    Cheers,
    Biosopher

  18. 18 bryan June 30, 2008 at 5:18 am

    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 !

  19. 20 Emile June 30, 2008 at 11:05 am

    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…

  20. 21 Biosopher June 30, 2008 at 2:42 pm

    Hi Emile,

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

    Cheers,
    Biosopher

  21. 22 Rayan. July 1, 2008 at 4:15 pm

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

  22. 23 Biosopher July 2, 2008 at 8:43 am

    Hi Ryan,

    The x,y are the positions on the map.

  23. 24 jeffld January 18, 2009 at 6:37 am

    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.

  24. 25 Paul April 1, 2009 at 4:26 am

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

  25. 26 Peeyush June 12, 2009 at 3:34 am

    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,


  1. 1 Tutorial: Transparent Panels | Android Notes Trackback on March 19, 2008 at 9:52 am
  2. 2 Android Tutorial #4: Image & Text-Only Buttons « Pocket Journey Trackback on April 30, 2008 at 6:16 pm
  3. 3 Android Tutorial #4.2: Passing custom variables via XML resource files « Pocket Journey Trackback on May 2, 2008 at 12:09 pm
  4. 4 Android Tutorial 3: Custom Media Streaming with MediaPlayer « Pocket Journey Trackback on August 11, 2008 at 9:47 am
  5. 5 Tutorial: Transparent Panels | The Android News Magazine Trackback on June 13, 2009 at 7:01 am

Leave a Reply




a