Develop Reference

Jetpack Compose Preview is not showing when having a ViewModel parameter

I am using Jetpack Compose and noticed that the preview is not shown. I read articles like this, but it seems my problem has a different root cause. Even I added defaults to all parameters in the compose function like this:
#OptIn(ExperimentalLifecycleComposeApi::class)
#Composable
#ExperimentalFoundationApi
#Preview
fun VolumeSettingsScreen(
speech: SpeechHelper = SpeechHelper(), // my class that converts text to speech
viewModel: VolumeSettingsViewModel = hiltViewModel(), // using Hilt to inject ViewModels
navController: NavHostController = rememberNavController() // Compose Navigation component
) {
MyAppheme {
Box(
...
)
}
}
When I rollbacked some changes I realized that the #Preview does not support the viewModels regardless of whether they are injected with Hilt or not.
Any Idea how this could be fixed?

Have you considered having a structure where you have a Screen and the actual Content separated like this?
// data class
data class AccountData(val accountInfo: Any?)
// composable "Screen", where you define contexts, viewModels, hoisted states, etc
#Composable
fun AccountScreen(viewModel: AccountViewModel = hiltViewModel()) {
val accountData = viewModel.accountDataState.collectAsState()
AccountContent(accountData = accountData) {
// click callback
}
}
//your actual composable that hosts your child composable widget/components
#Composable
fun AccountContent(
accountData: AccountData,
clickCallback: () ->
) {
...
}
where you can have a preview for the Content like this?
#Preview
#Composable
fun AccountContentPreview() {
// create some mock AccountData
val mockData = AccountData(…)
AccountContent(accountData = mockData) {
// I'm not expecting some actual ViewModel calls here, instead I'll just manipulate the mock data
}
}
this way, all components that aren't needed to be configured by the actual content composable are separated, taking you off from headaches configuring a preview.
Just an added note and could be off-topic, I just noticed you have a parameter like this,
speech: SpeechHelper = SpeechHelper()
you might consider utilizing compositionLocalProvider (if needed), that could clean up your parameters.

I managed to visualize the preview of the screen, by wrapping the ViewModels's functions into data classes, like this:
#OptIn(ExperimentalLifecycleComposeApi::class)
#Composable
#ExperimentalFoundationApi
#Preview
fun VolumeSettingsScreen(
modifier: Modifier = Modifier,
speechCallbacks: SpeechCallbacks = SpeechCallbacks(),
navigationCallbacks: NavigationCallbacks = NavigationCallbacks(),
viewModelCallbacks: VolumeSettingsScreenCallbacks = VolumeSettingsScreenCallbacks()
) {
MyAppheme {
Box(
...
)
}
}
I passed not the ViewModel directly in the compose but needed functions in a Data class for example, like this:
data class VolumeSettingsScreenCallbacks(
val uiState: Flow<BaseUiState?> = flowOf(null),
val onValueUpSelected: () -> Boolean = { false },
val onValueDownSelected: () -> Boolean = { false },
val doOnBoarding: (String) -> Unit = {},
val onScreenCloseRequest: (String) -> Unit = {}
)
I made a method that generates those callbacks in the ViewModel, like this:
#HiltViewModel
class VolumeSettingsViewModel #Inject constructor() : BaseViewModel() {
fun createViewModelCallbacks(): VolumeSettingsScreenCallbacks =
VolumeSettingsScreenCallbacks(
uiState = uiState,
onValueUpSelected = ::onValueUpSelected,
onValueDownSelected = ::onValueDownSelected,
doOnBoarding = ::doOnBoarding,
onScreenCloseRequest = ::onScreenCloseRequest
)
....
}
In the NavHost I hoisted the creation of the ViewModel like this:
#Composable
#ExperimentalFoundationApi
fun MyAppNavHost(
speech: SpeechHelper,
navController: NavHostController,
startDestination: String = HOME.route,
): Unit = NavHost(
navController = navController,
startDestination = startDestination,
) {
...
composable(route = Destination.VOLUME_SETTINGS.route) {
hiltViewModel<VolumeSettingsViewModel>().run {
VolumeSettingsScreen(
modifier = keyEventModifier,
speechCallbacks = speech.createCallback() // my function,
navigation callbacks = navController.createCallbacks(), //it is mine extension function
viewModelCallbacks = createViewModelCallbacks()
)
}
}
...
}
It is a bit complicated, but it works :D. I will be glad if there are some comets for improvements.

When I change ViewModel var, Composable Doesn't Update in Kotlin + Compose

When I change ViewModel variable, Composable Doesn't Update the View and I'm not sure what to do.
This is my MainActivity:
class MainActivity : ComponentActivity() {
companion object {
val TAG: String = MainActivity::class.java.simpleName
}
private val auth by lazy {
Firebase.auth
}
var isAuthorised: MutableState<Boolean> = mutableStateOf(FirebaseAuth.getInstance().currentUser != null)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val user = FirebaseAuth.getInstance().currentUser
setContent {
HeroTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
if (user != null) {
Menu(user)
} else {
AuthTools(auth, isAuthorised)
}
}
}
}
}
}
I have a a View Model:
class ProfileViewModel: ViewModel() {
val firestore = FirebaseFirestore.getInstance()
var profile: Profile? = null
val user = Firebase.auth.currentUser
init {
fetchProfile()
}
fun fetchProfile() {
GlobalScope.async {
getProfile()
}
}
suspend fun getProfile() {
user?.let {
val docRef = firestore.collection("Profiles")
.document(user.uid)
return suspendCoroutine { continuation ->
docRef.get()
.addOnSuccessListener { document ->
if (document != null) {
this.profile = getProfileFromDoc(document)
}
}
.addOnFailureListener { exception ->
continuation.resumeWithException(exception)
}
}
}
}
}
And a Composable View upon user autentication:
#Composable
fun Menu(user: FirebaseUser) {
val context = LocalContext.current
val ProfileVModel = ProfileViewModel()
Column(
modifier = Modifier
.background(color = Color.White)
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Text("Signed in!");
ProfileVModel.profile?.let {
Text(it.username);
}
Row(
horizontalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxWidth()
) {
TextButton(onClick = {
FirebaseAuth.getInstance().signOut()
context.startActivity(Intent(context, MainActivity::class.java))
}) {
Text(
color = Color.Black,
text = "Sign out?",
modifier = Modifier.padding(all = 8.dp)
)
}
}
}
}
When my Firestore method returns, I update the profile var, and "expect" it to be updated in the composable, here:
ProfileVModel.profile?.let {
Text(it.username);
}
However, nothing is changing?
When I was adding firebase functions from inside composable, I could just do:
context.startActivity(Intent(context, MainActivity::class.java))
And it would update the view. However, I'm not quite sure how to do this from inside a ViewModel, since "context" is a Composable-specific feature?
I've tried to look up Live Data, but every tutorial is either too confusing or differs from my code. I'm coming from SwiftUI MVVM so when I update something in a ViewModel, any view that's using the value updates. It doesn't seem to be the case here, any help is appreciated.
Thank you.

Part 1: Obtaining a ViewModel correctly
On the marked line below you are setting your view model to a new ProfileViewModel instance on every recomposition of your Menu composable, which means your view model (and any state tracked by it) will reset on every recomposition. That prevents your view model to act as a view state holder.
#Composable
fun Menu(user: FirebaseUser) {
val context = LocalContext.current
val ProfileVModel = ProfileViewModel() // <-- view model resets on every recomposition
// ...
}
You can fix this by always obtaining your ViewModels from the ViewModelStore. In that way the ViewModel will have the correct owner (correct lifecycle owner) and thus the correct lifecycle.
Compose has a helper for obtaining ViewModels with the viewModel() call.
This is how you would use the call in your code
#Composable
fun Menu(user: FirebaseUser) {
val context = LocalContext.current
val ProfileVModel: ProfileViewModel = viewModel()
// or this way, if you prefer
// val ProfileVModel = viewModel<ProfileViewModel>()
// ...
}
See also ViewModels in Compose that outlines the fundamentals related to ViewModels in Compose.
Note: if you are using a DI (dependency injection) library (such as Hilt, Koin...) then you would use the helpers provided by the DI library to obtain ViewModels.
Part 2: Avoid GlobalScope (unless you know exactly why you need it) and watch out for exceptions
As described in Avoid Global Scope you should avoid using GlobalScope whenever possible. Android ViewModels come with their own coroutine scope accessible through viewModelScope. You should also watch out for exceptions.
Example for your code
class ProfileViewModel: ViewModel() {
// ...
fun fetchProfile() {
// Use .launch instead of .async if you are not using
// the returned Deferred result anyway
viewModelScope.launch {
// handle exceptions
try {
getProfile()
} catch (error: Throwable) {
// TODO: Log the failed attempt and/or notify the user
}
}
}
// make it private, in most cases you want to expose
// non-suspending functions from VMs that then call other
// suspend factions inside the viewModelScope like fetchProfile does
private suspend fun getProfile() {
// ...
}
// ...
}
More coroutine best practices are covered in Best practices for coroutines in Android.
Part 3: Managing state in Compose
Compose tracks state through State<T>. If you want to manage state you can create MutableState<T> instances with mutableStateOf<T>(value: T), where the value parameter is the value you want to initialize the state with.
You could keep the state in your view model like this
// This VM now depends on androidx.compose.runtime.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
class ProfileViewModel: ViewModel() {
var profile: Profile? by mutableStateOf(null)
private set
// ...
}
then every time you would change the profile variable, composables that use it in some way (i.e. read it) would recompose.
However, if you don't want your view model ProfileViewModel to depend on the Compose runtime then there are other options to track state changes while not depending on the Compose runtime. From the documentation section Compose and other libraries
Compose comes with extensions for Android's most popular stream-based
solutions. Each of these extensions is provided by a different
artifact:
Flow.collectAsState() doesn't require extra dependencies. (because it is part of kotlinx-coroutines-core)
LiveData.observeAsState() included in the androidx.compose.runtime:runtime-livedata:$composeVersion artifact.
Observable.subscribeAsState() included in the androidx.compose.runtime:runtime-rxjava2:$composeVersion or
> androidx.compose.runtime:runtime-rxjava3:$composeVersion artifact.
These artifacts register as a listener and represent the values as a
State. Whenever a new value is emitted, Compose recomposes those parts
of the UI where that state.value is used.
This means that you could also use a MutableStateFlow<T> to track changes inside the ViewModel and expose it outside your view model as a StateFlow<T>.
// This VM does not depend on androidx.compose.runtime.* anymore
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow
class ProfileViewModel : ViewModel() {
private val _profileFlow = MutableStateFlow<Profile?>(null)
val profileFlow = _profileFlow.asStateFlow()
private suspend fun getProfile() {
_profileFlow.value = getProfileFromDoc(document)
}
}
And then use StateFlow<T>.collectAsState() inside your composable to get the State<T> that is needed by Compose.
A general Flow<T> can also be collected as State<T> with Flow<T : R>.collectAsState(initial: R), where the initial value has to be provided.
#Composable
fun Menu(user: FirebaseUser) {
val context = LocalContext.current
val ProfileVModel: ProfileViewModel = viewModel()
val profile by ProfileVModel.profileFlow.collectAsState()
Column(
// ...
) {
// ...
profile?.let {
Text(it.username);
}
// ...
}
}
To learn more about working with state in Compose see the documentation section on Managing State. This is fundamental information to be able to work with state in Compose and trigger recompositions efficiently. It also covers the fundamentals of state hoisting. If you prefer a coding tutorial here is the code lab for State in Jetpack Compose.
An introduction to handling the state as the complexity increases is in the video from Google about Using Jetpack Compose's automatic state observation.

Profile in view model should be State<*>
private val _viewState: MutableState<Profile?> = mutableStateOf(null)
val viewState: State<Profile?> = _viewState
In composable
ProfileVModel.profile.value?.let {
Text(it.username);
}

I recommend using MutableStateFlow.
a simple sample is described in this Medium article :
https://farhan-tanvir.medium.com/stateflow-with-jetpack-compose-7d9c9711c286

View Model with Jetpack compose view

I am using ViewModelFactory to obtain view model instance which is to be used by my jetpack compose view.
class AchievementsScreenViewModelFactory() :
ViewModelProvider.NewInstanceFactory() {
override fun <T : ViewModel?> create(modelClass: Class<T>): T = AchievementsScreenViewModel() as T
}
As soon as instantiate my viewmodel, i want to perform some operations. I am currently storing those operations in the viewmodel constructor(Like some firebase operation to check if the user instance is found or not).Is that a wrong practice? if so, what should i do?
constructor(context:Context) : this() {
this.context=context
mAuth= FirebaseAuth.getInstance()
if(mAuth.currentUser!=null){
triggerNavigateEvent(Screen.DashboardScreen)
}
}
So, the issue that I am facing is that, whenever I use my View Model Factory to instantiate an instance of my view and then when i pop the view from the NavController and return to it, the View Model Factory returns me the same instance of the View Model and the tasks that are present in my constructor are not being performed.
Is there a way to kill the instance of my View Model at the time of popping the screen from the NavController? or is there an other way?
I am calling the viewmodel from the composable screen like this
#SuppressLint("CoroutineCreationDuringComposition")
#Composable
fun LoginScreen(navController: NavHostController
){
var viewModel:LoginScreenViewModel= viewModel(
factory = LoginScreenViewModelFactory(LocalContext.current)
)
.
.
.
}
I am navigating to the screens using google accompanist navigation library.
AnimatedNavHost(
navController = navController,
startDestination = Screen.SplashScreen.route,
enterTransition = { fadeIn(animationSpec = tween(1000), initialAlpha = 0f) },
exitTransition ={ fadeOut(animationSpec = tween(1000), targetAlpha = 0f) }
){
composable(
route = Screen.LoginScreen.route
){
LoginScreen(navController = navController)
}
}

The navigation-compose NavHost (in your case AnimatedNavHost) will call its composablefunction for the target destination every time the destination changes, i.e. when you navigate to a destination and also when you navigate back. That means that you can put the code that you want to run into a method/function in your ViewModel (instead of its constructor) and use a LaunchedEffect composable to call it. If you use a constant key when invoking the LaunchedEffect composable, for example LaunchedEffect(Unit), it will only run once when it enters the composition, in your case once each time the destination changes.
Move the code from VM constructor to a new function in your VM
suspend fun callSomeApi() {
// your code here
}
And add a LaunchedEffect(Unit) to the composable you want to call this new function from
#Composable
fun LoginScreen(navController: NavHostController){
var viewModel: LoginScreenViewModel = viewModel(
factory = LoginScreenViewModelFactory(LocalContext.current)
)
// called once every time this composable enters the composition
LaunchedEffect(Unit) {
viewModel.callSomeApi()
}
}

Here is an example I use
val viewModel = hiltViewModel<PokemonListVm>()
Usage:
#Composable
fun PokemonListScreen(
navController: NavController
) {
val viewModel = hiltViewModel<PokemonListVm>()
val lazyPokemonItems: LazyPagingItems<PokedexListEntry> = viewModel.pokemonList.collectAsLazyPagingItems()
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.fillMaxSize()
) {
Column {
Spacer(modifier = Modifier.height(20.dp))
PokemonBanner()
PokemonSearch()
PokemonLazyList(
pokemonList = lazyPokemonItems,
onItemClick = { entry ->
navController.navigate(
"pokemon_detail_screen/${entry.dominentColor.toArgb()}/${entry.pokemonName}"
)
}
)
}
}
}

Android Jetpack Compose (Composable) Get String resources from Coroutine

I have a Flow that wraps a sealed class, which is used for calling messages to the UI. For example to show a Snackbar. I can observe the Flow from a Composable using LaunchedEffect. But the problem is that I want to retrieve the string resources from the coroutine scope. And I don't want to use direct string value in my view model, since I want to use the Locale for different languages so I pass the String Res Id instead. So is there a good way of doing it without putting the string resources in the Application class and retrieving them from there as sujested here getString Outside of a Context or Activity
The code below:
I have Scaffold for showing snackbar, when the user clicks the scaffold which fills the whole screen the showSnackbarWithScope method is called, which emits new value to the Flow.
Then the change is catch through the LaunchedEffect
Then it calls the showSnackbar() method with the message, but the function expects String and I have String Res Id (Int) value
The problem I cannot use stringResource() method which retrieves the string from Composable scope, since I am in a coroutine
#Composable
fun HomeScreen(viewModel: CityWeatherViewModel) {
val scaffoldState = rememberScaffoldState()
LaunchedEffect(true) {
viewModel.eventFlow.collectLatest { event ->
when (event) {
is CityWeatherViewModel.UIEvent.ShowSnackbar -> {
// THE PROBLEM IS HERE!!!, since event.messageResId is res id, and not the string resource, and I can not use stringResource from coroutine
scaffoldState.snackbarHostState.showSnackbar(
message = event.messageResId
)
}
}
}
}
Scaffold(
scaffoldState = scaffoldState,
modifier = Modifier
.fillMaxSize()
.clickable {
viewModel.showSnackbarWithScope(R.string.could_not_determine_location)
}
) {
}
}
#HiltViewModel
class CityWeatherViewModel #Inject constructor(
private val getCityWeather: GetCityWeather
) : ViewModel() {
// to show snackbar with error
private val _eventFlow = MutableSharedFlow<UIEvent>()
val eventFlow = _eventFlow.asSharedFlow()
suspend fun showSnackbar(stringResId: Int) {
_eventFlow.emit(
UIEvent.ShowSnackbar(stringResId)
)
}
fun showSnackbarWithScope(stringResId: Int) {
viewModelScope.launch {
showSnackbar(stringResId)
}
_eventFlowSwitch.value = !_eventFlowSwitch.value
}
sealed class UIEvent {
data class ShowSnackbar(val messageResId: Int) : UIEvent()
}
companion object {
// time in ms, before we request new data
const val DELAY_BEFORE_REQUEST = 1500L
}
}

You can get Context in any composable using LocalContext and then use it inside LaunchedEffect to get your resources:
val context = LocalContext.current
LaunchedEffect(Unit) {
context.resources.getString(event.messageResId)
}

Pass an argument to a nested navigation graph in Jetpack Compose

From the docs, I see you can nest navigation graphs like so:
NavHost(navController, startDestination = "home") {
...
// Navigating to the graph via its route ('login') automatically
// navigates to the graph's start destination - 'username'
// therefore encapsulating the graph's internal routing logic
navigation(startDestination = "username", route = "login") {
composable("username") { ... }
composable("password") { ... }
composable("registration") { ... }
}
...
}
I am wondering, how would one pass an argument in the route, and make that available to all composables inside the nav graph?
Here's my current nav graph:
navigation(
// I'd like to grab this parameter
route = "dashboard?classId={classId}",
startDestination = Route.ScreenOne.route) {
composable(Route.ScreenOne.route) {
// And then pass the parameter here, or to any composable below
ScreenOne(classId)
}
composable(Route.ScreenTwo.route) {
ScreenTwo()
}
composable(Route.ScreenThree.route) {
ScreenThree()
}
}
I am basically trying to avoid setting the classId navigation argument individually on each composable route. I didn't see a way to pass a list of arguments to navigation() like you can in a composable().
It might be that what I am describing isn't possible, but looking forward to anyone's thoughts!

You can access the graph arguments from child composables:
navController.getBackStackEntry("dashboard?classId={classId}").arguments?.getString("classId")

From a quick test within a Hilt-based project, it looks like passing a property in as an argument to a navigation graph component results in the property being available in the savedStateHandle for any ViewModels that are made whilst that graph is in memory.
For example:
// 1. Define your routes.
sealed class Destination(val route: String) {
object TestGraph : Destination("TEST_GRAPH/{${Arguments.testParameter}}") {
object Arguments {
const val testParameter = "testParameter"
}
fun route(testParameter: String): String {
return "TEST_GRAPH/$testParameter"
}
object FirstScreen : Destination("FIRST_SCREEN")
}
}
// 2. Create a graph extension on NavGraphBuilder for the navigation graph.
private fun NavGraphBuilder.testGraph(navController: NavHostController) {
navigation(
startDestination = Destination.TestGraph.FirstScreen.route,
route = Destination.TestGraph.route,
arguments = listOf(
navArgument(Destination.TestGraph.Arguments.testParameter) { type = NavType.StringType }
)
) {
composable(route = Destination.TestGraph.FirstScreen.route) {
FirstScreen()
}
}
}
// 3. Use the line below to navigate to this new graph.
navController.navigateTo(Destination.TestGraph.route("xyz"))
// 4. Access the savedStateHandle via the VM to get the parameter.
#Composable
fun FirstScreen(
viewModel: FirstScreenViewModel = hiltViewModel(),
) {
//...
}
#HiltViewModel
class FirstScreenViewModel #Inject constructor(
savedStateHandle: SavedStateHandle,
): ViewModel() {
private val testParameter: String = checkNotNull(savedStateHandle[Destination.TestGraph.Arguments.testParameter])
//...
}
I assume this works as the argument is created and maintained at the navigation graph-level. So, providing the graph is in memory, the property is accessible via savedStateHandle. If you were to pop this graph off of the navigation stack, I would expect the value to not be accessible anymore. Hope that helps!