Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Invitation for modern Android UI development - Basic of Jetpack Compose

6eecc52120fba9d87d982684211182ec?s=47 mochico
April 28, 2022

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.

6eecc52120fba9d87d982684211182ec?s=128

mochico

April 28, 2022
Tweet

More Decks by mochico

Other Decks in Technology

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

  18. None
  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