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

Invitation for modern Android UI development - Basic of Jetpack Compose

April 28, 2022

Invitation for modern Android UI development - Basic of Jetpack Compose

2022 April 28
WTM International Women's Day

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.


April 28, 2022

More Decks by mochico

Other Decks in Technology


  1. Invitation for modern Android UI development - Basic of Jetpack

    Compose - @mochico 2022 April 28 WTM International Women's Day #ProgressNotPerfection
  2. 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
  3. Try anything fun! I haven’t expected to be an engineer.

    But I really enjoying my career. The carrier style called “Planned happened stance”
  4. 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.
  5. 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
  6. 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
  7. ViewModel open class MainViewModel: ViewModel() { val state = MutableStateFlow(MainScreenState())

    fun countUp() { state.update { it.copy( counter = Counter(it.counter.count.inc()) ) } } }
  8. 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") } } }
  9. Activity class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?)

    { super.onCreate(savedInstanceState) val viewModel: MainViewModel by viewModels() setContent { MainScreenContent(viewModel) } } }
  10. 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
  11. 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.
  12. 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
  13. 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