Android ButterKnife Tutorial || Data Binding

Android ButterKnife :

An easier and simple way to bind UI components in the android screens to the code is explained with the help of butterknife android i.e., butterknife tutorial.

Butter Knife is one of the type of view injection’s available in the coding terminology which uses annotation processing. Let’s get started to our Android Tutorial on ButterKnife || ButterKnife Tutorial || Data Binding

Generally its a good practice to use this kind of data binding which make you coding much flexible, easier and even faster compared to the older methodologies.Not only Butter Knife we have other data binding’s which we will discuss in coming tutorials.

Not only UI components but we can bind several other category’s like

1) Binding View’s ( @BindView ) –> TextView, Button, Edittext, Checkbox.. and other UI Components

2) Binding String’s (@BindString ) –> Bind Strings from strings.xml file

3) Binding Drawables ( @BindDrawable ) –> Bind drawable images from drawable folder.

4) Binding  Color’s( @BindColor ) –> Bind color from color.xml

5) Binding Dimen’s( @BindDimen ) –> Bind dimension from dimen.xml file

Add Butter Knife library to your android studio project

I am using 8.6.0 version check latest version before you add android butterknife plugin

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

[/et_pb_text][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

The traditional way of binding views to code is as

for example textview :

TextView txtView = (TextView) findViewById(R.id.txt_view);

( or )

TextView txtView =  findViewById(R.id.txt_view);

which is initialized as following way using android butterknife bindview

@BindView(R.id.txt_view)
TextView txtView;

Here we are binding the view using @BindView as discussed above it’s a view component so we are using BindView.

Also if we include any layout in the view we can initialize them as the above way compared to traditional style where we used to add view before like

TextView txtView =  view.findViewById(R.id.txt_view);

which is initialized as same way we initialize a local view using android butterknife

@BindView(R.id.txt_view)
TextView txtView;

But the most important crucial step in Android ButterKnife is to initialize it before using it in activity, fragment where ever you use it as

In activity’s we pass the activity parameter as “this”

ButterKnife.bind(this);

In Fragment’s we pass Object “this”  and  Source “view”

ButterKnife.bind(this,view);

Bind Different views as

Activity.Java

In onCreate() method initialize Android ButterKnife “butter injection” first  for reference i am specifying imports.

import butterknife.ButterKnife;

ButterKnife.bind(this);

then

import butterknife.BindColor;
import butterknife.BindDimen;
import butterknife.BindDrawable;
import butterknife.BindString;
import butterknife.BindView;

@BindView(R.id.btn_click)
Button btnClick;

@BindView(R.id.txt_view)
TextView txtView;

@BindView(R.id.img_view)
ImageView imgView;

@BindString(R.string.mysite)
String showText;

@BindDrawable(R.drawable.sampleimg)
Drawable sampleImg;

@BindColor(R.color.colorPrimaryDark)
int colorPrimaryDark;

@BindDimen(R.dimen.txtSize)
Float txtSize;

then set their values android onclick

btnClick.setOnClickListener(this); // set android button onclick

txtView.setText(showText); // Set string using butterknife

txtView.setTextSize(txtSize); // Set text size using butterknife

txtView.setTextColor(ContextCompat.getColor(this, colorPrimaryDark)); // Set textcolor using butterknife

imgView.setImageDrawable(sampleImg); // Set image using butterknife

for button click

@Override
public void onClick(View v) {
    switch(v.getId()){

        case R.id.btn_click:

            Toast.makeText(this, "Clicked here", Toast.LENGTH_SHORT).show();

            break;

    }
}

Fragment.java

In OnCreate() initialize the Android ButterKnife which is a slightly different from Activity we pass an extra parameter – android fragment example

ButterKnife.bind(this,view);

The initialization of views is same as activity

@BindView(R.id.txt_view)
TextView txtView;

@BindString(R.string.mysite)
String showText;

then you can use it as

txtView.setText(showText);

Now i would like to show usage of Butter knife in a BaseAdapter file

In ViewHolder class we initialize views so here is the way we don using Butter Knife

static class ViewHolder {

    @BindView(R.id.txt_view)
    TextView txtView;

    public ViewHolder(View view) {
        ButterKnife.bind(this, view);
    }
}

And as you expect the usage is same as where we use holder object to set values to it

holder.txtView.setText("AndroidCoding.in");

SampleAdapter.java

butter knife holder

@Override public View getView(int position, View view, ViewGroup parent) {
    ViewHolder holder;
    if (view != null) {
        holder = (ViewHolder) view.getTag();
    } else {
        view = layoutInflater.inflate(R.layout.sample_adapter, parent, false);
        holder = new ViewHolder(view);
        view.setTag(holder);
    }

    holder.txtView.setText("AndroidCoding.in");

    return view;
}

static class ViewHolder {

    @BindView(R.id.txt_view)
    TextView txtView;

    public ViewHolder(View view) {
        ButterKnife.bind(this, view);
    }
}

AndroidManifest.xml

No special permissions are required for using Butter Knife.

If you have any query on this tutorial on Android ButterKnife do let us know in the comment section below.

Do share, subscribe, comment and like our tutorials to get more interesting updates.