Invitation for modern Android UI development - Basic of Jetpack Compose - @mochico 2022 April 28 WTM International Women's Day #ProgressNotPerfection 

Hello! mochico (Miho Mochizuki) @_mochicon_ Joined Mercari in January 2018, Mercari is the 4th company 

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 

Try anything fun! I haven’t expected to be an engineer. But I really enjoying my career. The carrier style called “Planned happened stance” 

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. 

Let’s follow up the trend of the mobile app development! 

Jetpack Compose 

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 

(Used to) Imperative UI findViewById(R.id.text_view) .setText(data.hello) 

Declarative UI Text(text = model.hello) = 

Recommended structure 

Jetpack Compose × MVVM 

MVVM 

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 

Step by step into Jetpack Compose × MVVM 

DL Android studio And see the sample code in: https://github.com/mochico/ComposeBasic 

Select Compose Template 

No content

Data class data class Counter( val count:Int ) 

Screen State data class MainScreenState( val counter: Counter = Counter(0) ) 

ViewModel open class MainViewModel: ViewModel() { val state = MutableStateFlow(MainScreenState()) fun countUp() { state.update { it.copy( counter = Counter(it.counter.count.inc()) ) } } } 

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") } } } 

Activity class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val viewModel: MainViewModel by viewModels() setContent { MainScreenContent(viewModel) } } } 

Project structure 

Run app 

MVVM in practice Activity Composable State Data operation can be added 

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 

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. 

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 

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