Enable Button when EditText text.length() > 0 using Android Data Binding

Question

I am trying to enable the button when someone starts to write in the EditText.

I set the the Button's enabled property to android:enabled="@{editText.text.length() > 0}"

This was working well. But it stoped working when I tried to bind the EditText to a ViewModel using two way DataBinding.

It's this line that makes the difference.

            android:text="@={signUpViewModel.Phone}"

Without this, it works fine! What could be the cause?

Below is the full 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="signUpViewModel"
        type="com.qenetech.africapuzzle.signup.SignUpViewModel" />

    <variable
        name="editText_verify_phone_number"
        type="android.widget.EditText" />
</data>

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".signup.verify_phone.EnterPhoneFragment">

    <Spinner
        android:id="@+id/spinner_country"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="60dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:weightSum="10"
        app:layout_constraintEnd_toEndOf="@+id/spinner_country"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/spinner_country"
        app:layout_constraintTop_toBottomOf="@+id/spinner_country">



        <android.support.design.widget.TextInputLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="wrap_content"
            android:textColorHint="@android:color/darker_gray">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/editText_verify_phone_country_code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:text="@={signUpViewModel.CountryCode}"
                android:inputType="phone" />

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/etPhoneLayout"
            android:layout_width="0dp"
            android:layout_weight="8"
            android:layout_height="wrap_content"
            android:textColorHint="@android:color/darker_gray">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/editText_verify_phone_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@={signUpViewModel.Phone}"
                android:hint="@string/enter_phone_number"
                android:inputType="phone"/>

        </android.support.design.widget.TextInputLayout>
    </LinearLayout>

    <Button
        style="@style/Button.Primary"
        android:id="@+id/button_verify_phone"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="@string/next"
        android:textSize="@dimen/text_medium"
        android:enabled="@{editTextVerifyPhoneNumber.text.length() > 0}"
        app:layout_constraintEnd_toEndOf="@+id/linearLayout"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="@+id/linearLayout"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
</android.support.constraint.ConstraintLayout>
</layout>

Below is the ViewModel

public class SignUpViewModel extends ViewModel {

    public MutableLiveData<String> Phone = new MutableLiveData<>();
    public MutableLiveData<String> CountryCode = new MutableLiveData<>();
}

And the Fragment that I use with the ViewModel

public class EnterPhoneFragment extends Fragment {

    private SignUpViewModel signUpViewModel;

    private SignupEnterPhoneFragmentBinding binding;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        binding = DataBindingUtil.inflate(inflater, R.layout.signup_enter_phone_fragment, container, false);

        View root = binding.getRoot();

        signUpViewModel = ViewModelProviders.of(this).get(SignUpViewModel.class);

        binding.setSignUpViewModel(signUpViewModel);

        Spinner spinner = root.findViewById(R.id.spinner_country);

        spinner.setAdapter(new CountrySpinnerAdapter(getContext()));

        return root;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }

}

Answer 1

Use TextUtils to determine whether to enable the button.

Add this to the layout

<data>
    <variable
        name="signUpViewModel"
        type="com.qenetech.africapuzzle.signup.SignUpViewModel" />

    <import type="android.text.TextUtils" />
</data>

then

<Button
    style="@style/Button.Primary"
    android:id="@+id/button_verify_phone"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:text="@string/next"
    android:textSize="@dimen/text_medium"
    android:enabled="@{!TextUtils.isEmpty(signUpViewModel.phone)}"
    app:layout_constraintEnd_toEndOf="@+id/linearLayout"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="@+id/linearLayout"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout" />

Also don't forget to call

binding.setLifecycleOwner(this)

in onViewCreated.