Building a Floating View in Android: A Practical Approach - Part 1
Article Summary
Fauzi Mubarok from IDN Engineering breaks down how to build those addictive floating reward bubbles you see in TikTok and Shopee. Turns out, creating smooth overlay views in Android requires some clever system-level tricks.
This practical guide walks through building interactive floating views that overlay the entire Android screen, independent of activities or fragments. The tutorial covers custom layouts with Lottie animations, touch handling, and smooth movement animations that stick to screen edges.
Key Takeaways
- Uses Lottie animations and custom RelativeLayout for engaging visual effects
- MoveAnimator class creates smooth 400ms transitions when floating view snaps to edges
- Touch detection distinguishes clicks from drags using time and distance thresholds
- Handles orientation changes by saving portrait position and recalculating screen bounds
- Close button with custom styling gives users easy dismissal option
Building floating views requires managing system overlays, precise touch event handling, and responsive animations that adapt to screen orientation changes.
About This Article
Fauzi Mubarok needed to tell the difference between a user clicking and dragging on floating views. The challenge was detecting how long the touch lasted and how far it moved to avoid accidentally dismissing the view while repositioning it.
He built an isOnClickEvent() function that uses TOUCH_TIME_THRESHOLD and CLICK_TOLERANCE constants. These check that the touch was quick and that movement in both X and Y coordinates stayed within acceptable limits.
This touch detection logic lets users click reliably while still being able to drag smoothly. They can reposition floating views without accidentally triggering reward claims or dismissals.