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
September 07, 2023
Technology
0
180
Understanding WindowInsets
Talk given at Google I/O Connect Bengaluru 2023
Subhrajyoti Sen
September 07, 2023
Tweet
Share
More Decks by Subhrajyoti Sen
See All by Subhrajyoti Sen
Updated Lessons from a KMP Developer's Toolkit
subhrajyotisen
0
9
Building Mobile Apps and Scaling them
subhrajyotisen
0
12
Compose Previews as a Power User
subhrajyotisen
1
150
Exploring a KMM Developer’s Toolkit
subhrajyotisen
1
190
Shipping Apps Confidently with Firebase
subhrajyotisen
0
62
Understanding WindowInsets - Android Worldwide
subhrajyotisen
0
300
Understanding WindowInsets
subhrajyotisen
1
180
Demystifying Styles and Themes
subhrajyotisen
0
210
Journey Of Time
subhrajyotisen
0
220
Other Decks in Technology
See All in Technology
AI関数が早くなったので試してみよう
kumakura
0
120
Claude Codeは仕様駆動の夢を見ない
gotalab555
13
2.6k
データモデリング通り #2オンライン勉強会 ~方法論の話をしよう~
datayokocho
0
100
Kiroでインフラ要件定義~テスト を実施してみた
nagisa53
3
300
解消したはずが…技術と人間のエラーが交錯する恐怖体験
lamaglama39
0
190
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
120
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
帳票構造化タスクにおけるLLMファインチューニングの性能評価
yosukeyoshida
1
230
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
AWS re:Inforce 2025 re:Cap Update Pickup & AWS Control Tower の運用における考慮ポイント
htan
1
210
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
840
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
1
250
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Designing Experiences People Love
moore
142
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Automating Front-end Workflow
addyosmani
1370
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Rails Girls Zürich Keynote
gr2m
95
14k
Scaling GitHub
holman
461
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Faster Mobile Websites
deanohume
308
31k
How to train your dragon (web standard)
notwaldorf
96
6.1k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
Understanding WindowInsets Subhrajyoti Sen Software Engineer, Android GDE
What are WindowInsets? WindowInsets in Views WindowInsets in Compose Agenda
Section 02 Section 01 Section 03
What are WindowInsets? Section 01
Section 01 Common types of Window Insets: 1. Navigation bar
2. Status bar 3. IME 4. System Gestures 5. Mandatory System Gestures 6. Caption Bar
Section 01 Status bar Navigation bar
Section 01 IME
WindowInsets in Views Section 02
Section 02
Section 02
Section 02
(Palmer penguins; Horst et al.) class MainActivity: Activity { override
fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
(Palmer penguins; Horst et al.) class MainActivity: Activity { override
fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) WindowCompat.setDecorFitsSystemWindows(window, false) } } Section 02
(Palmer penguins; Horst et al.) class MainActivity: Activity { override
fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) window.statusBarColor = Color.TRANSPARENT window.navigationBarColor = Color.TRANSPARENT } } Section 02
Section 02
Section 02
Section 02
(Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets ->
val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
(Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets ->
val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
(Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets ->
val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
(Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets ->
val windowInsetsCompat = WindowInsetsCompat.toWindowInsetsCompat(insets) val navBarInsets = windowInsetsCompat.getInsets(WindowInsetsCompat.Type.navigationBars()) (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?.bottomMargin = navBarInsets.bottom insets } Section 02
Section 02
(Palmer penguins; Horst et al.) WindowCompat.getInsetsController(window, window.decorView) .show(WindowInsetsCompat.Type.ime()) Section 02
Show soft keyboard (IME)
(Palmer penguins; Horst et al.) WindowCompat.getInsetsController(window, window.decorView) .hide(WindowInsetsCompat.Type.ime()) Section 02
Hide soft keyboard (IME)
(Palmer penguins; Horst et al.) binding.root.setOnApplyWindowInsetsListener { _, insets ->
val visible = WindowInsetsCompat .toWindowInsetsCompat(insets) .isVisible(WindowInsetsCompat.Type.ime()) } Section 02 Check IME Visibility
WindowInsets in Compose Section 03
26 Section 03 Box( modifier = Modifier.windowInsetsPadding() ) { Toolbar("Android")
}
27 Section 03 Box( modifier = Modifier.windowInsetsPadding(WindowInsets.statusBars) ) { Toolbar("Android")
}
28 Section 03 Box( modifier = Modifier.statusBarPadding() ) { Toolbar("Android")
}
29 Section 03 Box( modifier = Modifier .fillMaxSize() .background(Color.Black) )
{ Box( modifier = Modifier .fillMaxSize() .statusBarsPadding() .background(Color.Gray)) { Box( modifier = Modifier.statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
30 Section 03 Box( modifier = Modifier .fillMaxSize() .background(Color.Black) )
{ Box( modifier = Modifier .fillMaxSize() .statusBarsPadding() .background(Color.Gray)) { Box( modifier = Modifier .statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
31 Section 03
32 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) )
{ contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .background(Color.Red) .size(50.dp) ) } }
33 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) )
{ contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .background(Color.Red) .size(50.dp) ) } }
34 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) )
{ contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
35 Section 03 Scaffold( modifier = Modifier .fillMaxSize() .background(Color.Black) )
{ contentPadding -> Box( modifier = Modifier .fillMaxSize() .padding(contentPadding) .background(Color.Gray)) { Box( modifier = Modifier .statusBarsPadding() .background(Color.Red) .size(50.dp) ) } }
36 Section 03 TextField( value = textFieldValue, onValueChange = {
textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .size(50.dp), )
37 Section 03 TextField( value = textFieldValue, onValueChange = {
textFieldValue = it }, modifier = Modifier .align(Alignment.BottomCenter) .imePadding() .size(50.dp), )
Section 03 Multiplatform WindowInsets Source: insetsx GitHub https://github.com/mori-atsushi/insetsx
Thank You Subhrajyoti Sen Software Engineer, Android GDE