Butterknife library is view injection library for android components, use @BindView to replace findViewById() and give parameter view id layout to corresponding view component in layout. From view id the butterknife will find and recognize the view component.
Besides binding view, this library also can use to binding strings, click events listener, drawable and others. In this tutorial i will explain how to use butterknife in various components.
To add this library in the project, open app/build.gradle file, then type following dependencies on it, after you added, sync the project.
dependencies {
compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:26.0.0-alpha1'
compile 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
testCompile 'junit:junit:4.12'
}
7.Let’s change the activity_main layout file with following xml code. here we use linear layout for the parent view, in the layout we fill with 3 view components, there are : TextView with id = “mytitle”, EditText with id = “email” and Button with id = “btnsubmit”. And don't forget set some properties of the view component to make display proportional,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activityclass _vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.fahrulhidayat.tutorialbutterknife.MainActivity">
<TextView
android:id="@+id/mytitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="type your id here"
android:textAllCaps="true" />
<EditText
android:id="@+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnsubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="enter" />
</LinearLayout>
8.To make the views recognized by the @BindView in the Main activity class we must declare it with the view id (for now we have : mytitle, email and btnsubmit). use setContentView() to direct the main activity class to use layout which we have made before.You can see the declaration structure in these following code, dont forget to import the library for each component. Press alt+enter to automatically import classes needed by the component.
public class MainActivity extends AppCompatActivity {
@BindView(R.id.mytitle)
TextView myTitle;
@BindView(R.id.email)
EditText myEmail;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
9.Next we must call ButterKnife.bind(this) in onCreate() method, this code for activate the component. use setContentView() to direct the main activity class to use layout which we have made before.You can type it like these following code.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
}
10.To binding the click event listener, let’s add the program with following code. Here we use @onClick to find and recognize the button component. Below the binding we add listener onButtononClick. For this example if the button is click we use toast.maketext() to display the alert and show some text.
@OnClick(R.id.btnsubmit)
public void onButtonClick(View view) {
Toast.makeText(getApplicationContext(), "You have entered: " + myEmail.getText().toString(),
Toast.LENGTH_SHORT).show();
}
11.Let’s run this project on the phone, the result is like the following image. Here we see when the button is click, then the alert will display text according to what we type in EditText view.
1.In general way to use Butterknife for fragment is same with view, only here we must add inflated view as parameter for ButterKnife.bind() method. And also we need unbind the view in OnDestroyView() because the lifecycle method. First declaration variable and binding in main class of fragment. Then make fragment constructor below it.
public class fahrulFragment extends Fragment {
Unbinder unbinder;
@BindView(R.id.mytitle)
TextView myTitle;
@BindView(R.id.btnsubmit)
Button btnSubmit;
@BindView(R.id.email)
EditText myEmail;
public FahrulFragment() {
// constructor
}
}
2.Then add the ButterKnife.bind() method with parameters at onCreateView() method like the following code, we use variable unbinder to save the function butterknife.bind().
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.testfragment, container, false);
// bind view using butter knife
unbinder = ButterKnife.bind(this, view);
return view;
}
3.And also we need unbind the view in OnDestroyView() because the lifecycle method of the fragment, this to make sure when the apps close, bindings that have been used before is destroy. you can type the following code
@Override
public void onDestroyView() {
super.onDestroyView();
// unbind the view to free some memory
unbinder.unbind();
}
We can use @BindString for strings, @BindDrawable for drawables, @BindDimen for dimensions and @BindColor for colors. See example declaration structure for android resources below to use it on your project.
@BindView(R.id.shoplogo)
ImageView imageShop;
@BindView(R.id.your_name)
TextView yourName;
@BindDrawable(R.mipmap.ic_launcher)
Drawable applicationLogo;
@BindColor(R.color.colorPrimary)
int colorTitle;
In this tutorial I have been give you example to use ButterKnife for binding view, fragments and resources. With this library we can improve the efficiency of the code in the view declaration. So from now use this library on your project and see how much time you can spend for your family because your coding time is more efficient. In the end of this tutorial we must thank to the butterknife developers to make it open source.
Resources :
Homepage : jakewharton.github.io/butterknife/
