Cara Menggunakan View Binding Android Jetpack – Halo, tutorial android kali ini kita akan membahas mengenai View Binding. Apa itu View Binding ? menurut situs resminya ialah View binding is a feature that allows you to more easily write code that interacts with views. Once view binding is enabled in a module, it generates a binding class for each XML layout file present in that module. An instance of a binding class contains direct references to all views that have an ID in the corresponding layout. In most cases, view binding replaces findViewById. Untuk referensi : https://developer.android.com/topic/libraries/view-binding
Secara artian dan sepemahaman saya View Binding ini untuk menggantikan findViewById. maksudnya gimana? biasanya kan kita jika di activity/fragment selalu mendefinisikan terlebih dahulu componen view apa aja yang ada di layout. Misalnya di layout activity_main kita mempunya 1 edittext dan 1 button, maka pada MainActivity kita akan inisialisasi kedua komponen tersebut.
|
1 |
private Button btnSimpan; |
|
1 |
btnSimpan = findViewById(R.id.btnSimpan); |
Nah, jika kita menggunakan View Binding kita tidak perlu inisialisasi kedua komponen. Hanya dengan define View Binding layout kita maka secara otomatis kita bisa langsung pakai.
|
1 2 3 4 |
private ActivityMainBinding binding; binding = ActivityMainBinding.inflate(getLayoutInflater()); setContentView(binding.getRoot()); |
Hanya dengan kode tersebut kita bisa langsung akses komponen view yang ada dilayout. Karena fitur View Binding akan meng-generate hasil id yang kita define pada layout. Dan yang tidak kalah hebatnya View Binding ini dilengkapi dengan Keamanan dari pointer null dan Keamanan jenis. Menurut situs resminya :
View binding memiliki keunggulan penting dibandingkan findViewById:
- Keamanan dari pointer null: Karena view binding menciptakan referensi langsung ke tampilan, tidak ada risiko pengecualian pointer null akibat ID tampilan yang tidak valid. Selain itu, jika tampilan hanya ada dalam beberapa konfigurasi tata letak, kolom yang berisi referensinya dalam class binding itu akan ditandai sebagai @Nullable.
- Keamanan jenis: Kolom di setiap class binding memiliki jenis yang cocok dengan tampilan yang direferensikannya dalam file XML. Dengan begitu, tidak ada risiko pengecualian cast class.
Perbedaan ini berarti inkompatibilitas antara tata letak dan kode Anda akan menyebabkan build gagal pada waktu kompilasi, bukan pada waktu proses.
Daftar Isi
Bagaimana Cara Menggunakan View Binding Android Jetpack
Persiapan project
Beri project dengan nama aplikasi Pengeluaran Que dan pilih Empty Activity terlbih dahulu dan buat MainActivity.
Konfigurasi Library yang dipakai
build.gradle(Module:App). Pada file build gradle tambahkan kode berikut didalam tag android untuk meng-aktifkan bahwa project kita menggunakan View Binding
|
1 2 3 |
viewBinding { enabled = true } |
Lalu pada dependenciesnya tambahkan library-library yang kita butuhkan
|
1 2 3 4 |
implementation 'androidx.cardview:cardview:1.0.0' implementation 'androidx.recyclerview:recyclerview:1.1.0' implementation 'androidx.vectordrawable:vectordrawable:1.1.0' implementation 'com.google.android.material:material:1.1.0' |
Full kode pada build.gradle(Module:App) jadi seperti ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
apply plugin: 'com.android.application' android { compileSdkVersion 29 buildToolsVersion "29.0.3" defaultConfig { applicationId "com.app.pengeluaranque" minSdkVersion 21 targetSdkVersion 29 versionCode 1 versionName "1.0" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro' } } viewBinding { enabled = true } } dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'androidx.appcompat:appcompat:1.1.0' implementation 'androidx.constraintlayout:constraintlayout:1.1.3' implementation 'androidx.cardview:cardview:1.0.0' implementation 'androidx.recyclerview:recyclerview:1.1.0' implementation 'androidx.vectordrawable:vectordrawable:1.1.0' implementation 'com.google.android.material:material:1.1.0' testImplementation 'junit:junit:4.12' androidTestImplementation 'androidx.test.ext:junit:1.1.1' androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' } |
Konfigurasi warna yang dipakai
colors.xml. Tambahkan kode berikut untuk meng-inisialisasi warna-warna yang akan kita pakai pada aplikasi
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#F44336</color> <color name="colorPrimaryDark">#D32F2F</color> <color name="colorAccent">#FF5722</color> <color name="primary_light">#FFCDD2</color> <color name="primary_text">#212121</color> <color name="secondary_text">#757575</color> <color name="icons">#FFFFFF</color> <color name="divider">#BDBDBD</color> </resources> |
Layouting
Pada file activity_main.xml tambahkan 3 komponen. TextInputLayout dan Button. TextInputLayout untuk mengambil data form dan button untuk melakukan aksi. Untuk kodenya sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:orientation="vertical" android:padding="16dp" tools:context=".MainActivity"> <com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/keterangan"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/etKeterangan" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textMultiLine|textCapSentences" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:hint="@string/harga"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/etHarga" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="number" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <androidx.appcompat.widget.AppCompatButton android:id="@+id/btnSimpan" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:background="@drawable/bg_retangle_primary_dark_8" android:text="@string/simpan" android:textAllCaps="false" android:textColor="@android:color/white" /> </LinearLayout> |
Buat Fungsi global
Maksudnya fungsi global jadi kita membuat 1 class yang isinya fungsi yang bisa dipakai oleh lain class. Kita beri nama class tersebut FunctionHelper.java . Tambahkan fungsi untuk meng-convert form harga ke format rupiah. Untuk kodenya sebagai berikut :
|
1 2 3 4 |
public static String rupiahFormat(int price) { DecimalFormat formatter = new DecimalFormat("#,###"); return "Rp " + formatter.format(price).replaceAll(",", "."); } |
Untuk full kode FunctionHelper.java sebagai berikut :
|
1 2 3 4 5 6 7 |
public class FunctionHelper { public static String rupiahFormat(int price) { DecimalFormat formatter = new DecimalFormat("#,###"); return "Rp " + formatter.format(price).replaceAll(",", "."); } } |
Inisialisasi View Binding pada Activity
Pada file MainActivity inisialisasi class Bindingnya terlebih dahulu
|
1 |
private ActivityMainBinding binding; |
Didalam onCreate tambahakn kode berikut :
|
1 2 3 4 |
binding = ActivityMainBinding.inflate(getLayoutInflater()); setContentView(binding.getRoot()); initAction(); |
Lalu buat fungsi initAction. Untuk kodenya sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
private void initAction() { binding.btnSimpan.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String keterangan = binding.etKeterangan.getText().toString(); String harga = binding.etHarga.getText().toString(); if (keterangan.isEmpty() || harga.isEmpty()){ Toast.makeText(MainActivity.this, getString(R.string.error_message_form_empty), Toast.LENGTH_SHORT).show(); } else { String initHarga = FunctionHelper.rupiahFormat(Integer.parseInt(harga)); String messageToast = "Kamu mengeluarkan " + initHarga + " untuk " + keterangan; Toast.makeText(MainActivity.this, messageToast, Toast.LENGTH_SHORT).show(); } } }); } |
Full kode pada MainActivity adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
public class MainActivity extends AppCompatActivity { private ActivityMainBinding binding; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = ActivityMainBinding.inflate(getLayoutInflater()); setContentView(binding.getRoot()); initAction(); } private void initAction() { binding.btnSimpan.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { String keterangan = binding.etKeterangan.getText().toString(); String harga = binding.etHarga.getText().toString(); if (keterangan.isEmpty() || harga.isEmpty()){ Toast.makeText(MainActivity.this, getString(R.string.error_message_form_empty), Toast.LENGTH_SHORT).show(); } else { String initHarga = FunctionHelper.rupiahFormat(Integer.parseInt(harga)); String messageToast = "Kamu mengeluarkan " + initHarga + " untuk " + keterangan; Toast.makeText(MainActivity.this, messageToast, Toast.LENGTH_SHORT).show(); } } }); } } |
Jalankan aplikasi
Bonus :
Konfigurasi Binding pada adapter. Untuk kodenya sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
public class MediaAdapter extends RecyclerView.Adapter<MediaAdapter.ViewHolder> { private static final String TAG = MediaAdapter.class.getSimpleName(); private Context context; private List<String> list; private MediaAdapterCallback mAdapterCallback; private ItemMediaBinding binding; public MediaAdapter(Context context, List<String> list, MediaAdapterCallback adapterCallback) { this.context = context; this.list = list; this.mAdapterCallback = adapterCallback; } @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { binding = ItemMediaBinding.inflate(LayoutInflater .from(parent.getContext()), parent, false); return new ViewHolder(binding); } @Override public void onBindViewHolder(ViewHolder holder, int position) { String item = list.get(position); holder.bindData(item); } @Override public int getItemCount() { return list.size(); } public void clear() { int size = this.list.size(); this.list.clear(); notifyItemRangeRemoved(0, size); } public class ViewHolder extends RecyclerView.ViewHolder { ViewHolder(@NonNull ItemMediaBinding itemView) { super(itemView.getRoot()); } void bindData(String item) { } } public interface MediaAdapterCallback { void onRowMediaAdapterClicked(int position); } } |
Catatan :
ItemMediaBinding = Ini bisa kalian ganti dengan Binding layout adapter kalian
private List<String> list; = Ini bisa kalian sesuaikan dengan kebutuhan
Nah, sekian tutorial android mengenai Cara Menggunakan View Binding Android Jetpack. Jika ada pertanyaan atau yang kurang jelas kalian bisa langsung berkomentar pada halaman ini ya. Terimakasih
