Beautiful Performant Android UI
Article Summary
Instagram built a full-screen video viewer that needed to feel buttery smooth on every Android device. Here's how they made animations delightful without killing performance.
The Instagram Engineering team shares their approach to building the immersive video viewer for Explore channels. This deep dive covers animation techniques, performance optimizations, and the tradeoffs they navigated to ship a feature that works beautifully across all device tiers.
Key Takeaways
- Used spring physics (Rebound library) instead of polynomial interpolations for natural animations
- Reduced four views per video to one custom ImageView, cutting render overhead
- Switched from view.setAlpha() to drawable.setAlpha() to eliminate hardware layer allocation
- Built custom ListView with GestureDetector to handle fling pagination smoothly
- Invalidated only changed child views during animations, never the entire ListView
Instagram achieved smooth 60fps animations by choosing the right alpha methods, minimizing view counts, and using spring physics that respect user input velocity.
About This Article
When users scrolled between videos in Instagram's video viewer, the UI felt choppy. Headers and overlays would suddenly appear and disappear instead of fading smoothly into view.
The Instagram Engineering team added alpha animations using spring-based interpolations from the Rebound library. They synced pagination and opacity changes through a single spring, so all the animations finished at the same time.
The viewer stayed smooth on all devices because they used drawable.setAlpha() instead of view.setAlpha(). This avoided expensive hardware layer allocations that made scrolling animations stutter.
