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
91
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
Exploring a KMM Developer’s Toolkit
subhrajyotisen
0
96
Shipping Apps Confidently with Firebase
subhrajyotisen
0
27
Understanding WindowInsets - Android Worldwide
subhrajyotisen
0
210
Understanding WindowInsets
subhrajyotisen
1
140
Demystifying Styles and Themes
subhrajyotisen
0
170
Journey Of Time
subhrajyotisen
0
170
Where Did My State Go? - WWC Mobile
subhrajyotisen
0
160
Building a Better Codebase with Lint - Droidcon APAC
subhrajyotisen
1
160
Building a Better Codebase with Lint - Droidcon Americas
subhrajyotisen
0
130
Other Decks in Technology
See All in Technology
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Classmethod Odyssey 登壇資料
yamahiro
0
390
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
How to Think Like a Performance Engineer
csswizardry
4
590
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
160
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Side Projects
sachag
451
42k
Typedesign – Prime Four
hannesfritz
37
2.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Designing the Hi-DPI Web
ddemaree
276
34k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
YesSQL, Process and Tooling at Scale
rocio
166
14k
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