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
120
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
80
Exploring a KMM Developer’s Toolkit
subhrajyotisen
0
120
Shipping Apps Confidently with Firebase
subhrajyotisen
0
33
Understanding WindowInsets - Android Worldwide
subhrajyotisen
0
240
Understanding WindowInsets
subhrajyotisen
1
150
Demystifying Styles and Themes
subhrajyotisen
0
180
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
170
Other Decks in Technology
See All in Technology
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
Application Development WG Intro at AppDeveloperCon
salaboy
0
200
Storybook との上手な向き合い方を考える
re_taro
1
220
AGIについてChatGPTに聞いてみた
blueb
0
130
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
AIチャットボット開発への生成AI活用
ryomrt
0
170
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
Terraform Stacks入門 #HashiTalks
msato
0
360
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
29
13k
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
DynamoDB でスロットリングが発生したとき_大盛りver/when_throttling_occurs_in_dynamodb_long
emiki
1
440
Featured
See All Featured
A designer walks into a library…
pauljervisheath
204
24k
Making Projects Easy
brettharned
115
5.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
We Have a Design System, Now What?
morganepeng
50
7.2k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Facilitating Awesome Meetings
lara
50
6.1k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
How STYLIGHT went responsive
nonsquared
95
5.2k
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