Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Understanding WindowInsets
Search
Subhrajyoti Sen
June 27, 2021
Programming
1
170
Understanding WindowInsets
Subhrajyoti Sen
June 27, 2021
Tweet
Share
More Decks by Subhrajyoti Sen
See All by Subhrajyoti Sen
Compose Previews as a Power User
subhrajyotisen
1
130
Understanding WindowInsets
subhrajyotisen
0
170
Exploring a KMM Developer’s Toolkit
subhrajyotisen
1
180
Shipping Apps Confidently with Firebase
subhrajyotisen
0
54
Understanding WindowInsets - Android Worldwide
subhrajyotisen
0
280
Demystifying Styles and Themes
subhrajyotisen
0
200
Journey Of Time
subhrajyotisen
0
210
Where Did My State Go? - WWC Mobile
subhrajyotisen
0
190
Building a Better Codebase with Lint - Droidcon APAC
subhrajyotisen
1
210
Other Decks in Programming
See All in Programming
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
830
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
430
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
390
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
470
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
160
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.1k
Featured
See All Featured
The Invisible Side of Design
smashingmag
300
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
The Language of Interfaces
destraynor
158
25k
It's Worth the Effort
3n
185
28k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Embracing the Ebb and Flow
colly
86
4.7k
Unsuck your backbone
ammeep
671
58k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Transcript
Understanding WindowInsets KeepTruckin Subhrajyoti Sen CodeAid
What are Insets?
Insets - Types
Insets - Types • Status Bars
Insets - Types • • Status Bars Navigation Bars
Insets - Types • • • Status Bars Navigation Bars
Caption Bar
Insets - Types • • • • Status Bars Navigation
Bars Caption Bar IME
Insets - Types • • • • • Status Bars
Navigation Bars Caption Bar IME System Gestures
Insets - Types • • • • • • Status
Bars Navigation Bars Caption Bar IME System Gestures Display Cutouts
Insets Status Bar Navigation Bar
Improving the UI
None
Going Full Screen view.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
Going Full Screen view.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN On API
30+
Going Full Screen window.setDecorFitsSystemWindows(false) On API 30+
Going Full Screen WindowCompat.setDecorFitsSystemWindows(window, false) On API 30+ (backward compatible
till API 21)
Now we have full screen...but
Before After
Fetching WindowInsets
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets() }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets( WindowInsets.Type.navigationBars() ) }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets( WindowInsets.Type.navigationBars() ).bottom }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets( WindowInsets.Type.navigationBars() ).bottom (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?. bottomMargin = navigationBarHeight }
Fetching WindowInsets insets.getInsets(WindowInsets.Type.navigationBars()).bottom On API 29+
Fetching WindowInsets On API 21+
Fetching WindowInsets WindowInsetsCompat .toWindowInsetsCompat(insets) .getInsets( WindowInsetsCompat.Type.navigationBars() ).bottom On API 21+
Insetter to the rescue
Insetter to the rescue Insetter.builder() .marginBottom(windowInsetTypesOf(navigationBars = true)) .applyToView(rootView)
Done
Not yet...
None
Introduce a notch
None
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top binding.toolbar.updatePadding(top= notchHeight) insets }
Doing more with WindowInsets API
Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility =
decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR Light status bar
Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility =
decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() Dark status bar
Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility =
decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() On API 30+
Status Bar Appearance WindowCompat.getInsetsController( window, window.decorView )?.isAppearanceLightStatusBars = false On
API 21+
Show/Hide keyboard
Show keyboard val controller = WindowCompat.getInsetsController( window, window.decorView ) controller?.show(WindowInsetsCompat.Type.ime())
Hide keyboard val controller = WindowCompat.getInsetsController( window, window.decorView ) controller?.hide(WindowInsetsCompat.Type.ime())
Hide status bar val controller = WindowCompat.getInsetsController( window, window.decorView )
controller?.hide(WindowInsetsCompat.Type.statusBars())
Check keyboard visibility binding.root.setOnApplyWindowInsetsListener { _, insets -> val visible
= WindowInsetsCompat.toWindowInsetsCompat(insets) .isVisible(WindowInsetsCompat.Type.ime()) }
@iamsubhrajyoti