Android Maps: Create custom view with Text and Button in onDraw()

Issue

In My Android map application, I have some cluster icons. whenever the cluster icon is pressed i want to display a popup infobox with text and button. If we pressed the button, it will lead to next activity.

private void drawInfoWindow(Canvas canvas, MapView mapView, boolean shadow,
            int x, int y) {

        if (isSelected_) {

                Point selDestinationOffset = new Point();
                mapView.getProjection().toPixels(cluster_.center_,
                        selDestinationOffset);

                // Setup the info window with the right size & location
                int INFO_WINDOW_WIDTH = 125;
                int INFO_WINDOW_HEIGHT = 25;
                RectF infoWindowRect = new RectF(0, 0, INFO_WINDOW_WIDTH,
                        INFO_WINDOW_HEIGHT);


                infoWindowRect.offset(x, y);

                // Draw inner info window
                canvas.drawRoundRect(infoWindowRect, 5, 5, getInnerPaint());



                // Draw the MapLocation's name
                int TEXT_OFFSET_X = 10;
                int TEXT_OFFSET_Y = 15;

                canvas.drawText(cluster_.number+" Incidents", x + TEXT_OFFSET_X, y
                        + TEXT_OFFSET_Y, getTextPaint());
            }
        }

This shows only a small textview like popup window. But i want to display a popup infobox with text and button. Please provide me the best way....

Thanks...

Solution

You can use a custom layout xml file to create a overlay on mapview, instead of using canvas.

1. Create a xml file for your overlay(I use overlay_pin_layout.xml here). For example, a linearlayout which has a textview on the top and a button on the bottom.

2. Add this overlay to where you want.

   // Inflate your overlay from xml file

   View overlayPin = getLayoutInflater().inflate(R.layout.overlay_pin_layout, null);

   // Set the textview

   ((TextView)(overlayPin.findViewById(R.id.textview_overlayerpin))).setText(YOUR_TEXT);

   // set button touch listener

   ((Button)(overlayPin.findViewById(R.id.button_overlayerpin))).setOnLongClickListener( new View.OnLongClickListener() {

                       @Override
                       public boolean onLongClick(View v) {
                           // Do something on button click
                           return false;
                       }
                   }
               );
   

   // add your overlay on mapview by geopoint

   overlayPin.setLayoutParams(new MapView.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, new GeoPoint(YOUR_LAT, YOUR_LON), MapView.LayoutParams.BOTTOM_CENTER)); mapView.addView(overlayPin);

For a pop-up like animation , try this one. Create a anim folder in res, if you do not have one. Create a xml with the code below in anim folder. I call it animation_pop_up.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:fromXScale="0.0"
    android:toXScale="1.0"
    android:fromYScale="0.0"
    android:toYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="500"
    android:repeatCount="0"
    android:repeatMode="reverse"
    android:interpolator="@android:anim/accelerate_interpolator"
    >
</scale>
<alpha
    android:fromAlpha="0"
    android:toAlpha="1"
    android:duration="500"
    android:repeatCount="0"
    android:repeatMode="reverse">
</alpha>
</set>

When you add overlayPin on mapview, play the animation.

Animation animation = AnimationUtils.loadAnimation(mainActivity.getApplicationContext(),
                    R.anim.animation_pop_up);
overlayPin.startAnimation(animation);

Answered By - Zhenghong Wang