Invitation for modern Android UI development - Basic of Jetpack Compose

2022 April 28
WTM International Women's Day
#ProgressNotPerfection

I've been fascinated by mobile apps that work in the hands of people and have continued to learn and work with Android.
In this session, I will introduce the charm of application development and modern application UI development.
And discuss how to get started with Jetpack Compose, the latest UI framework.

Transcript

1. Invitation for modern Android UI development - Basic of Jetpack Compose - @mochico 2022 April 28 WTM International Women's Day #ProgressNotPerfection
2. Hello! mochico (Miho Mochizuki) @_mochicon_ Joined Mercari in January 2018, Mercari is the 4th company
3. About my career Majored Sociology at University, wanted to be an editor of books Couldn’t find a job of editor, and jumped into the engineering Got a job at a small system development company with no experience, and learn Java Learn Android development as training during times of recession and no work Addicted to app development and looked for the job, finally joined to Mercari Listen more: https://anchor.fm/background-radio/episodes/Background-radio-ep-05-eqm2np
4. Try anything fun! I haven’t expected to be an engineer. But I really enjoying my career. The carrier style called “Planned happened stance”
5. Grow with the platform Addiction of mobile development changed my world. It's been over 10 years since Android was born, and the technology is evolving, and keeping up with it has led to my career.
6. Let’s follow up the trend of the mobile app development!
7. Jetpack Compose
8. Jetpack Compose • Declarative UI toolkit • Defined by Function • Write everything in Kotlin • Update all UI every time the state changes • Redraw only the changes Leave the drawing control to the recompose and declare only what kind of data is displayed
9. (Used to) Imperative UI findViewById<TextView>(R.id.text_view) .setText(data.hello)
10. Declarative UI Text(text = model.hello) =
11. Recommended structure
12. Jetpack Compose × MVVM
13. MVVM
14. Up side for using Jetpack Compose + MVVM • Android Architecture Component (AAC) Lifecycle- aware components provides ViewModel • AAC ViewModel manages UI-related data in lifecycle conscious • Redraw handling of Jetpack Compose simplify the code for changes of data ※ Proper architecture depends on the project
15. Step by step into Jetpack Compose × MVVM
16. DL Android studio And see the sample code in: https://github.com/mochico/ComposeBasic
17. Select Compose Template
19. Data class data class Counter( val count:Int )
20. Screen State data class MainScreenState( val counter: Counter = Counter(0) )
21. ViewModel open class MainViewModel: ViewModel() { val state = MutableStateFlow(MainScreenState()) fun countUp() { state.update { it.copy( counter = Counter(it.counter.count.inc()) ) } } }
22. Composable @Composable fun MainScreenContent(viewModel: MainViewModel) { val state by viewModel.state.collectAsState() Column( modifier = Modifier .fillMaxSize() .padding(8.dp), horizontalAlignment = Alignment.CenterHorizontally, ) { Text(text = state.counter.count.toString()) TextButton( onClick = viewModel::countUp ) { Text(text = "count up") } } }
23. Activity class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val viewModel: MainViewModel by viewModels() setContent { MainScreenContent(viewModel) } } }
24. Project structure
25. Run app
26. MVVM in practice Activity Composable State Data operation can be added
27. Try easily, Develop fast By using a declarative UI and an architecture based on MVVM, you can create an app that makes each layer simple and easy to maintain
28. Enjoy tech! How is it? Did you find it complicated? Or did you find the responsibilities of each layer clear and easy to develop? Let's enjoy the evolution of technology and continue to grow together.
29. References: • Jetpack Compose | Android Developers https:// developer.android.com/jetpack/compose • Guide to app architecture | Android Developers https://developer.android.com/jetpack/guide • ViewModel Overview | Android Developers https://developer.android.com/topic/libraries/ architecture/viewmodel
30. Appendix: Preview @Preview(showBackground = true) @Composable fun MainScreenPreview() { MainScreenContent( viewModel = MainViewModel() ) } You can run a composable with interaction on Preview See DroidKaigi 2021 - Title : Let's Preview！ Jetpack Compose / mochico [JA] - YouTube https://www.youtube.com/watch? v=aSdrXAlMKew&lc=UgxIaaw9PfTQSxOzapt4AaABAg too