Tutorial View Injection Menggunakan ButterKnife di Android

Last Updated on 8 years by Mas Herdi

Halo semua, kali ini kita akan mempelajari bagaimana cara melakukan View Injection menggunakan library ButterKnife di Android. ButterKnife sendiri merupakan library yang sudah sangat dikenal dan termasuk library wajib yang harus diikutsertakan pada aplikasi Android kalian. Karena dengan fungsionalitas View Injectionnya, kita tidak perlu melakukan findViewById satu persatu, kita hanya perlu menginjectkan view tersebut ke komponen Android.

Belajar View Injection di Android dengan ButterKnife

Oke, sebelum belajar view injection menggunakan ButterKnife, pertama-tama buatlah sebuah project baru di Android Studio terlebih dahulu sesuai tutorial berikut. Jika sudah, buka file build.gradle di level project, dan masukkan kode berikut :

buildscript {
    repositories {
        jcenter()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.1.2'
        classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'
    }
}

Kemudian buka file build.gradle di level module Android Studio kalian, dan tambahkan dependency com.jakewharton:butterknife:8.4.0 dan dan apply plugin android-apt, seperti file di bawah ini :

apply plugin: 'com.android.application'
apply plugin: 'android-apt'

android {
    compileSdkVersion 23
    buildToolsVersion "24.0.1"

    defaultConfig {
        applicationId "id.web.twoh.twohbutterknifesample"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.4.0'
    compile 'com.jakewharton:butterknife:8.4.0'
    apt 'com.jakewharton:butterknife-compiler:8.4.0'
}

Untuk layoutnya, kita tinggal membuat layout xml dan viewsnya seperti biasa, pada tutorial ini saya menambahkan beberapa views pada file activity_main.xml / content_main.xml seperti di bawah :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="id.web.twoh.twohbutterknifesample.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Belajar ButterKnife !!" />

    <EditText
        android:id="@+id/et_sayhello"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:hint="Say something..." />

    <Button
        android:id="@+id/bt_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/et_sayhello"
        android:text="Submit" />
</RelativeLayout>

Setelah itu, kita buka file MainActivity.java untuk menambahkan kodingan utamanya. Ganti isi MainActivity.java menjadi seperti di bawah ini :

package id.web.twoh.twohbutterknifesample;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.tv_title)
    TextView tvTitle;

    @BindView(R.id.et_sayhello)
    EditText etHello;

    @BindView(R.id.bt_submit)
    Button btSubmit;

    @BindView(R.id.toolbar)
    Toolbar toolbar;

    @BindView(R.id.fab)
    FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        setSupportActionBar(toolbar);
        tvTitle.setText("Belajar ButterKniew by TWOH's Engineering");
    }

    @OnClick(R.id.bt_submit)
    public void submit() {
        Toast.makeText(MainActivity.this, "You say "+etHello.getText().toString(), Toast.LENGTH_LONG ).show();
    }

    @OnClick(R.id.fab)
    public void clickFAB(View view){
        Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }

}

Jika kita cermati codingan di atas, ada beberapa perubahan seperti penambahan annotation @BindView dan method findViewbyId() yang biasanya ada di Activity menjadi hilang.

@BindView annotation digunakan oleh ButterKnife untuk melakukan view injection dan otomatis meng-cast view tersebut sesuai dengan tipe-nya (apakah itu Button, TextView, EditText). Kemudian anotasi @OnClick(R.id.your_view_id) digunakan untuk mengeset OnClickListener ke sebuah view, yang parameter masukannya bisa kita ubah sesuai keinginan. Pada contoh di atas kita bisa mengeset @OnClick pada Button dan juga FloatinActionButton cukup dengan memberi id view nya saja.

Dan terakhir, kita menggunakan ButterKnife.bind(this) berfungsi untuk mengikat views ke dalam Activity/Fragment/Context/View yang kita inginkan. Codingannya menjadi jauh lebih simple dan rapi dibandingkan dengan menggunakan findViewById bukan? 🙂

Demo

Untuk demonya, kalian bisa langsung me-run project tersebut dan memastikan semua view-nya terinject dengan cara mengklik tombol Submit atau FloatingActionButton. Jika views-nya benar-benar terinject maka akan muncul Toast saat mengklik tombol Submit dan muncul SnackBar saat FAB nya diklik.

Source code ada di GitHub saya, jangan lupa untuk follow dan star projectnya ya ? Bagi yang kurang jelas silahkan tanya di bagian komentar.