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
190
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
17
Building Mobile Apps and Scaling them
subhrajyotisen
0
22
Compose Previews as a Power User
subhrajyotisen
1
150
Exploring a KMM Developer’s Toolkit
subhrajyotisen
1
200
Shipping Apps Confidently with Firebase
subhrajyotisen
0
66
Understanding WindowInsets - Android Worldwide
subhrajyotisen
0
310
Understanding WindowInsets
subhrajyotisen
1
190
Demystifying Styles and Themes
subhrajyotisen
0
220
Journey Of Time
subhrajyotisen
0
230
Other Decks in Technology
See All in Technology
about #74462 go/token#FileSet
tomtwinkle
1
290
許しとアジャイル
jnuank
1
120
Azure Well-Architected Framework入門
tomokusaba
1
290
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
920
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
110
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
0
120
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Making Projects Easy
brettharned
119
6.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Adaptive Systems
keathley
43
2.8k
Being A Developer After 40
akosma
91
590k
Why Our Code Smells
bkeepers
PRO
339
57k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Statistics for Hackers
jakevdp
799
220k
Agile that works and the tools we love
rasmusluckow
331
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
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