First Android development UI creation for busy people (In addition, Data Binding experience)

Introduction

This article is a continuation of "First Android Development for Busy People".

This time we will make a UI. I will also touch on Data Binding in the Android framework.

The official documentation for the Data Binding Library is here [https://developer.android.com/topic/libraries/data-binding?hl=ja)

Advance preparation

Modify build.gradle to enable Data Binding.

build.gradle

android {
    ...
    dataBinding {
        enabled = true
    }
    compileOptions {
        sourceCompatibility = '1.8'
        targetCompatibility = '1.8'
    }
}

dependencies {
    ...
    implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0-alpha01'
}

Press "Sync Now" that appears at the top.

Create a ViewModel class

MainViewModel.java

public class MainViewModel extends ViewModel {

    private MutableLiveData<String> name = new MutableLiveData<>();

    public MutableLiveData getName() {
        return this.name;
    }
}

By the way, let's change the package structure as shown below.

Edit the Layout file

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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout">

    <data>
        <variable name="mainViewModel" type="jp.co.sample.hands_on_sample.viewmodel.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.MainActivity">

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="8dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@={mainViewModel.name}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text="@{mainViewModel.name}"
            android:textSize="36sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Edit the Activity class

MainActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Log.i(TAG, "onCreate");

        mainViewModel = ViewModelProviders.of(this).get(MainViewModel.class);
        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        binding.setMainViewModel(mainViewModel);
        binding.setLifecycleOwner(this);
    }

Run! Press the run button to launch the app. As soon as you enter the value in the input box, you will see that the text label has been updated.

Advanced version

Let's see how to capture the changes in the ViewModel and do some processing to display them on the screen in real time. This time, I will try to reverse the input characters and display them.

MainViewModel.java

public class MainViewModel extends ViewModel {

    private MutableLiveData<String> name = new MutableLiveData<>();

    private MutableLiveData<String> reverseName = new MutableLiveData<>();

    public MutableLiveData<String> getName() {
        return this.name;
    }

    public MutableLiveData<String> getReverseName() {
        return this.reverseName;
    }
}

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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout">

    <data>
        <variable name="mainViewModel" type="jp.co.sample.hands_on_sample.viewmodel.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.MainActivity">

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="8dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@={mainViewModel.name}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text="@{mainViewModel.name}"
            android:textSize="36sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:text="@{mainViewModel.reverseName}"
            android:textSize="36sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

MainActivity.java

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Log.i(TAG, "onCreate");

        mainViewModel = ViewModelProviders.of(this).get(MainViewModel.class);
        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        binding.setMainViewModel(mainViewModel);
        binding.setLifecycleOwner(this);

        mainViewModel.getName().observe(this, name -> {
            mainViewModel.getReverseName().postValue(new StringBuilder(name).reverse().toString());
        });
    }