How To Perform View Binding In Android Using ButterKnife

 

Introduction

 

In this article, we will learn how to perform View Binding in Android using ButterKnife which is a very useful library in Android application development. If you have been developing an Android application, you will realize that there are lots of boilerplate codes in your application. In some cases, it will be so much that the onCreate method will be bloated with boilerplate codes. This is where Android ButterKnife comes to your help.

 

ButterKnife

 

Field and method binding for Android views use annotation processing to generate boilerplate code for you. To know more, click here.

 

How it can help us to improve our code?

1. Eliminate findViewById calls by using @BindView on fields.
2. Group multiple views in a list or array. Operate on all of them at once with actions, setters, or properties.
3. Eliminate anonymous inner-classes for listeners by annotating methods with @OnClick and others. Eliminate resource lookups by using resource annotations on fields.

In this article, I am going to show the method for using ButterKnife with RecyclerView and Each Single Views.

 

I have divided this implementation into 4 steps, as shown in the following.

• Step 1 - Creating a New Project with Android Studio.
• Step 2 - Setting up the library for the project.
• Step 3 - Implementation of ButterKnife with Single Views.
• Step 4 - Implementation of ButterKnife with RecyclerView.

Step 1 - Creating a New Project with Android Studio

1. Open Android Studio and select "Create a new project".
2. Name the project as you wish and select your activity template.
    
    
3. Click the “Finish” button to create a new project in Android Studio.

Step 2 - Setting up the library for the project

1. Open the App Level Gradle file and add the following lines to add ButterKnife Library.

   ...
   // add the below lines in dependencies
   implementation 'com.jakewharton:butterknife:8.8.1'
   annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
   ...

2. Then, click “Sync Now” to add the library.

Step 3 - Implementation of ButterKnife with Views

 

Open your Activity and add the following line after setContentView to implement the ButterKnife.

// Initialize ButterKnife
ButterKnife.bind(this);

The Views can be initialized like below.

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

It is replaced by the following.

TextView title = findViewById(R.id.title);

It will reduce the coding boilerplates and increases productivity.

 

Events like “ClickEvent” also be done by this library. ClickEvent can be achieved by the following lines.

@OnClick(R.id.submit)
public void submit(View view) {
            // TODO submits data to server...
}

Step 4 - Implementation of ButterKnife with RecyclerView

1. By the same way RecyclerView, ListView also be initialized like the previous method. 

   @BindView(R.id.recycler)
   public RecyclerView recyclerView;

2. To bind the data to RecyclerView, we have to create a model class and adapter with ViewHolder. The Model class and Adapter code can be find below. 
    
3. Model Class
    
   Create a class and named as java for example, then add the following lines. 

   class ToDoObject {
       private String todoType;
       private String todoName;
   
       ToDoObject(String todoType, String todoName) {
           this.todoType = todoType;
           this.todoName = todoName;
       }
   
       String getTodoType() {
           return todoType;
       }
   
       String getTodoName() {
           return todoName;
       }
   }

4. Adapter
    
   Create an adapter for RecyclerView and named as Java, then add the following lines. 

   class ToDoAdapter extends RecyclerView.Adapter {
       private Context context;
       private List toDoObjectList;
   
       ToDoAdapter(Context context, List toDoObjectList) {
           this.context = context;
           this.toDoObjectList = toDoObjectList;
       }
   
       @Override
       public ToDoViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
           View view = LayoutInflater.from(context).inflate(R.layout.list_row, parent, false);
           return new ToDoViewHolder(view);
       }
   
       @Override
       public void onBindViewHolder(ToDoViewHolder holder, final int position) {
           ToDoObject toDoObject = toDoObjectList.get(position);
           holder.todoType.setText(toDoObject.getTodoType());
           holder.todo.setText(toDoObject.getTodoName());
   
           holder.itemView.setOnClickListener(new View.OnClickListener() {
               @Override
               public void onClick(View view) {
                   Toast.makeText(context, "Selected index " + position, Toast.LENGTH_LONG).show();
               }
           });
       }
   
       @Override
       public int getItemCount() {
           return toDoObjectList.size();
       }
   }

5. Create a ViewHolder named Java and add the following lines. 

   class ToDoViewHolder extends RecyclerView.ViewHolder{
   
       @BindView(R.id.todo_type)
       TextView todoType;
       @BindView(R.id.todo)
       TextView todo;
   
       ToDoViewHolder(View itemView) {
           super(itemView);
           ButterKnife.bind(this, itemView);
       }
   }

6. Here, ButterKnife is initialized by the following with each Item Views. 

   ButterKnife.bind(this, itemView);

7. Views are initialized as normal view initialization methods.
8. OnItemClick can be applied to ListView with ButterKnife and doesn’t applicable to RecyclerViews.

Full Code

 

You can find the full code implementation of the API.

public class ToDoActivity extends AppCompatActivity {

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

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

    @BindView(R.id.recycler)
    public RecyclerView recyclerView;

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        setSupportActionBar(toolbar);

        title.setText("ToDo List");
        title.setTextSize(20);

        LinearLayoutManager layoutManager = new LinearLayoutManager(ToDoActivity.this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(true);
        ToDoAdapter mAdapter = new ToDoAdapter(ToDoActivity.this, getTestData());
        recyclerView.setAdapter(mAdapter);

    }

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

    public List getTestData() {
        List cars = new ArrayList<>();
        cars.add(new ToDoObject("Shopping", "Cake"));
        cars.add(new ToDoObject("Shopping", "Cloth"));
        cars.add(new ToDoObject("Shopping", "Color Paper"));
        cars.add(new ToDoObject("HomeWork", "Science"));
        cars.add(new ToDoObject("HomeWork", "Maths"));
        cars.add(new ToDoObject("HomeWork", "Chemistry"));
        return cars;
    }

}

Download Code

 

You can download the full source code of the article on GitHub. If you like this article, do star the repo in GitHub.