Downloaded 17 times
[BDD 2025 - Mobile Development] Crafting Immersive UI with E2E and AGSL Shader (Veronica Putri Anggraini)
- 1. BDD Crafting Immersive UI withE2E and AGSL Shaders Veronica | Android Engineer
- 2. Veronica Anggraini Work Experiences: ●Android Engineer, eWIDEPLUS ● Google Developer Expert, Android
- 3. Sections ● Mastering E2Eand Window Insets ● Intro to AGSL Shaders ● AGSL to make UI more Immersive
- 7. Mastering E2E and WindowInsets 01
- 8. Have you experiencedthis?
- 9.
- 10.
- 11. Improvement Adapting Android 15’sedge-to-edge design will enhance UI fluidity and provide a modern, immersive user experience. ● Automatic Edge-to-Edge Rendering ● Better Gesture Navigation Handling ● Improved WindowInsets API ● Enhanced Immersive Mode
- 13. Jetpack Compose Handle insetsautomatically and is the simplest way. View System Traditional approach and requires you to manually listen for and apply insets Method Handling E2E
- 14. Step-1 Enable Edge-to-Edge in theActivity Step-2 Use Scaffold as the root page Step-3 Handle Insets Manually, using windowInsetsPadding() Jetpack Compose
- 15.
- 16. Android 14 API 34 Android15 API 35 Enable Edge-to-Edge ❌
- 17. Android 14 API 34 Android15 API 35 Enable Edge-to-Edge ✅
- 18. Step-1 Enable Edge-to-Edge in theActivity Step-2 Use Scaffold as the root page Step-3 Handle Insets Manually, using windowInsetsPadding() Jetpack Compose
- 19. Scaffold Solved It✅ Android 15 API 35 Gesture Android 15 API 35 Button
- 20. Scaffold Solved It❌ Android 15 API 35 Gesture Android 15 API 35 Button
- 21. Solved with InnerPadding
- 22. Step-1 Enable Edge-to-Edge in theActivity Step-2 Use Scaffold as the root page Step-3 Handle Insets using Window Inset API Jetpack Compose 🚀
- 23. Main Types ofInsets ✅ Inset Type Functionality WindowInsets.Type.systemBars() Combination of status bar and navigation bar. WindowInsets.Type.ime() The area covered by the keyboard (Input Method Editor). WindowInsets.Type.displayCutout() The area for the screen notch or camera hole WindowInsets.Type.safeDrawing A safe combination of system bars, cutouts, and IME to ensure content is not cut off.
- 24. Using WindowInsets asOption ✅
- 25. Start with theAppBar ✅
- 26. Step-1 Make the Edge-to-Edge andSystem Bars Transparent Android View Step-2 Handle the UI Overlaps using Insets
- 27.
- 28. System Bars Transparenton Theme ✅
- 29. Step-1 Make the Edge-to-Edge andSystem Bars Transparent Android View Step-2 Handle the UI Overlaps using ViewCompat dan WindowInsetCompat
- 30. Using WindowInsetsCompat UIOverlaps ✅
- 31.
- 32. What is aShader? A shader is a small program written in a specialized shading language (AGSL) that executes directly and in parallel on the Graphics Processing Unit (GPU) to calculate the final appearance of pixels.
- 33. How to buildsomething like this?
- 34. AGSL Introduction A specializedshading language built on SKSL that provides Android-specific optimizations for writing custom, GPU-accelerated graphics programs (shaders). Fully integrated with the Android rendering pipeline for efficient, complex visual effects.
- 35. Advanced Visual Effects Create highlycomplex, dynamic, and procedural visual treatments that evolve over time or input. Example: Animated liquid gradients, custom ripple effects, procedural noise generation, warping/distortion Real-Time Color Processing Perform pixel-accurate color manipulation and filtering on images or UI layers with GPU speed. Example : Custom color filters (sepia, holographic), Chromatic Aberration, dynamic lighting models, and mathematical blending. What Can AGSL Do? UI Component Filtering Apply a custom, GPU-accelerated effect to an entire UI element and its children. Example : Frosted glass (blur) effect over a background, applying a stylized filter to an entire Composable/View using RenderEffect. Custom Drawing Sources Define the fill content (color/pattern) used when drawing shapes and text on the Canvas. Example : Using a dynamic, patterned shader as a ShaderBrush to fill the background of a button or the stroke of a shape.
- 36. How does AGSLwork? Pass processed Shader information to lower layers Pass processed Shader information to lower layers Interface with low-level graphics APIs
- 37. AGSL Comparation Features CanvasAPI (draw...) AGSL (Shader) Execution Logic on CPU, Render on GPU Full on GPU (Parallel) Main Power Layout, Text, Vector Shapes, Lines Textures, Complex Gradients, Visual Effects, Particles Pixel Manipulation Difficult and Slow (via Bitmap.setPixel) Native & Very Fast Memory Load High if many Paths/Bitmaps Low (Math only) Learning Curve Easy (Standard Android) Medium-High (Requires Math/GLSL logic) Weaknesses Too heavy for complex animations Very difficult to draw text
- 38. Do ✅ ● DynamicBackgrounds, such as live wallpapers, moving gradients (like Spotify or Instagram styles). ● Photo/Image Effects, color filters, desaturation, glitch effects, or vignettes. ● Custom UI Components, buttons with complex glowing effects, or cards with subtle shimmering effects. ● Transitions, interscreen transition effects that involve distortion (such as a folded page effect).
- 39. Don’t ❌ ● DisplayingText, drawing fonts/letters inside a shader is a mathematical nightmare (Signed Distance Functions). ● Standard Layout, Lists, standard buttons, input forms.
- 40. AGSL to makeUI more Immersive 03
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. As Filter Drawing Traditionalapproach and requires you to manually listen for and apply insets AGSL Options Implementation https://shaders.skia.org/
- 47. Summary ● Embrace Edge-to-Edge(E2E), Adapting to Android 15’s enforcement and utilizing the full screen is essential for creating modern, fluid user experiences. ● Insets Management Strategies, on Jetpack Composeis Offers the simplest approach using Scaffold for automatic handling or windowInsetsPadding for manual control. And view System requires a traditional approach involves making system bars transparent and manually handling UI overlaps via listeners . ● Unlock Creativity with AGSL, AGSL (Android Graphics Shading Language) allows you to write custom, GPU-accelerated programs for advanced visual effects, real-time color processing, and dynamic textures. ● The Ultimate Immersive UI, combining the spatial freedom of Edge-to-Edge layouts with the dynamic visual power of AGSL Shaders is the key to crafting truly immersive and distinctive Android applications.
- 48. Thank You veroanggra veroanggra Get intouch veroanggraa.github.io veroanggra