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
|
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)
|
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 |
<?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
|
1 2 3 4 5 6 |
@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.
|
1 2 3 4 5 6 7 8 |
@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.
|
1 2 3 4 5 6 7 8 |
@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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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.
|
1 2 3 4 5 6 |
@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.
|
1 2 3 4 5 6 |
@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.
References and Resources
https://guides.codepath.com/android/Reducing-View-Boilerplate-with-Butterknife
https://medium.com/@lgvalle/how-butterknife-actually-works-85be0afbc5ab#.nwssxqogr