Develop Reference

2 way data binding error for a livedata variable with proper xml binding

I have a loginViewModel for my login Activity, in activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="loginViewModel"
type="com.example.test.ui.login.LoginViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/login_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="#+id/mobile_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:editable="true"
android:ems="10"
android:hint="#string/mobile_number_string"
android:inputType="phone"
android:textAlignment="center"
android:text="#={loginViewModel.phoneNumber}"
app:layout_constraintBottom_toTopOf="#+id/otp_input"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
And in my loginViewModel i have defined my livedata as
class LoginViewModel : ViewModel(){
private val _phoneNumber = MutableLiveData<String>()
val phoneNumber : LiveData<String>
get() = _phoneNumber
}
Now, while building I am getting the following error
The expression \u0027loginViewModelPhoneNumber.getValue()\u0027 cannot be inverted, so it cannot be used in a two-way binding\n\nDetails: There is no inverse for method getValue, you must add an #InverseMethod annotation to the method to indicate which method should be used when using it in two-way binding expressions
All articles that I am reading suggesting this way to implement.
Can someone tell me what am I doing wrong here?

Unfortunately for two-way data binding you need to use MutableLiveData.
You should remove private on _phoneNumber.
Then change xml to use it android:text="#={loginViewModel._phoneNumber}".

change from
private val _phoneNumber = MutableLiveData<String>()
to
public val _phoneNumber = MutableLiveData<String>()

You are binding phoneNumber which is a LiveData that does not have any interface for writing value.
Consider removing phoneNumber, and using Kotlin-based approach, with just a public property

There are several issues with the code.
you try to use val phoneNumber that is not mutable in two way binding, thus is has only getter so binding class can only read value from field, to receive data from the UI - binding class wants to use setter, but there is no setter present, thus the phoneNumber won't change.
for the property that binds phoneNumber you try to use LiveData which is not mutable - you should use MutableLiveData in case you need it to be able to change.
if you want to listen to the changes of phoneNumber you need to add LiveData Observer like
phoneNumber.observe{
val value = it
}
Hope it helps.

How to reference ArrayList<Custom Class> type variables and objects in it with an index in Kotlin, with MVVM pattern and Data Binding applied?

I'm building an app, with MVVM pattern applied.
I've added all the required dependencies.
Also, I know how to pass variables to my xml layout files,
and how to use a function using them as parameters.
But I just don't know how to handle ArrayList type of variables.
This is the data class declaration part from my activity_main.xml
<variable
name="vm"
type="com.example.mvvm.MainActivityViewModel" />
<variable
name="codeBlock"
type="java.util.ArrayList"/>
<variable
name="block"
type="com.example.mvvm.CodeBlock" />
And binded the data like this in MainActivity
val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
//binds data
binding.vm = mMainActivityViewModel
binding.lifecycleOwner = this
binding.codeBlock = mMainActivityViewModel.getBlockButton()
so I did pass the ArrayList of custom classes, each of them is called CodeBlock. And here's what I've tried :
<TextView
android:id="#+id/bt_move"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/move"
android:textAllCaps="false"
android:textColor="#color/Black"
android:onClick="#{vm.addNewBlock(codeBlock[0])}"/>
or not [0], but .get(0)
and I think, or I'm sure it is because that the type of codeBlock[0] varaiable is ambiguous. In MainActivity, this thing gives me an error sign.
var ff : CodeBlock = binding.codeBlock[0]
Type Mismatch , Required : CodeBlock Found : Any!
Why??? I gave it ArrayList and it received that?
Also, this gives me an error too.
var ff : ArrayList<CodeBlock> = binding.codeBlock
Smart cast to 'kotlin.collections.ArrayList<CodeBlock> /*= java.util.ArrayList<CodeBlock> */' is impossible, because 'binding.codeBlock' is a mutable property that could have been changed by this time
Well should I use kotlin.collections.ArrayList<CodeBlock>?
but in variable type in activity_main.xml,
it does not support that kind of type.
It seems it only support types from java.
I can't find kotlin.collections.ArrayList.
So how can I pass ArrayList type of variables to view?
And this ArrayList property? this is not gonna change. It is a list of blocks that the user can choose in a stage. So it shouldn't be Mutable.
When I try to run the code,
the error says
cannot find method addNewBlock(java.lang.Object) in class com.example.mvvm.MainActivityViewModel

problems using databinding: val vs var and the use invalidateAll()

This is actually 2 questions.
I noticed that databinding doesn't work if in the Person data class I set the name parameter to be val instead of var. The code will break with the following error:
error: cannot find symbol
import com.example.android.aboutme.databinding.ActivityMainBindingImpl;
^
symbol: class ActivityMainBindingImpl
location: package com.example.android.aboutme.databinding
Why does it happen?
Why do I need to call invalidateAll() in doneClick()? The documentation says that it "Invalidates all binding expressions and requests a new rebind to refresh UI". Isn't the purpose of databinding to connect data and views in such a way that an update to the data immediately updates the views?
MainActivity:
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
val person = Person("Bob")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
binding.person = person
binding.apply {
btnDone.setOnClickListener { doneClick(it) }
}
}
private fun doneClick(view: View) {
binding.apply {
person?.nickname = etNickname.text.toString()
invalidateAll()
etNickname.visibility = View.GONE
tvNickname.visibility = View.VISIBLE
btnDone.visibility = View.GONE
}
hideKeybord(view)
}
private fun hideKeybord(view: View) {
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.hideSoftInputFromWindow(view.windowToken, 0)
}
}
Person:
class Person(var name: String, var nickname: String? = null)
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
<variable
name="person"
type="com.example.android.aboutme.Person" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingStart="#dimen/padding"
android:paddingEnd="#dimen/padding">
<TextView
android:id="#+id/tv_name"
style="#style/NameStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#={person.name}"
android:textAlignment="center" />
<EditText
android:id="#+id/et_nickname"
style="#style/NameStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/what_is_your_nickname"
android:inputType="textPersonName"
android:textAlignment="center" />
<Button
android:id="#+id/btn_done"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/layout_margin"
android:fontFamily="#font/roboto"
android:text="#string/done" />
<TextView
android:id="#+id/tv_nickname"
style="#style/NameStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#={person.nickname}"
android:textAlignment="center"
android:visibility="gone" />
<ImageView
android:id="#+id/star_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/layout_margin"
android:contentDescription="#string/yellow_star"
app:srcCompat="#android:drawable/btn_star_big_on" />
<ScrollView
android:id="#+id/bio_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/layout_margin">
<TextView
android:id="#+id/bio_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingMultiplier="#dimen/line_spacing_multiplier"
android:text="#string/bio"
android:textAppearance="#style/NameStyle" />
</ScrollView>
</LinearLayout>
</layout>

Qustion 1:
I noticed that databinding doesn't work if in the Person data class I set the name parameter to be val instead of var.
Why does it happen?
Because you're using two-way databinding.
In your layout you have this:
<TextView
android:id="#+id/tv_name"
style="#style/NameStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#={person.name}"
android:textAlignment="center" />
The #= in android:text="#={person.name}", specifically, tells databinding "I want to set the TextView's text to the person's name value and I want to update the person's name when the TextView text changes".
When you use the #= databinding will look for a setter for the attribute you're assingning. In this case, it's looking for a setter for the name attribute on the Person class. In Kotlin, this means having a property named name that is a var.
If you do not intend to update the person's name attribute when the TextView changes (which I assume you don't, you'd generally do that with an EditText), then change that line to just # (android:text="#{person.name}"). Then you can make name a val because you're only reading from it for databinding.
Question 2:
Why do I need to call invalidateAll() in doneClick()?
You actually don't ...
The documentation says that it "Invalidates all binding expressions and requests a new rebind to refresh UI". Isn't the purpose of databinding to connect data and views in such a way that an update to the data immediately updates the views?
Yes, but: databinding is not magic. If the UI is to update it must be told to do so and changing your data does not magically tell databinding that it has to update. Something has to tell databinding that a) it's time to update and b) what it needs to update.
So what you have right now with invalidateAll() is the shotgun approach. You updated the one nickname field and then you yelled at databinding "hey, update everything!", so it rebinds all views based on the current state of Person which of course includes "nickname" so that view gets updated.
What you want to do is update only the fields that are bound to nickname because that is the one thing that changed and, preferably, you want to do it automatically when nickname changes. For that, you need to observe the state of the nickname field and react to it changing.
You can do this in a few ways:
Use LiveData
In this approach you have the fields of the model you want to bind be LiveData objects (val nickname = MutableLiveData<String>()) and you add a LifeCycleOwner to the binding so it can observe the LiveData objects.
Databinding is set up to use LiveData so your xml does not need to change. But now the properties are observable and when you update the name on Person (person?.nickname?.value = "New Nickname") databinding will be notified automatically and will update the state of the associated view.
You will not have to call invalidateAll().
Use Observable Fields
This is conceptually the same as #1 but this came before LiveData was introduced. Nowadays you can consider this deprecated and use the LiveData approach, but I'll mention it for completeness.
Again, instead of having a regular property of type String you wrap that property in an observable data structure (val nickname = ObservableString()) that will notify databinding when the value has changed. Again, databinding is set up to work with this so you don't have to change your XML.
Use Observable Objects
With this option, you make your Person class (or preferably a ViewModel) extend Observable and manage notifying databinding yourself as the fields change. You would go this route if you have special logic that has to happen when updating some fields and a simple "set and notify" is not enough. This option is far more complicated and I'll leave it as an exercise to the reader to read the docs to see how this option works. For the vast majority of cases you should be able to do what you need with option #1.
Parting thought on this line:
person?.nickname = etNickname.text.toString()
If you set up databinding correctly, this should not be necessary. :)
If you set up etNickname to use two-way binding and make person.nickname properly observable, the person.nickname attribute will automatically update to the text value in etNickname when it changes!
That is the beauty of databinding.
Hope that helps!

Val = Inmutable
Var = mutable
Full answer
Val and Var in Kotlin
It's because the properties have no built-in mechanisms to notify the UI that they've changed. So you have to invoke it manually. A solution for this problem is using LiveData or MutableLiveData.

How to fix cannot find symbol view-model-name-BindingImpl when using two-way databinding in Android

I am implementing Two-Way DataBinding with Android Architecture Components using LiveData and ViewModel, but when I build the project it gives
error: cannot find symbol
import package.[layout_name]BindingImpl;
in DataBinderMapperImpl.java
I followed official documentation and looked at SO for answers but none of them had workable solutions.
already tried this one and this one
layout.xml
<data>
<import type="package.ViewModel" /> // this line was added from an answer but didn't work
<variable
name="model"
type="package.ViewModel"/>
</data>
// an input field I want to bind data with
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#={model.email}" // if I remove this line, builds fine
android:hint="#string/prompt_email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:singleLine="true" />
Extending my ViewModel from AndroidViewModel instead of BaseObservable as mentioned in documentation
ViewModel.kt
private val email: MutableLiveData<String> by lazy { MutableLiveData<String>() }
#Bindable // tried to change the return type to String, still no luck
fun getEmail(): LiveData<String> {
return email
}
fun setEmail(email: String) {
this.email.value = email
}
This is how I bind ViewModel with View
Activity.kt
binding.model = ViewModelProviders.of(this, ViewModelProvider.AndroidViewModelFactory
.getInstance(application))
.get(LoginViewModel::class.java)
What am I missing? Already included all things pre-databinding and if I had replaced ViewModel in layout with a data class and tried to get data from it, that works fine but with #{} in layout
EDIT
Okay, so when I expose email as public, it compiles and binding works, but I can't make its setter and getter public, I mean when I try to expose it from its getter and setter, IDE says that these are already private functions and cannot be overriden?
How can I make this property expose through functions?

I was having the same problem and none of the solutions presented here worked.
In my case, the problem was because I had a Double property.
I changed it to String and it worked.

You can use getter of particular variable directly using get() method to variable (also works for setter too as set(value)) like below :
#get:Bindable // We make getter method bindable for data-binding
val email = MutableLiveData<String>()
get() { // Try to provide getter method like this
return field as LiveData<String>
}
set(data) { // Try to provide setter method like this
if(field.value != data.value) // To avoid infinite loop
field.value = data.value
}

Found the answer on Reddit.
For two-way databinding to work, you have to expose your fields and they should be MutableLiveData like
val email = MutableLiveData<String>()
since kotlin already has get and set properties, they'll be used by Binding classes for fields

Cannot find the getter for attribute ImageView while using Databinding in kotlin

I am trying to learn data binding with Kotlin and I was able to implement it successfully for edit text and text views. After that I am trying to use it for Image Views. I am currently trying to give an option to users to choose their profile picture by clicking on the imageview. This code works properly but when I try to set the image to the view using data binding adapter , I get the following error.
Found data binding errors.
****/ data binding error ****msg:Cannot find the getter for attribute 'android:userImage' with value type java.lang.String on de.hdodenhof.circleimageview.CircleImageView. file:/home/parangat-pt-p10/AndroidStudioProjects/ReUsableAndroid/reusable_android/app/src/main/res/layout/activity_signup.xml loc:25:12 - 31:48 ****\ data binding error ****
Below is my code for the same.
Layout code of ImageView
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:userImage="#{signup.userImage}"
android:id="#+id/iv_user"
android:src="#drawable/profile"/>
Model class code
class Signup {
var userImage=""
var firstName=""
var lastName=""
var phoneNumber=""
var postCode=""
var country=""
var email=""
var password=""
var confirmPassword=""
var isAcceptTerms=false
#BindingAdapter("android:userImage")
fun loadImage(view: CircleImageView, imageUrl: String) {
userImage=imageUrl
Glide.with(view.context).load(imageUrl).into(view)
}
}
And this is what I am doing after user selected image
override fun onSingleImageSelected(uri: Uri?) {
signupBinding.signup?.loadImage(iv_user,uri.toString())
}
Since this is written in kotlin, therefore there is no need to define the getter and setter methods but the error states that no getter method found.
As suggested by Enzokie, I created the binding Adapter in separate file like below
#BindingAdapter("userImage")
fun loadImage(view: CircleImageView, imageUrl: String) {
Glide.with(view.context).load(imageUrl).into(view)
}
But I still have the same issue.

Correct Approach
Use either Observable / Live Data.
Make a binding adapter class individually and don't mess-up things in model.
Yes tutorials do that, because they are just teaching you.
Just make one common binding adapter (like android:src) for whole app.
No need to use custom namespace, until when you need it. So you can use android:src instead of android:userImage.
No need to use CircleImageView in BindingAdapter, make common adapter with ImageView because CircleImageView is child of ImageView.
Final code
If you need to manually change fields like signup.userImage = "someUrl" then use Bindable and notify, other wise no need of both.
If you use ObservableField instead of extending BaseObservable class, then you don't need to use Bindable and notify.
Signup.class
class Signup : BaseObservable() {
#get:Bindable
var userImage: String = ""
set(value) {
field = value
notifyPropertyChanged(BR.userImage)
}
}
DataBindingAdapter.kt
// binding adapter for setting url/uri on ImageView
#BindingAdapter("android:src")
fun setImageUrl(view: ImageView, url: String) {
Glide.with(view.context).load(url).into(view)
}
layout.xml
<de.hdodenhof.circleimageview.CircleImageView
...
android:src="#{signup.userImage}"/>
Now you can set binding.signup.userImage = "Url", it will refract on UI automatically.
That's all!
Reason of Fail
When you use data binding, and you want UI automatic update after setting fields. then your model should be one of below :
Either extend BaseObservable
Or fields must be Observable fields
Or using LiveData
In your case, initially your URL is empty (""). Now when you set image after some time programmatically, then UI is not notified because you are not using any observing option like I said above.
Bit more info
The difference between both is, Live data is Android Lifecycle Aware (Activity/ Fragments/ Services).
LiveData is an observable data holder class. Unlike a regular
observable, LiveData is lifecycle-aware, meaning it respects the
lifecycle of other app components, such as activities, fragments, or
services. This awareness ensures LiveData only updates app component
observers that are in an active lifecycle state.

Use this
#BindingAdapter({"bind:userImage"})
Instead of this
#BindingAdapter("android:userImage")
And in CircleImageView
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
app:userImage="#{signup.userImage}"
android:id="#+id/iv_user"
android:src="#drawable/profile"/>
here is the good article for Loading images with data binding

try by removing android TAG
#BindingAdapter("userImage")
fun loadImage(view: CircleImageView, imageUrl: String) {
userImage=imageUrl
Glide.with(view.context).load(imageUrl).into(view)
}
AND
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
app:userImage="#{signup.userImage}"
android:id="#+id/iv_user"
android:src="#drawable/profile"/>

Alongwith the answer given by Khemraj make sure you have marked Binding Adapter as #JvmStatic and it should be added above #BindingAdapter annotation. I wasted a whole day as I had added jvmstatic after Binding Adapter annotation.
object ImageBindingAdapter {
#JvmStatic
#BindingAdapter("android:src")
fun setImage(imageView: ImageView, uri: String) {
Glide.with(imageView.context).load(uri).placeholder(R.drawable.no_image).error(R.drawable.no_image).centerCrop().into(imageView)
}}