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
2021 ComposeFest2021-Migration to Jetpack Compose
Search
Veronikapj
November 22, 2021
Programming
0
130
2021 ComposeFest2021-Migration to Jetpack Compose
2021 Devfest Korea Android
Jetpack Compose 코드랩 중 Migration to Jetpack Compose 설명 자료입니다.
Veronikapj
November 22, 2021
Tweet
Share
More Decks by Veronikapj
See All by Veronikapj
The Know-how of Seniors in the Age of AI
veronikapj
0
57
Gemini in Android Studio I/O extended 2024
veronikapj
0
380
How to use Macrobenchmark
veronikapj
0
330
앱 성능 영혼까지 끌어올리기
veronikapj
0
1k
Software Productivity - Devfest Songdo 2023
veronikapj
0
1k
파이어베이스로 서비스 품질 올리기
veronikapj
0
350
What's new in Android IO23 Daejeon
veronikapj
1
290
KC23_Coroutine_Testing
veronikapj
0
160
ComposeCamp2022 Pathway2
veronikapj
1
390
Other Decks in Programming
See All in Programming
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
AIともっと楽するE2Eテスト
myohei
6
2.6k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
効率的な開発手段として VRTを活用する
ishkawa
0
140
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
A Tale of Four Properties
chriscoyier
160
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Faster Mobile Websites
deanohume
307
31k
Docker and Python
trallard
44
3.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Language of Interfaces
destraynor
158
25k
Adopting Sorbet at Scale
ufuk
77
9.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Transcript
Migrating to Jetpack Compose ߓ GDG Korea Android, Coupang [Korea
Android]
Codelab উղ
https://github.com/gdgand/ComposeFest2021 Repo fork೧ࢲ, ѐੋ ࠳ےীࢲ ೯ೞҊ, ٘۽ ԙ թӝӝ! ܻ
Fork ߉ই֬ਵन ٜ࠙ ୭नചܳ ೠߣ ࠗఌ٘۰ਃ! Repo উղ week 4-2-Migrating to Jetpack Compose
https://github.com/gdgand/ComposeFest2021
߄۽ द!
Migration ҅ദ
7 ਵ۽ بੑ
8 Views Compose Views in Compose
Views Compose
<CoordinatorLayout ...> <AppBarLayout ...> <ConstraintLayout ...> <TextView ...> <TextView ...>
</ConstraintLayout> </CoordinatorLayout> 5. Hello, Compose! fragment_plant_detail.xml
<ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent"/> <CoordinatorLayout ...> <AppBarLayout ...> </CoordinatorLayout> 5.
Hello, Compose! fragment_plant_detail.xml
5. Hello, Compose! class PlantDetailFragment : Fragment() { .. .
override fun onCreateView(...): View? { val binding = DataBindingUtil.inflate<...> ( inflater, R.layout.fragment_plant_detail, container, fals e ).apply { .. . composeView.setContent { MaterialTheme { PlantDetailDescription( ) } } } .. . } } Compose World
6. Creating a Composable out of XML fragment_plant_detail.xml <TextView android:id="@+id/plant_detail_name"
. . . android:layout_marginStart="@dimen/margin_small" android:layout_marginEnd="@dimen/margin_small" android:gravity="center_horizontal" android:text="@{viewModel.plant.name}" android:textAppearance="?attr/textAppearanceHeadline5" . . . tools:text="Apple" />
6. Creating a Composable out of XML @Composable private fun
PlantName(name: String) { Text( text = name, style = MaterialTheme.typography.h5, modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } PlantDetailDescription.kt
6. Creating a Composable out of XML @Composable private fun
PlantName(name: String) { Text( text = name, style = MaterialTheme.typography.h5, modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } android:textAppearance="?attr/textAppearanceHeadline5" PlantDetailDescription.kt
6. Creating a Composable out of XML @Composable private fun
PlantName(name: String) { Text( text = name, style = MaterialTheme.typography.h5, modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } android:layout_width=“match_parent” PlantDetailDescription.kt
6. Creating a Composable out of XML @Composable private fun
PlantName(name: String) { Text( . . . modifier = Modifier .fillMaxWidth() .padding(horizontal = dimensionResource(R.dimen.margin_small)) .wrapContentWidth(Alignment.CenterHorizontally) ) } android:layout_marginStart="@dimen/margin_small" android:layout_marginEnd="@dimen/margin_small" android:gravity="center_horizontal" PlantDetailDescription.kt
ViewComposition Strategy
10.ViewCompositionStrategy Composable ࣻݺ ӝ
10.ViewCompositionStrategy Composable ࣻݺ ӝ ViewCompositionStrategy. DisposeOnDetachedFromWindow
10.ViewCompositionStrategy • Fragment Fragmentীࢲ ࢎਊػ Composition ࢚క(State)ܳ ೞ۰ݶ Fragment View
lifeCycle ਸ ٮۄঠ פ. • Transitions ജ ژח Window ജ ߊࢤೡ ٸ, Windowীࢲ ܻ࠙ػ റীب ComposeViewо ҅ࣘ द غ؊ۄب, ӝࠄ DisposeOnDetachedFromWindow ۚী ٮۄ ࢚క(State)о ઁؾפ. • RecyclerView ViewHolder ژח ࣻݺ ӝ ҙܻ CustomView Composable ViewCompositionStrategyܳ ٮ۽ ೧ঠ ೞח ாझ
10.ViewCompositionStrategy class PlantDetailFragment : Fragment() { .. . override fun
onCreateView(...): View? { val binding = DataBindingUtil.inflate<...> ( inflater, R.layout.fragment_plant_detail, container, fals e ).apply { .. . composeView.setContent { MaterialTheme { PlantDetailDescription( ) } } } .. . } } Compose World
class PlantDetailFragment : Fragment() { .. . ... } 10.ViewCompositionStrategy
composeView.apply { setViewCompositionStrategy( ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed ) setContent { MaterialTheme { PlantDetailDescription() } } }
ViewCompositionStrategy https://developer.android.com/reference/kotlin/androidx/ compose/ui/platform/ViewCompositionStrategy •DisposeOnDetachedFromWindow •DisposeOnLifecycleDestroyed •DisposeOnViewTreeLifecycleDestroyed
Views in Compose
9. Views in Compose code @Composable fun CustomView() { val
selectedItem = remember { mutableStateOf(0) } AndroidView( factory = { context -> CustomView(context).apply { // View setup } }, update = { view -> // View সؘ ۽ ୶о view.coordinator.selectedItem = selectedItem.value } ) }
@Composable fun <T : View?> AndroidView( factory: ((Context) -> T)?,
modifier: Modifier? = Modifier, update: ((T) -> Unit)? = NoOpUpdate ): Unit https://developer.android.com/reference/kotlin/androidx/compose/ui/viewinterop/package- summary#AndroidView(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)
ViewModels in Compose
7. ViewModels and LiveData @Composable fun PlantDetailDescription(plantDetailViewModel: PlantDetailViewModel) { ...
}
7. ViewModels and LiveData @Composable fun MyExample( viewModel: ExampleViewModel =
viewModel() ) { /* ... */ } @Composable fun MyExample2( viewModel: ExampleViewModel = viewModel() ) { /* ... */ } LifeCycleOwnerо ইח زউ زੌೠ ੋझఢझܳ ߈ജ https://developer.android.com/jetpack/compose/libraries#viewmodel
Theme ഐജ
11. Interop theming MDC-Android Compose Theme Adapter
୶о উղ
12. Accessibility in Jetpack Compose 15. Advanced state and side
effects in Jetpack Compose ߣ ೯ࢎী ನೣغ ঋ ٮՏٮՏೠ Codelab
4ର 2ߣ૩ Әࠗఠ दೞࣁਃ