(Tutorial Android) Method Binding for Android Views using Butter Knife

Butter Knife merupakan library binding untuk Android. Pada umumnya di aplikasi android, kita menggunakan method findViewById() untuk menginstance atau memanggil setiap view yang ada pada layout yang akan kita gunakan. Dengan menggunakan Butter Knife kita dapat mem-binding istilahnya view-view yang ada pada layout. Butter Knife menggunakan annotation processing untuk menginstance suatu view ke activity maupun fragment. Selain itu juga annotations dapat digunakan untuk handling events sepeti OnClick, OnItemClick dan sebagainya.

Butter Knife dikembangkan oleh Jake Wharton, orang yang berkontribusi besar dalam pengembangan library ini. Library ini sangat bermanfaat seperti membuat coding menjadi lebih clean, simpel dan menjadi solusi untuk permasalahan layout yang kompleks.

Di tutorial kali ini saya akan membahas penggunaan Butterknife di aplikasi android.

Terlebih dahulu kita harus menambahkan dependencies di gradle seperti berikut.

Top-level

dependencies {
    ....
    classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'
}
repositories {
    ....
    mavenCentral()
}

Module-level

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

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'

    //Butterknife
    compile 'com.jakewharton:butterknife:8.0.1'
    apt 'com.jakewharton:butterknife-compiler:8.0.1'
}

Buat layout dengan nama activity_main.xml yang terdiri dari TextView, ImageView dan Button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    android:orientation="vertical"
    tools:context="com.example.wim.android_butterknife.MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:scaleType="centerCrop"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Click Me!"
        android:id="@+id/button" />


</LinearLayout>

Tambahkan string resource di strings.xml (Karena kita akan coba inject dari string resource)

<string name="title">Butterknife Tutorial</string>

Kemudian tambahkan foto atau gambar sembarang di drawable.

Nah sebelum itu saya bahas penggunaan Butter Knife itu sendiri.
- Penggunaannya di views menggunakan annotation @BindView


Contoh :

@BindView(R.id.title) TextView txtTitle;

- Penggunaannya di resource menggunakan annotation seperti @BindBool, @BindColor, @BindDimen, @BindDrawable, @BindInt atau @BindString.

Contoh :

@BindString(R.string.title) String title;

- Penggunaannya untuk event handling menggunakan annotation seperti @OnClick, @OnItemClick dan lain-lain sesuai dengan method event.

Contoh :

@OnClick(R.id.button)
void buttonClick(){
    
}

Ketika menggunakan annotation di atas, maka di dalam method onCreate(Activity) atau onCreateView(Fragment) harus memanggil method Butterknife.bind().

Activity :

ButterKnife.bind(this);

Fragment :

ButterKnife.bind(this, view);

Dokumentasi lengkap bisa dilihat di http://jakewharton.github.io/butterknife/

Sekarang kita coba penggunaannya di Activity.
Buat activity dengan nama MainActivity, kemudian tambahkan kode berikut :

package com.example.wim.android_butterknife;

import android.graphics.drawable.Drawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import butterknife.BindColor;
import butterknife.BindDrawable;
import butterknife.BindString;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.title) TextView txtTitle;
    @BindView(R.id.imageView) ImageView img;
    @BindView(R.id.button) Button btn;

    @BindDrawable(R.drawable.gambar) Drawable gambar;
    @BindString(R.string.title) String title;
    @BindColor(R.color.colorPrimary) int color;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ButterKnife.bind(this);

        txtTitle.setText(title);
        img.setImageDrawable(gambar);
        btn.setBackgroundColor(color);
    }

    @OnClick(R.id.button)
    void buttonClick(){
        Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show();
    }
}

Jalankan dan hasilnya seperti berikut :

Source code dapat dilihat di https://github.com/wimsonevel/Android-Butterknife

Sekian tutorial kali ini.
Semoga bermanfaat.
Happy Coding :)

Share this :