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
140
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
Compose Previews as a Power User
subhrajyotisen
1
100
Exploring a KMM Developer’s Toolkit
subhrajyotisen
0
150
Shipping Apps Confidently with Firebase
subhrajyotisen
0
43
Understanding WindowInsets - Android Worldwide
subhrajyotisen
0
260
Understanding WindowInsets
subhrajyotisen
1
160
Demystifying Styles and Themes
subhrajyotisen
0
190
Journey Of Time
subhrajyotisen
0
190
Where Did My State Go? - WWC Mobile
subhrajyotisen
0
180
Building a Better Codebase with Lint - Droidcon APAC
subhrajyotisen
1
190
Other Decks in Technology
See All in Technology
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
11
3.8k
急成長する企業で作った、エンジニアが輝ける制度/ 20250227 Rinto Ikenoue
shift_evolve
0
130
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.7k
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
270
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
290
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
150
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
590
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Faster Mobile Websites
deanohume
306
31k
How to Ace a Technical Interview
jacobian
276
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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