Android View Binding
View Binding adalah fitur yang dapat membantu programmer agar lebih mudah untuk berinteraksi dengan View yang ada pada Layout XML Android (alternatif dari findViewById, Butterknife, atau Kotlin Synthetic). Selengkapnya mengenai view binding dapat dibaca [di sini](https://developer.android.com/topic/libraries/view-binding).
Melalui tutorial berikut ini akan kita lihat perbedaannya. Pada tutorial ini akan dibuat aplikasi yang menerima input text dari user dan menampilkan text yang diinput user ke TextView, untuk lebih jelasnya silakan lihat di video demo.
1. Buat project Android baru di IntelliJ IDEA / Android Studio. Pilih **Empty Activity** dan beri nama misal dengan nama project Hello View Binding dan package name hello.view.binding
2. Tambahkan code berikut untuk membuat layout di activity_main.xml
5. Sekarang kita gunakan Android View Binding, pertama tambahkan code berikut di build.gradle (app) di dalam segment android { ... }, misalnya sebelum baris buildTypes {
Melalui tutorial berikut ini akan kita lihat perbedaannya. Pada tutorial ini akan dibuat aplikasi yang menerima input text dari user dan menampilkan text yang diinput user ke TextView, untuk lebih jelasnya silakan lihat di video demo.
1. Buat project Android baru di IntelliJ IDEA / Android Studio. Pilih **Empty Activity** dan beri nama misal dengan nama project Hello View Binding dan package name hello.view.binding
2. Tambahkan code berikut untuk membuat layout di activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tvOutput" android:text="Hello World!" app:layout_constraintEnd_toEndOf="parent" android:layout_marginTop="16dp" app:layout_constraintTop_toBottomOf="@+id/btnSubmit" android:layout_marginEnd="16dp"/> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPersonName" android:hint="ketik text di sini" android:text="" android:ems="10" android:id="@+id/etInput" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="64dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_marginStart="8dp" android:layout_marginEnd="8dp"/> <Button android:text="submit" android:layout_width="0dp" android:layout_height="wrap_content" android:id="@+id/btnSubmit" android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="@+id/etInput" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:layout_marginStart="32dp" android:layout_marginEnd="32dp"/> </androidx.constraintlayout.widget.ConstraintLayout>kita akan mendapatkan layout activity sebagai berikut 3. Tambahkan code di MainActivity.kt untuk mengambil text yang diinputkan user dan menampilkan hasilnya di TextView, code selengkapnya adalah sebagai berikut.
package hello.view.binding import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.Button import android.widget.EditText import android.widget.TextView class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // mengarahkan tampilan activity menggunakan layout activity_main.xml setContentView(R.layout.activity_main) // membuat variabel yang berisi object widget // variabel untuk widget EditText, tempat user mengetikkan text val editTextInput = findViewById<EditText>(R.id.etInput) // variabel untuk widget Button, tombol yang diklik user untuk mengambil text input dan menampilkan ke TextView val buttonSubmit = findViewById<Button>(R.id.btnSubmit) // variabel untuk widget TextView, tempat menampilkan text yang diinput di EditText val textOutput = findViewById<TextView>(R.id.tvOutput) // menambahkan listener OnClick, klik pada Button akan mengeksekusi code buttonSubmit.setOnClickListener { // code yang dieksekusi apabila Button diklik // mengambil text yang diketik pada TextView var textInputFromUser = editTextInput.text.toString() // menampilkan text yang diinput dari EditText ke TextView textOutput.text = textInputFromUser } } }4. Jalankan project Android melalui emulator / smartphone
5. Sekarang kita gunakan Android View Binding, pertama tambahkan code berikut di build.gradle (app) di dalam segment android { ... }, misalnya sebelum baris buildTypes {
buildFeatures { viewBinding = true }6. Ubah code MainActivity.kt
package hello.view.binding import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import hello.view.binding.databinding.ActivityMainBinding class MainActivity : AppCompatActivity() { // variabel binding private lateinit var binding: ActivityMainBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityMainBinding.inflate(layoutInflater) val view = binding.root setContentView(view) // menambahkan listener OnClick, klik pada Button akan mengeksekusi code binding.btnSubmit.setOnClickListener { // code yang dieksekusi apabila Button diklik // mengambil text yang diketik pada TextView var textInputFromUser = binding.etInput.text.toString() // menampilkan text yang diinput dari EditText ke TextView binding.tvResult.text = textInputFromUser } } }
Comments
Post a Comment