droidconIN 2015

The fifth edition of droidconIN

Wingston Sharon


Designing "Always Present" Floating UI Components for fun and profit

Submitted Aug 27, 2015

The Talk explains how i built the below app that uses the “chat heads” feature that facebook uses for showing you chat notifications in android as a control interface for an audio player
It is quite an interesting experiment as it lets the user have control over your app, while he is multitasking / using his phone normally.

i will also explain some common pitfalls / learning curves that i have faced while going throught building this app.
I will be going through how system overlays work, how to interact with them, why they are difficult to use and how to use them without compromising on the end users experience.


Facebook was the first chaps to use the overlay feature of android to actually build a usable and fun interface as “chat heads” in their messenger apps. This allowed you to do other things while waiting for the other person to respond.

The challenge here is not so much technical as understanding the UI challenges involved to provide a very unobtrusive implementation of this in your own app.

With this talk, you will be armed with knowledge of how to build your own microUI interface as an ever floating widget similar to my own app which exposes the controls of an audio player as a overlay bubble.

  • now playing / audio progress
  • pause
  • stop
  • change song

This is not so much a walkthrough on the technical challenges as a complete analyis into the UI for such a feature and how to decide which features your app should expose as a floating widget and even if you really need one.


nothing much

Speaker bio

i am a backend engineer; javascript tinkerer and mobile tweaker. I have extensive experience with challenging UI decisions and a do all mentalitiy that will not stop until it is done.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}