- Define a layout for baloon structure and its "dispatchDraw" draw the baloon itself like:
package com.dogantekin.baloon;
public class BaloonLayout extends LinearLayout {
.......
@Override
protected void dispatchDraw(Canvas canvas) {
Paint panelPaint = new Paint();
panelPaint.setARGB(0, 0, 0, 0);
RectF panelRect = new RectF();
panelRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(panelRect, 5, 5, panelPaint);
RectF baloonRect = new RectF();
baloonRect.set(0,0, getMeasuredWidth(), 2*(getMeasuredHeight()/3));
panelPaint.setARGB(230, 255, 255, 255);
canvas.drawRoundRect(baloonRect, 10, 10, panelPaint);
Path baloonTip = new Path();
baloonTip.moveTo(5*(getMeasuredWidth()/8), 2*(getMeasuredHeight()/3));
baloonTip.lineTo(getMeasuredWidth()/2, getMeasuredHeight());
baloonTip.lineTo(3*(getMeasuredWidth()/4), 2*(getMeasuredHeight()/3));
canvas.drawPath(baloonTip, panelPaint);
super.dispatchDraw(canvas);
}
}
- Define a layout xml for this layout and add views that will be inside this layout like:
<?xml version="1.0" encoding="utf-8"?>
<com.dogantekin.baloon.BaloonLayout
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:paddingLeft="5px"
android:paddingTop="5px"
android:paddingRight="5px"
android:paddingBottom="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/note_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="@string/note"
/>
<ImageView
android:id="@+id/close_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="10px"
android:src="@drawable/close"
android:clickable="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:paddingLeft="5px"
android:paddingRight="5px"
android:text=""
android:id="@+id/note_text"
android:layout_below="@+id/note_label"
android:layout_centerHorizontal="true"
android:minLines="4"
android:maxLines="4"
android:maxLength="160"
android:textSize="5pt"
/>
</RelativeLayout>
</com.dogantekin.baloon.BaloonLayout>
- In your map activity (where you will have your mapview) create an instance of layout we defined:
LayoutInflater layoutInflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
noteBaloon = (BaloonLayout) layoutInflater.inflate(R.layout.baloon, null);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(200,100);
layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
noteBaloon.setLayoutParams(layoutParams);
- Now whenever you need to display the baloon, just call mapview's addView method as:
mapView.removeView(noteBaloon);
noteBaloon.setVisibility(View.VISIBLE);
((TextView)noteBaloon.findViewById(R.id.note_text)).setText(msg.getData().getString(HANDLER_MESSAGE_AUTHOR)+"\n"+msg.getData().getString(HANDLER_MESSAGE_NOTE));
mapController.animateTo(noteOverlay.getTapPoint());
mapView.addView(noteBaloon, new MapView.LayoutParams(200,200,noteOverlay.getTapPoint(),MapView.LayoutParams.BOTTOM_CENTER));
mapView.setEnabled(false);
- When you need to remove baloon, just make it invisible:
noteBaloon.setVisibility(View.GONE);
mapView.setEnabled(true);
Below you can find how it is looking:
- initial mapview
- just make a tap
- touch the close image on baloon
- insert new items in layout xml for richer baloon displays
Any chance you could provide the full working source code? Im getting a LayoutInflater error - not sure what that means... Thanks!
ReplyDeleteJust send me an email (serkan.dogantekin@gmail.com), and I will send you a sample project
ReplyDeleteHi Serkan, could you also send me the sample project please (mathias.conradt@gmail.com).
ReplyDeleteI also get an exception like Becca:
java.lang.RuntimeException: Unable to start activity ComponentInfo{com.myproject.android/com.myproject.android.activity.map.Map}: android.view.InflateException: Binary XML file line #2: Error inflating class com.myproject.android.activity.map.BalloonLayout
Thanks.
Very nice tutorial. Exactly what I was looking for.
ReplyDeleteI used your example and now I am able to show the balloons over the overlay items with the appropriate text. But I seem to have a problem attaching a listener to the clickable ImageView in the BaloonLayout.
Here is what I tried in the onCreate of the MapActivity:
LayoutInflater layoutInflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
noteBaloon = (BaloonLayout) layoutInflater.inflate(R.layout.baloon, null);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(200,100);
layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
noteBaloon.setLayoutParams(layoutParams);
// Get the clickable TextView
TextView buttonView = (TextView) findViewById(R.id.close_button);
// THE FOLLOWING LINE THROWS AN EXCEPTION
buttonView.setOnClickListener(new OnClickListener()
{
public void onClick(View v)
{
// Do something on click
}
});
This code throws java.lang.NullPointerException on the line that adds the onClickListener to the buttonView.
Any help is greatly appreciated.
Thank you in advance.
I must have been pretty tired last night :-(
ReplyDeleteI did overlook an essential detail. I forgot to put buttonView.findViewById instead of just findViewById, because the the view object is not in the default xml layout file of the activity, rather is is in the BaloonLayout that we inflated from R.layout.baloon in the code above.
Here is what you should do:
buttonView = (ImageView) noteBaloon.findViewById(R.id.close_button);
Please also send me the complete code to sasi.vemuri@gmail.com
ReplyDeleteHi,
ReplyDeletePlease send me the complete code to s.work.info@gmail.com,i'm in need pls.
Awesome!
ReplyDeleteJust what I was looking for. Thanks
Hi, Please send me the complete code to:
ReplyDeletemohamedneptune2050@gmail.com
Thanks
Hi
ReplyDeleteplease anyone send me the code to nando.velazquez@gmail.com, i need it!
thnx
Hi, I really need the code too.
ReplyDeleteoutedata@gmail.com Thank you really very very much!!!
public class Ballon extends MapActivity {
ReplyDelete@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
MapView mapView = (MapView) findViewById(R.id.mapView);
mapView.setBuiltInZoomControls(true);
List mapOverlays = mapView.getOverlays();
Drawable drawable = this.getResources().getDrawable(R.drawable.androidmarker);
ItemizedOverlayContainer itemized = new ItemizedOverlayContainer(drawable);
GeoPoint point = new GeoPoint((new Double(52.000*1E6).intValue()),
(new Double(11.000*1E6).intValue()));
OverlayItem item = new OverlayItem(point,"","");
itemized.addOverlay(item);
mapOverlays.add(itemized);
MapController mapController = mapView.getController();
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
Buble noteBaloon = (Buble) layoutInflater.inflate(R.layout.ballon, null);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(200,100);
layoutParams.addRule(RelativeLayout.CENTER_VERTICAL);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
noteBaloon.setLayoutParams(layoutParams);
mapView.removeView(noteBaloon);
noteBaloon.setVisibility(View.VISIBLE);
// TextView textmsg = (TextView) noteBaloon.findViewById(R.id.note_text);
TextView textmsg = (TextView) noteBaloon.findViewById(R.id.note_text);
textmsg.setText("I am a Popup Balloon!!!");
mapView.addView(noteBaloon, new MapView.LayoutParams(200,200,item.getPoint(),MapView.LayoutParams.BOTTOM_CENTER));
mapView.setEnabled(false);
}
@Override
protected boolean isRouteDisplayed() {
// TODO Auto-generated method stub
return false;
}
}
public class Buble extends LinearLayout {
public Buble(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
@Override
protected void dispatchDraw(Canvas canvas) {
Paint panelPaint = new Paint();
panelPaint.setARGB(0, 0, 0, 0);
RectF panelRect = new RectF();
panelRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(panelRect, 5, 5, panelPaint);
RectF baloonRect = new RectF();
baloonRect.set(0,0, getMeasuredWidth(), 2*(getMeasuredHeight()/3));
panelPaint.setARGB(230, 255, 255, 255);
canvas.drawRoundRect(baloonRect, 10, 10, panelPaint);
Path baloonTip = new Path();
baloonTip.moveTo(5*(getMeasuredWidth()/8), 2*(getMeasuredHeight()/3));
baloonTip.lineTo(getMeasuredWidth()/2, getMeasuredHeight());
baloonTip.lineTo(3*(getMeasuredWidth()/4), 2*(getMeasuredHeight()/3));
canvas.drawPath(baloonTip, panelPaint);
super.dispatchDraw(canvas);
}
}
public class ItemizedOverlayContainer extends ItemizedOverlay{
private ArrayList mOverlays = new ArrayList();
public ItemizedOverlayContainer(Drawable defaultMarker) {
super(boundCenterBottom(defaultMarker));
}
@Override
public int size() {
return mOverlays.size();
}
public void addOverlay(OverlayItem overlay) {
mOverlays.add(overlay);
populate();
}
@Override
protected OverlayItem createItem(int i) {
return mOverlays.get(i);
}
}
i am getting a class cast exception in this line, can you kindly tell me why is it?
DeleteBuble noteBaloon = (Buble) layoutInflater.inflate(R.layout.ballon, null);
I forgot the xml !!!
ReplyDeleteHey!
ReplyDeletecan anyone send me the code please? I just can't figure how to do it...
my email: d.breucker@gmail.com
Thanks!
any source code: ? michletic@yahoo.com
ReplyDeletePlease send me the code to minddol@gmail.com
ReplyDeletecan someone please send me the code also?
ReplyDeletebob@smartwhere.com
Thank you
This comment has been removed by the author.
ReplyDeletecould someone send me the full code please? Thanks...
ReplyDeletedonatello.indino@gmail.com
can anyone send me the source? Thanks.
ReplyDeletetouchaponk@gmail.com
could someone send me the full code please? Thanks...
ReplyDeletebrmenninga@gmail.com
could someone send me the full code please? Thanks...
ReplyDeletewp19831014@gmail.com
It will be helpful if some one send me the source code for the same
ReplyDeletegujar.dwarkesh@gmail.com
can anyone send me the code too? It would be very helpful for me... many many thanks... boris.hasselmanngmail.com
ReplyDeletesorry i forgot the "@" boris.hasselmann@gmail.com
ReplyDeletecan anyone send me the full source? Thanks.
ReplyDeletebadrulian@hotmail.com
hi
ReplyDeleteplease send me the source code at ajmersingh09@gmail.com
Please send me the code to ccssby@naver.com
ReplyDeletePlease send me the code at pichdude@gmail.com. Thanks in advance.
ReplyDeletewas quite complex tutorial and incomplete too but i have implemented it successfully thanks for the idea. :)
ReplyDeletemr_muskurahat@yahoo.com
please mail me the sample code at gansubhai@rediffmail.com
Deletegreat tutorial.
ReplyDeleteplease can I ve the code to fala70 at gmail dot com
thanks
Very good tutorial it is what I'm looking for. Would you please send me the code?
ReplyDeleteThank you.
accretiondisk0620@yahoo.com
Very useful tutorial.
ReplyDeleteCould you plz send me the code?
tunyarat.me@gmail.com
Thank you so much.
Thanks for the tutorial... can you send me the code?
ReplyDeletejulioz92@gmail.com
Nice Tutorial ...can you send me the code?
ReplyDeleteMy EMail Id is
tushaarv@gmail.com
I would appreciate if you could send me the source code of this tutorial. my email is mh.mh1008@gmail.com
ReplyDeleteThanks in advance
If I could grab the full source that would be much appreciated :D
ReplyDeleterev.tyler.misc@gmail.com
This comment has been removed by the author.
ReplyDeletehey plzzz mail me the code..i need it to implement my final year project..thanks
ReplyDeletechetanbisht11@gmail.com
Please send me the sample code as well.
ReplyDeletemy Email is spirulina17@yahoo.coom
Thanks
Please send me the code too, my email address is:
ReplyDeletemichael@rushmobile.hk
Please send me the code too, my email address is:
ReplyDeletejacek.gebala@google.com
Thanks for the tutorial...Can someone please send me the code?
ReplyDeleteMy Mail ( kennet.rasmussen@gmail.com )
\\kennet
This comment has been removed by the author.
ReplyDeleteCan you any one send complete code.My id is
ReplyDeletedennisntstar@gmail.com .
Hello can you send me please code? =(
ReplyDeleteto cybot@itelcel.com
Please send me the code at mrprateekjain@gmail.com
ReplyDeleteplease send me the full src code ,thank you zound617@gmail.com
ReplyDeletePlease send me the code example!!
ReplyDeletemciminieri {at} gmail.com
hi, Please also send me the code sample,
ReplyDeletemy id is trkhan88@gmail.com
thanks in advance :)
Please also send me the code sample.
ReplyDeletejason.yokota@gmail.com
Thanks!
Nice Post!! Please send me the code... Thanks
ReplyDeleteduarteledo@gmail.com
sorry for digging this up, but could u send me your code for this one on dr.mefist@gmail.com ? Thanks in advance
ReplyDeletedamn, my mistake
ReplyDeletecould u send it to dr.mefisto@gmail.com , bloody spelling
could you send me your source code to darklight.kampus@gmail.com
ReplyDeletei'm stuck with android issues error... this baloon driving me crazy
Please send me the full source code at phanquocthinh@gmail.com. Thank you!
ReplyDeleteHi,
ReplyDeleteAmazing tutorial..Can some one send me source code..email id: deccanblu@yahoo.co.in
plz send me code salahjr@gmail.com .. thaks in advance
ReplyDeletePlease send full source code to jweg29@gmail.com. Thanks!!
ReplyDeleteThe same request: I would greatly appreciate if you send me the complete source code. Thank you in advance. My email is alukatski@gmail.com
ReplyDeleteplease send me the code at shamoel.hussain@gmail.com..layout is not gettn inflated..:-(
ReplyDeleteThis comment has been removed by the author.
ReplyDelete@shamoel: Think you need to add all the default constructors to the BaloonLayout, but even then I'm running into NullPointerExceptions..
ReplyDeleteBtw, to anyone that''s not getting this to work, there's a more optimized version that was posted on StackOverflow: http://stackoverflow.com/questions/3707923/show-popup-above-map-marker-in-mapview
can anyone send me the complete sourcecode?
ReplyDeletes161703@stud.hioa.no
can any please send me working sourcecode at imam.anwar@gmail.com.
ReplyDeleteThanx in advance.
Can you please send me the working source code on nela_st@yahoo.com?
ReplyDeletePlease, I've been stuck at this for days now and I need it soon!
Hi, Its a very nice Tutorial. Can you please kindly send me the sample code of this on keyuraashra@gmail.com
ReplyDeleteThanks
Could you send me the code please ?
ReplyDeletestangabogdan96@gmail.com
Hello
ReplyDeleteNice Tutorial.. Plz Send Me The Code Thanks !
med.sahliano@gmail.com
please send me the complete code to me.
ReplyDeletejithups59@gmail.com
Hi,
ReplyDeletePlease send me the complete source code or sample project.
hlaingwintunn@gmail.com
Hi,
ReplyDeletePlease send me the complete source code or sample project.
pavan@mojostreet.com
hi,
ReplyDeleteI have an error to use this code.I use offline tiles map not Google map.So ,I face the error.my error is
MapView.LayoutParams(200,200,item.getPoint(),MapView.LayoutParams.BOTTOM_CENTER));
I want to display the information with baloon box onto for my mapView.
how do I use for my offline map(map.sqlitedb)?
Please Help me.
hlaingwintunn@gmail.com
hi please send me the source code at soni.akhil06@gmail.com
ReplyDeleteThanks
hi could you send me the working code of this example to pavan@mojostreet.com
ReplyDeleteThanks
Can send me the working codes too? send it at nur_fiza_haron@hotmail.com
ReplyDeletePlease send me a full working code in my e-mail at mail.suvankar@gmail.com
ReplyDeleteIf someone has got the source code plz email me.. sowmyasguru@gmail.com
ReplyDeletePlease send me a full version of work in to my e-mail --> am.methinee@gmail.com
ReplyDeletePlease help me I have to use it within this week
Thank you
Hai all...pls send code to sel.ajaykumar@gmail.com
ReplyDeleteHi,
ReplyDeleteplease send me a code to --->pansuriyasumit@gmail.com
Thanks.