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
June 27, 2021
Programming
1
190
Understanding WindowInsets
Subhrajyoti Sen
June 27, 2021
Tweet
Share
More Decks by Subhrajyoti Sen
See All by Subhrajyoti Sen
Updated Lessons from a KMP Developer's Toolkit
subhrajyotisen
0
19
Building Mobile Apps and Scaling them
subhrajyotisen
0
23
Compose Previews as a Power User
subhrajyotisen
1
160
Understanding WindowInsets
subhrajyotisen
0
190
Exploring a KMM Developer’s Toolkit
subhrajyotisen
1
200
Shipping Apps Confidently with Firebase
subhrajyotisen
0
67
Understanding WindowInsets - Android Worldwide
subhrajyotisen
0
310
Demystifying Styles and Themes
subhrajyotisen
0
220
Journey Of Time
subhrajyotisen
0
230
Other Decks in Programming
See All in Programming
オープンソースソフトウェアへの解像度🔬
utam0k
16
3k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.8k
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
600
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
XP, Testing and ninja testing ZOZ5
m_seki
3
700
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
私はどうやって技術力を上げたのか
yusukebe
44
19k
株式会社 Sun terras カンパニーデック
sunterras
0
340
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
1
300
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
120
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
910
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Applications with DynamoDB
mza
96
6.7k
The Language of Interfaces
destraynor
162
25k
Optimizing for Happiness
mojombo
379
70k
Designing Experiences People Love
moore
142
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Faster Mobile Websites
deanohume
310
31k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
GitHub's CSS Performance
jonrohan
1032
470k
The Cult of Friendly URLs
andyhume
79
6.6k
Transcript
Understanding WindowInsets KeepTruckin Subhrajyoti Sen CodeAid
What are Insets?
Insets - Types
Insets - Types • Status Bars
Insets - Types • • Status Bars Navigation Bars
Insets - Types • • • Status Bars Navigation Bars
Caption Bar
Insets - Types • • • • Status Bars Navigation
Bars Caption Bar IME
Insets - Types • • • • • Status Bars
Navigation Bars Caption Bar IME System Gestures
Insets - Types • • • • • • Status
Bars Navigation Bars Caption Bar IME System Gestures Display Cutouts
Insets Status Bar Navigation Bar
Improving the UI
None
Going Full Screen view.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
Going Full Screen view.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN On API
30+
Going Full Screen window.setDecorFitsSystemWindows(false) On API 30+
Going Full Screen WindowCompat.setDecorFitsSystemWindows(window, false) On API 30+ (backward compatible
till API 21)
Now we have full screen...but
Before After
Fetching WindowInsets
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets() }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets( WindowInsets.Type.navigationBars() ) }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets( WindowInsets.Type.navigationBars() ).bottom }
Fetching WindowInsets binding.root.setOnApplyWindowInsetsListener { _, insets -> val navigationBarHeight =
insets.getInsets( WindowInsets.Type.navigationBars() ).bottom (binding.root.layoutParams as? ViewGroup.MarginLayoutParams)?. bottomMargin = navigationBarHeight }
Fetching WindowInsets insets.getInsets(WindowInsets.Type.navigationBars()).bottom On API 29+
Fetching WindowInsets On API 21+
Fetching WindowInsets WindowInsetsCompat .toWindowInsetsCompat(insets) .getInsets( WindowInsetsCompat.Type.navigationBars() ).bottom On API 21+
Insetter to the rescue
Insetter to the rescue Insetter.builder() .marginBottom(windowInsetTypesOf(navigationBars = true)) .applyToView(rootView)
Done
Not yet...
None
Introduce a notch
None
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top }
Padding for Notch (Display Cutout) binding.root.setOnApplyWindowInsetsListener { _, insets ->
notchHeight = WindowInsetsCompat.toWindowInsetsCompat(insets) .getInsets(WindowInsetsCompat.Type.displayCutout()) .top binding.toolbar.updatePadding(top= notchHeight) insets }
Doing more with WindowInsets API
Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility =
decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR Light status bar
Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility =
decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() Dark status bar
Status Bar Appearance (Earlier) val decor = window.decorView decor.systemUiVisibility =
decor.systemUiVisibility or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv() On API 30+
Status Bar Appearance WindowCompat.getInsetsController( window, window.decorView )?.isAppearanceLightStatusBars = false On
API 21+
Show/Hide keyboard
Show keyboard val controller = WindowCompat.getInsetsController( window, window.decorView ) controller?.show(WindowInsetsCompat.Type.ime())
Hide keyboard val controller = WindowCompat.getInsetsController( window, window.decorView ) controller?.hide(WindowInsetsCompat.Type.ime())
Hide status bar val controller = WindowCompat.getInsetsController( window, window.decorView )
controller?.hide(WindowInsetsCompat.Type.statusBars())
Check keyboard visibility binding.root.setOnApplyWindowInsetsListener { _, insets -> val visible
= WindowInsetsCompat.toWindowInsetsCompat(insets) .isVisible(WindowInsetsCompat.Type.ime()) }
@iamsubhrajyoti