인공지능위크 2023 - Android 트랙에서 발표했던 Large screens and foldable (대화면 기기와 폴더블을 위한 앱개발) 발표자료입니다

1. Large screens and foldable
(대화면 기기와 폴더블을 위한 앱 개발)
Kyeongwan Kang,
Android Developer, Woowabros.
GDG Korea Android

2. 86%
Statistic Caption
14%
Statistic Caption
Kyeongwan Kang (강경완)
Android Developer, Woowabros.
GDG Korea Android

3. 86%
Statistic Caption
14%
Statistic Caption
Foldable Device

4. 280M
Large Screen
Android Device today
3%~
Foldable Device today
Large screen and Foldable User
적지 않아요! 폴더블 유저!

5. Placeholder text. Please replace. A class is
like a blueprint, which contains instructions
for how to create something.
An object instance is an actual Dice that’s
created from the blueprint.
대화면에 대한 감이 오지 않는다면,
아이디어가 필요하다면
50개가 넘는 구글 앱을 참고하세요!
Google Apps

7. Letterboxed app
앱이 고정된 방향을 가지고 있거나,
(screenOrientation)
앱의 크기를 조절할 수 없거나,
(resizeableActivity)
디스플레이와 가로세로 비율이 호환되지 않는 경우
(min/maxAspectRatio)
레터박스 처리될 수 있음 (Android 12L 이상)

8. <activity
android:name=".ui.MainActivity"
android:screenOrientation="portrait"
android:resizeableActivity="false” >
</activity>
AndroidManifest.xml

9. <activity
android:name=".ui.MainActivity"
android:screenOrientation="portrait”
android:resizeableActivity="false" >
</activity>
AndroidManifest.xml

10. Window Size Classes

11. Window Size Classes

12. Window Size Classes
Compact Medium Expanded

13. Jetpack WindowManager
implementation "androidx.window:window:1.1.0”

14. implementation "androidx.window:window:1.1.0”
enum class WindowSizeClass {COMPACT,MEDIUM,EXPANDED}
private fun computeWindowSizeClasses() {
val metrics = WindowMetricsCalculator.getOrCreate()
.computeCurrentWindowMetrics(this)
val widthDp = metrics.bounds.width() / resources.displayMetrics.density
val widthWindowSizeClass = when {
widthDp < 600f -> WindowSizeClass.COMPACT
widthDp < 840f -> WindowSizeClass.MEDIUM
else -> WindowSizeClass.EXPANDED
}
// Use widthWindowSizeClass
}
Jetpack WindowManager

15. implementation "androidx.window:window:1.1.0”
implementation "androidx.compose.material3:material3-window-size-class:1.1.1”
val windowSize = calculateWindowSizeClass(this)
when (windowSize) {
WindowWidthSizeClass.Compact ->
WindowWidthSizeClass.Medium ->
WindowWidthSizeClass.Expanded ->
}
Jetpack WindowManager

16. Placeholder text. Please replace. A class is
like a blueprint, which contains instructions
for how to create something.
An object instance is an actual Dice that’s
created from the blueprint.
얼마나 Large screen을 잘 지원하고 있는지에 따라
Tier 3, Tier 2, Tier 1 으로 분류함
Tier 1 으로 갈 수록 잘 지원하고 있는 것이며,
각 Tier 별 요구사항을 확인할 수 있음
Large screen app quality

17. Tier3 (기본) Tier1 (최고)
앱이 대형 화면용으로 설계된
사용자 환경을 제공함
(필요한 경우) 멀티태스킹,
폴더블 상태,
드래그 앤 드롭을 지원함
앱이 대형 화면용으로
설계된 반응형 및 적응형
레이아웃이 있음.
모든 화면 크기 및 기기
구성에 맞게 레이아웃
최적화가 구현됨.
앱이 전체화면으로 실행되지만
이상적이지 않을 수 있음
앱이 레터박스 처리되지 않음
Large screen app quality

18. Tier3 (기본) Tier2 (우수) Tier1 (최고)
앱이 대형 화면용으로 설계된
사용자 환경을 제공함
(필요한 경우) 멀티태스킹,
폴더블 상태,
드래그 앤 드롭을 지원함
앱이 대형 화면용으로
설계된 반응형 및 적응형
레이아웃이 있음.
모든 화면 크기 및 기기
구성에 맞게 레이아웃
최적화가 구현됨.
앱이 전체화면으로 실행되지만
이상적이지 않을 수 있음
앱이 레터박스 처리되지 않음
Large screen app quality

19. Session Title Here
Placeholder text. Please replace. Do more with less code and
avoid entire classes of bugs. Code is simpler and easier to
maintain. Placeholder text. Please replace. Do more with less
code and avoid entire classes of bugs. Code is simpler and
easier to maintain.

20. Activity Embedding
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application>
<property
android:name="android.window.PROPERTY_ACTIVITY_EMBEDDING_SPLITS
_ENABLED"
android:value="true" />
</application>
</manifest>

21. Open App
Activity Embedding
Detail
Activity
List
Activity
Detail
Activity

22. Activity Embedding
<SplitPairRule
window:finishPrimaryWithSecondary="never"
window:finishSecondaryWithPrimary="always"
window:splitMinWidthDp="840"
window:splitRatio="0.33">
<SplitPairFilter
window:primaryActivityName=".ListActivity"
window:secondaryActivityName=".DetailActivity" />
</SplitPairRule>

23. Activity Embedding
A B A C A C
C

24. Jetpack Compose
ReplyTheme {
val windowSize = calculateWindowSizeClass(this)
val uiState = viewModel.uiState.collectAsState().value
ReplyApp(uiState, windowSize.widthSizeClass)
}

25. Jetpack Compose
@Composable
fun ReplyApp(.., windowSize: WindowWidthSizeClass,) {
…
when (windowSize) {
WindowWidthSizeClass.Compact -> …
WindowWidthSizeClass.Medium -> …
WindowWidthSizeClass.Expanded. -> …
}
}

26. Jetpack Compose
when (windowSize) {
WindowWidthSizeClass.Compact -> {
navigationType = BOTTOM_NAVIGATION
contentType = LIST_ONLY }
WindowWidthSizeClass.Medium -> {
navigationType = NAVIGATION_RAIL
contentType = LIST_AND_DETAIL }
WindowWidthSizeClass.Expanded. -> {
navigationType = PERMANENT_NAVIGATION_DRAWER
contentType =LIST_AND_DETAIL }
}
}

28. Tier2 (우수)
Tier3 (기본) Tier1 (최고)
앱이 대형 화면용으로 설계된
사용자 환경을 제공함
(필요한 경우) 멀티태스킹,
폴더블 상태,
드래그 앤 드롭을 지원함
앱이 대형 화면용으로
설계된 반응형 및 적응형
레이아웃이 있음.
모든 화면 크기 및 기기
구성에 맞게 레이아웃
최적화가 구현됨.
앱이 전체화면으로 실행되지만
이상적이지 않을 수 있음
앱이 레터박스 처리되지 않음
Large screen app quality

29. Large Screen App Quality Guideline
https://developer.android.com/docs/quality-guidelines/large-screen-app-quality
Resources
Activity Embedding Guide
https://developer.android.com/guide/topics/large-screens/activity-embedding
Activity Embedding Codelab
https://developer.android.com/codelabs/large-screens/activity-embedding
Jetpack Compose Adaptability Codelab
https://codelabs.developers.google.com/jetpack-compose-adaptability
Support Different Screen Size Guide
https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes

30. Thank you