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)
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.
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.
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>
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.
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());
});
}
Recommended Posts