How to use Butterknife in Android, Understanding the Ins and Outs

Tired of writing findViewByID() over and over again? Tired of wiring up all those views each and every time whenever you create a new fragment, activity or adapter? Well then this tutorial is for you. In this tutorial we will see how to use Butterknife in Android, a view injection library to simply the process of binding your views in your code.

What is Butterknife ?

First lets understand what is butterknife and how it works. Butterknife is a View Injection library, that injects views into your Java code on compile time, by using annotation processing. In simple words, butterknife takes your views defined in the Java class (such as EditText) and binds them to the corresponding XML view so you don’t have to write findViewByID again and again. It does this process during the compile time, so there is no performance overhead in your application.

To get a deeper understanding of working of ButterKnife, here is a nice post from Luis G. Valle : How Butterknife actually works?

Adding Dependency

To use butterknife add the following code to your app level gradle file

compile 'com.jakewharton:butterknife:8.4.0'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'

1 2	compile 'com.jakewharton:butterknife:8.4.0' annotationProcessor 'com.jakewharton:butterknife-compiler:8.4.0'

Lets talk code

You will get a better understanding once you get through the code. So here I have set up a simple Activity with a very simple layout, containing two EditText and a Button(the simplest Sign-In layout you can think of)

<?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:gravity="center"
    android:orientation="vertical"
    tools:context="app.com.thetechnocafe.tutorials.ButterknifeActivity">

    <EditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:hint="Username"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/password_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:hint="Password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Login" />

</LinearLayout>

<?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:gravity="center"

android:orientation="vertical"

tools:context="app.com.thetechnocafe.tutorials.ButterknifeActivity">

<EditText

android:id="@+id/username_edit_text"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="16dp"

android:hint="Username"

android:inputType="textEmailAddress" />

<EditText

android:id="@+id/password_edit_text"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="16dp"

android:hint="Password"

android:inputType="textPassword" />

<Button

android:id="@+id/login_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="16dp"

android:text="Login" />

</LinearLayout>

This will look something like this

Now, to reference any of the View(EditText, Button) you would have to first declare a Variable of the type you are referencing and then write findViewById in the onCreate function, but with Butterknife you will write like this

@BindView(R.id.username_edit_text)
EditText mUsernameEditText;
@BindView(R.id.password_edit_text)
EditText mPasswordEditText;
@BindView(R.id.login_button)
Button mLoginButton;

@BindView(R.id.username_edit_text)

EditText mUsernameEditText;

@BindView(R.id.password_edit_text)

EditText mPasswordEditText;

@BindView(R.id.login_button)

Button mLoginButton;

That’s it, now you can use these variables all around your Java class! GoodBye findViewById

Lets break down this simple one line code @BindView(R.username_edit_text) EditText mUsernameEditText;

@BindView is an annotation from Butterknife library
R.id.username_edit_text is the id of the EditText in the XML
EditText mUsernameEditText is the object that you usually declare

There is one more thing to make this work, you have to tell ButterKnife to bind all the view from XML to Java for this particular Activity, this is done using the Butterknife.bind(Activity) function. Write this function in the onCreate of your Activity.

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

    //Tell Butterknife to bind views for this activity
    ButterKnife.bind(this);
}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_butterknife);

//Tell Butterknife to bind views for this activity

ButterKnife.bind(this);

}

Using Butterknife with Fragments

To use Butterknife with fragments the whole process remains the same except the bind function, in case of fragment it becomes Butterknife.bind(Fragment, View). Since a fragment might not have a view attached with it, so you have to tell Butterknife to which view should the binding be created.

@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_layout, container, false);
        
    ButterKnife.bind(this, view);
        
    return view;
}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_layout, container, false);

ButterKnife.bind(this, view);

return view;

}

Using Butterknife with ViewHolders

Same is the case with a ViewHolder that you use in Adapters for RecyclerView, ListView etc.

class ViewHolder extends RecyclerView.ViewHolder {
    @BindView(R.id.text_view)
    TextView mTextView;
    @BindView(R.id.edit_text)
    EditText mEditText;
        
    public ViewHolder(View itemView) {
        super(itemView);
            
        //Provide butterknife the view explicitly
        ButterKnife.bind(this, itemView);
    }
}

class ViewHolder extends RecyclerView.ViewHolder {

@BindView(R.id.text_view)

TextView mTextView;

@BindView(R.id.edit_text)

EditText mEditText;

public ViewHolder(View itemView) {

super(itemView);

//Provide butterknife the view explicitly

ButterKnife.bind(this, itemView);

}

Attaching Listeners with Butterknife

Butterknife also provides the ability to attach onClick listeners to your views, so you don’t need to implement an anonymous class every time. Suppose I want to attach a click listener on my Sign In Button in the above layout, I can do this by using the @OnClick annotation.

@OnClick(R.id.login_button)
public void login(Button button) {
    Toast.makeText(getApplicationContext(), "Logging In", Toast.LENGTH_SHORT).show();
        
    //Sign in code here
}

@OnClick(R.id.login_button)

public void login(Button button) {

Toast.makeText(getApplicationContext(), "Logging In", Toast.LENGTH_SHORT).show();

//Sign in code here

}

Referring Resources with Butterknife

With Butterknife you can also refer to various resource(Colors, Drawables, Strings, Dimen). Look in the code below, its pretty self explanatory.

@BindString(R.string.description) 
String description;
@BindDrawable(R.drawable.ic_launcher) 
Drawable launcher;
@BindColor(R.color.blue) 
int blue;

@BindString(R.string.description)

String description;

@BindDrawable(R.drawable.ic_launcher)

Drawable launcher;

@BindColor(R.color.blue)

int blue;

Well thats it for this tutorial! Personally I use Butterknife in all of my projects, it makes View Binding very easy and fast. Below are some good resources on Butterknife you should check out.