Forum Xamarin.Forms

How to make a Cross Platform Bubble Control? (example of request provided)

TimothyPirogTimothyPirog USMember
edited July 2016 in Xamarin.Forms

Hey all,

New to the forms and I am a bit stuck. Has anyone attempted to make a bubble control for Xamarin which works for both ios and android?

An example is:

I am a bit confused where I would start. Thanks!


  • JohnHardmanJohnHardman GBUniversity mod

    @TimothyPirog - What capabilities do you want it to have? Is the background a solid color, or do you want to be able to see what is behind it?

  • TimothyPirogTimothyPirog USMember

    @JohnHardman Thanks for the reply.

    I would like it to be similar to the example or the facebook chat head. It stays on top of all apps/desktop and can be moved around. Also if it is undesired to can be exited by pulling to the bottom (X).


  • JohnHardmanJohnHardman GBUniversity mod

    The starting point is that you need an Image for the bubble itself. The Image will be square, using a .png with transparent pixels filling between the circumference of the circle and the bounding square, so that when displayed the user just sees the circular bit.

    Use a GestureRecognizer to detect taps on the Image. If you are ok with a tap between the edge of the circle and the edge of the square Image being accepted as a tap, nothing more needs to be done. However, if you don't want taps outside the edge of the circle being accepted, you will need to get the position at which the tap was done and check whether it is within the circle.

    For positioning the Image, you will probably want to use either a RelativeLayout or AbsoluteLayout. Whichever is used, what wants to be the page content gets added to the Layout, then the Image for the bubble gets added on top.

    For dragging the bubble around, you can either do this with or without custom renderers. If doing it without custom renderers, you will probably want to use MR.Gestures .

  • batmacibatmaci DEMember ✭✭✭✭✭

    @JohnHardman thank you for detailed explanation but I think that this will work only when app or certain page is running. chat heads like facebook works differently. i dont know how they work exactly but they run like standalone, not dependent on a page.
    which solution did you implemented? can you please share?

  • JohnHardmanJohnHardman GBUniversity mod

    @batmaci - You are correct in that what I described assumes use of a XF page, rather than working over any app.

  • KevinScheidtKevinScheidt USMember

    Has anyone gotten this working?

Sign In or Register to comment.