https://kotlinlang.org logo
#compose
Title
# compose
d

David Mcrae Jr

07/28/2020, 1:58 PM
Copy code
class UserViewModel : ViewModel() {
    private val _username = MutableLiveData<String>()
    val username: LiveData<String>
        get() = _username

    private val _password = MutableLiveData<String>()
    val password: LiveData<String>
        get() = _password

    init {
        setUsername("")
        setPassword("")
    }

    fun setUsername(username: String) {
        _username.value = username
    }

    fun setPassword(password: String) {
        _password.value = password
    }

}

@Composable
fun LoginView(userViewModel: UserViewModel) {
    val context = ContextAmbient.current

    Column(
        modifier = Modifier.fillMaxWidth().padding(top = Dp(50.0F)),
        horizontalGravity = Alignment.CenterHorizontally
    ) {
        FilledTextField(
            value = userViewModel.username.toString(),
            onValueChange = { it: String ->
                userViewModel.setUsername(it)
            },
            label = { Text(stringResource(id = R.string.username_label)) },
            backgroundColor = Color.Transparent,
            placeholder = { Text(stringResource(id = R.string.username_placeholder)) },
            keyboardType = KeyboardType.Email,
            activeColor = colorResource(id = R.color.mastery_main)
        )

        FilledTextField(
            value = userViewModel.password.toString(),
            onValueChange = { it: String ->
                userViewModel.setPassword(it)
            },
            label = { Text(stringResource(id = R.string.password_label)) },
            backgroundColor = Color.Transparent,
            visualTransformation = PasswordVisualTransformation(),
            keyboardType = KeyboardType.Password,
            activeColor = colorResource(id = R.color.mastery_main)
        )
    }
}
I have something like this for my login view and believe I’m using the LiveData correctly but I am seeing the object reference in the field and not the string value of username or password, thoughts?
j

John O'Reilly

07/28/2020, 2:13 PM
I'm not sure if this is specifically cause of issue you're seeing but in general I believe approach, when using LiveData with Compose like this, is to convert to
State
(using for example
observeAsState
extension function) so that appropriate recomposition is triggered when that state changes. So, in your case you might have
Copy code
val usernameState = userViewModel.username.observeAsState("")
and then say
Copy code
FilledTextField(
            value = usernameState.value,
            onValueChange = { it: String ->
                userViewModel.setUsername(it)
            },
and with following added to gradle
Copy code
implementation "androidx.ui:ui-livedata:$compose_version"
d

David Mcrae Jr

07/28/2020, 2:32 PM
Thanks @John O'Reilly, I’ll give that a shot and update here.
@John O'Reilly switching to use
observeAsState("")
on the LiveData fixed the issue, thanks
👍 1
7 Views