ButterKnife in Android with Example

Butter Knife is a popular open-source library for Android that helps to reduce the amount of boilerplate code needed for view binding in an Android application. It allows developers to bind views and perform listener callbacks without the need for explicit calls to findViewById() and setOnClickListener() methods. Using Butter Knife, you can bind views and perform actions using annotations. For example, to bind a TextView with the id “my_text_view” and set its text. Butter Knife also supports binding event listeners using the @OnClick, @OnLongClick, @OnEditorAction, etc. annotations. It also supports binding resources such as strings and dimensions using the @BindString, @BindDimen, etc. annotations. Butter Knife is widely used in android development to simplify the code and improve readability. It is more efficient than traditional view binding and it is a must-have library for android developers.

General Syntax of Butter Knife in Java and Kotlin

Kotlin

class MainActivity : AppCompatActivity() {

    @BindView(R.id.my_text_view)
    lateinit var myTextView: TextView

    @BindView(R.id.my_button)
    lateinit var myButton: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        ButterKnife.bind(this)
        myTextView.text = "Hello, Butter Knife!"
    }

    @OnClick(R.id.my_button)
    fun onButtonClicked() {
        myTextView.text = "Button was clicked!"
    }
}

Java

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.my_text_view) TextView myTextView;
    @BindView(R.id.my_button) Button myButton;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        myTextView.setText("Hello, Butter Knife!");
    }

    @OnClick(R.id.my_button)
    public void onButtonClicked() {
        myTextView.setText("Button was clicked!");
    }
}

In the example above,

• We use the @BindView annotation to bind the TextView and Button views in the layout with variables in the MainActivity class. The @OnClick annotation is used to set a click listener on the button and specify the method to be called when the button is clicked.
• When the button is clicked, the onButtonClicked() method will be called, and it will change the text of the TextView to “Button was clicked!”.
• Butter Knife’s annotations are processed at compile-time, so it does not affect the application’s performance. It makes the code more readable and less verbose by eliminating the need to use findViewById() and setOnClickListener() methods.

Butter Knife is a popular open-source library for Android that helps to simplify view binding and listener callbacks in an Android application. It uses annotations to bind views and perform actions on them, making the code more readable and less verbose. It also supports binding event listeners, resources such as strings, and dimensions. It is widely used in android development and it is a must-have library for android developers. Butter Knife’s annotations are processed at compile-time and do not affect the application’s performance. It helps to improve the readability and maintainability of the code.

Note: This Android article is covered in both Java and Kotlin programming languages.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Adding Dependency to the build.gradle File

Go to Module build.gradle file and add this dependency and click on Sync Now button.

implementation 'com.jakewharton:butterknife:10.2.3'
annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.3'

Step 3: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail. 

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Root layout using ConstraintLayout -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- Button with onClick attribute to call changeText method -->
    <Button
        android:id="@+id/change_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="changeText"
        android:text="Change Text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- TextView displaying "GeeksForGeeks App" -->
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="GeeksForGeeks App"
        app:layout_constraintBottom_toTopOf="@+id/change_text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity file 

Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know it in detail. 

Kotlin

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import butterknife.BindView
import butterknife.ButterKnife
import butterknife.OnClick

class MainActivity : AppCompatActivity() {

    // Bind button to variable
      // using ButterKnife library
    @BindView(R.id.change_text)
    lateinit var button: Button

    // Bind text view to variable
      // using ButterKnife library
    @BindView(R.id.text_view)
    lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Set the content view to the layout
          // defined in R.layout.activity_main
        setContentView(R.layout.activity_main)

        // Bind views to variables
          // using ButterKnife library
        ButterKnife.bind(this)
    }

    // Define function to be
      // called when button is clicked
    @OnClick(R.id.change_text)
    fun changeText() {
        // Set text of textView
          // to "Did something change?"
        textView.text = "Did something change?"
    }
}

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

// MainActivity is the main class for the app's UI
public class MainActivity extends AppCompatActivity {

    // Binds the button in the layout
      // with the id "change_text" to this variable
    @BindView(R.id.change_text)
    Button button;

    // Binds the textView in the layout
      // with the id "text_view" to this variable
    @BindView(R.id.text_view)
    TextView textView;

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

        // Binds the views in the layout
          // to the variables using ButterKnife
        ButterKnife.bind(this);
    }

    // Sets a click listener on the button
    @OnClick(R.id.change_text)
    public void changeText(View view) {
        // Changes the text of the textView
          // when the button is clicked
        textView.setText("Did something change?");
    }
}

Output: