CODEWITHSUNDEEP
javaandroidmaps
James
James

Reputation: 75

How to create an information bubble on a map (not google api)

In my android application I have a custom view that functions like a map. When the user touches a particular location, I would like to be able to display more information in a sort of information bubble. This is very similar to how the google maps api works, but I do not want to use their api.

So far I have tried drawing a rounded rectangle directly to the canvas and drawing text over top at the specified location. But this has considerable drawbacks:

1) I don't know how to calculate how big the rectangle should be relative to the length and size of the text.

2) Drawing a rectangle leaves no room for the power of views (with built in onTouch events, and room to easily customize the view)

I have also tried using a view (Button) to display the information but have had no success. As far as I know, I cannot specify the coordinates for where the view should display (since the information bubble needs to move according to where the map is scrolled).

In summary, I need the best of both methods where an image should easily resize according to the amount of text displayed, and the information bubble should be able to move around the screen according to where the map is scrolled.

Does anyone have any suggestions on what the best approach would be to create an information bubble like this without using the google maps api?

Upvotes: 0

Views: 1506

Answers (2)

dbryson
dbryson

Reputation: 6127

One approach is to create a Balloon by extending a Layout - for example LinearLayout and override the dispathDraw() to actually draw just the balloon. You can then configure and use your Ballon from the layout xml and add a textView for content. For example:

<mycustom.PopUpBalloon
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/transparent_panel"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="5px">
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="default"
            android:textColor="#ffffffff"
            android:textStyle="bold"
            />

    </RelativeLayout>
</mycustom.PopUpBalloon>

From your Activity you can then load the Popup:

mPopUp = (PopUpBalloon) layoutInflater.inflate(R.layout.popup, null);

Then to change the text in your activity:

 // Remove any previous Popups from the holding View  
 mView.removeView(mPopUp);
 mPopUp.setVisibility(View.VISIBLE);
 ((TextView) mPopUp.findViewById(R.id.title)).setText("Hello World");

You could also add ImageViews or whatever to the Balloon for clickListeners etc...

Upvotes: 1

tribe84
tribe84

Reputation: 5622

I am by no way 100% sure my proposed method is the correct way, but this is how I would go about the problem:

You will first need to calculate the size of your text before you calculate the size of the box that it will be in, to do this, use the following methods, providing you have created a Paint object that you will use to draw the text.

//This will give you the width of the text
textPaint.measureText("Text to render")

//This will give you the height of the text
textPaint.getFontSpacing()

In terms of drawing the map and information bubble, this is how I would do it:

Your whole map image will be your base box, and the part that is in view will be your view box. So, if the user pans and zooms on your map, essentially what is happening is that you are using our view box to display only a part of the map. It is very tricky to work out where to draw the bubble in terms of the view box, but if you make it relative to the base box, it becomes pretty easy. Essentially you will draw your entire map, including the bubble, and crop it to only the part that is in view.

This is purely how I would go about it, but I think it would not be very hard to implement. All you need to do is to keep track of how much your view box has been offset from the top left corner of your base box and you can pretty easily pick up where in relation to the base box a bubble needs to be planted.

Let me know if I did not explain this very well.

Best,

Ignus

Upvotes: 0

Related Questions