Android Jetpack Compose MVVM

UpdatedOctober 26, 2021

•3 min read•View as Markdown

Paul Allies

Part of seriesAndroid

Comments

Join the discussion

No comments yet. Be the first to comment.

Android

Part 7 of 8

Up next

Jetpack Compose Flat and Hierarchical Navigation

Navigation in your app has to be appropriate: Don’t use non-logical navigation. Navigation must always be intuitive: Users don’t have time to look for the right section in your app Don’t steal time from your users: They will delete the app Navigat...

More from this blog

Login / Logout Flow: SwiftUI and EnvironmentObject

EnvironmentObject is useful when you want to create a dependency in a higher component of the layout tree and use it on a lower component without having to pass it down the tree through every child component. We will now use EnvironmentObject to moni...

Nov 8, 20213 min read3.4K

Login / Logout Flow: SwiftUI and EnvironmentObject

Login / Logout Flow: Android Jetpack Compose and CompositionLocal

CompositionLocal is useful when you want to create a dependency in a higher node of the layout tree and use it on a lower node without having to pass it down the tree through every child Composable. Here we will use it to direct our application when ...

Nov 5, 20213 min read2.0K

Login / Logout Flow: Android Jetpack Compose and CompositionLocal

Getting Started with TDD: SwiftUI

The TDD (Test Driven Development) approach is important when it comes to testing small portions of business logic code in isolation. In this blog, I'll cover how I would use TDD to build a clean architecture To-do SwiftUI application I'll cover imp...

Oct 27, 20215 min read872

Getting Started with TDD: Kotlin and Jetpack Compose

Oct 27, 20214 min read484

Room(SQLite) and Kotlin

The Room persistence library provides an abstraction layer over SQLite. To use Room in your app, add the following dependencies to your app’s build.gradle file: dependencies { .... kapt "org.xerial:sqlite-jdbc:3.34.0" // Room def roo...

Oct 25, 20214 min read164

Nanosoft Code Foundation

18 posts

Sample ViewModel

This should contain everything one would need to interact with the view. Right now it contains 2 members: users, and an addUser function. Note we’re using mutableStateListOf to maintain state of a collection of users in the view model.

import androidx.compose.runtime.* import androidx.lifecycle.ViewModel class UserViewModel : ViewModel() { private val _users = mutableStateListOf<User>() val users: List<User> get() = _users fun addUser(user: User) { _users.add(user) } }

Sample View

And now the View. These are DataTemplates that define how data should be displayed. ViewModels survive configuration changes, so they allow you to encapsulate state and events related to the UI without having to deal with the activity or fragment lifecycle that hosts your Compose code.

@Composable fun UserView() { val vm by remember { mutableStateOf(UserViewModel()) } Scaffold( topBar = { TopAppBar( title = { Text("Users") }, actions = { IconButton(onClick = { vm.addUser(User(UUID.randomUUID(), "User")) }) { Icon(Icons.Filled.Add, null) } }) }, content = { Column(modifier = Modifier.padding(16.dp)) { LazyColumn(modifier = Modifier.fillMaxHeight()) { items(vm.users) { Column { Text(it.name) Text("${it.id}") } } } } } ) }

We can hoist the ViewModel further up the Compose UI tree to maintain a more global state as follows:

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val vm = UserViewModel() setContent { MaterialTheme { UserView(vm) } } } } @Composable fun UserView(vm: UserViewModel) { Scaffold( topBar = { TopAppBar( title = { Text("Users") }, actions = { IconButton(onClick = { vm.addUser(User(UUID.randomUUID(), "User")) }) { Icon(Icons.Filled.Add, null) } }) }, content = { Column(modifier = Modifier.padding(16.dp)) { LazyColumn(modifier = Modifier.fillMaxHeight()) { items(vm.users) { Column { Text(it.name) Text("${it.id}") } } } } } ) }

Command Palette