Android ButterKnife library is a view injection library that injects views into android activity / fragments using annotations. For example, @BindView annotation avoids using findViewById() method by automatically type casting the view element.
Not just view binding, butterknife provides lot of other useful options like binding strings, dimens, drawables, click events and lot more.
1. Adding ButterKnife Dependency
First thing you have to do is, add ButterKnife in your project by adding the below dependencies in your project’s app/build.gradle file. Once added, sync your project, you are good to go.
android {
...
// Butterknife requires Java 8.
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
}
dependencies {
implementation 'com.jakewharton:butterknife:10.2.2'
annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.2'
}2. Basic Usage
Once the dependency is added, all the butterknife annotations will be available to import.
To begin with, we’ll see how to use @BindView and @OnClick annotations.
Let’s say you have the below layout for your activity that has a TextView and a Button.
<?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_horizontal"
android:orientation="vertical">
<TextView
android:id="@+id/lbl_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enter your email"
android:textAllCaps="true" />
<EditText
android:id="@+id/input_name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btn_enter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_20"
android:text="@string/enter" />
</LinearLayout> To make the views available in the activity, we need to follow the below steps.
1. Use @BindView along with the id (R.id.lbl_title) of the view while declaring the view variable.
2. Call ButterKnife.bind(this) in onCreate() method after setContentView() is called.
That’s all, the view injection happens and no need to typecast the view variable using findViewById() method anymore. Also you can see, the click event is attached just by adding @OnClick annotation before the method. public class MainActivity extends AppCompatActivity {
@BindView(R.id.lbl_title)
TextView lblTitle;
@BindView(R.id.input_name)
EditText inputName;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// bind the view using butterknife
ButterKnife.bind(this);
}
@OnClick(R.id.btn_enter)
public void onButtonClick(View view) {
Toast.makeText(getApplicationContext(),
"You Name is: " + inputName.getText().toString(),
Toast.LENGTH_SHORT).show();
}
} 3. Using in Fragments
Using view injection in Fragment is same as Activity except the ButterKnife.bind() method changes.
In addition to target parameter, we need to pass inflated view as param.
You will also have to use Unbinder to unbind the view in onDestroyView()
becauseof the Life cycle methods of Fragment.low is the example usage of ButterKnife in Fragment.
public class MyFragment extends Fragment {
Unbinder unbinder;
@BindView(R.id.lbl_name)
TextView lblName;
@BindView(R.id.btn_enter)
Button btnEnter;
@BindView(R.id.input_name)
EditText inputName;
public MyFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate
(R.layout.fragment_my, container, false);
// bind view using butter knife
unbinder = ButterKnife.bind(this, view);
return view;
}
@Override
public void onDestroyView() {
super.onDestroyView();
// unbind the view to free some memory
unbinder.unbind();
}
} 4. Using in List Adapter
ButterKnife also can be used in list adapters too.
Below is the example of @BindView in recyclerview’s adapter class.
public class ContactsAdapter extends
RecyclerView.Adapter<ContactsAdapter.MyViewHolder> {
private List<Contact> contacts;
public class MyViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.name)
TextView name;
@BindView(R.id.mobile)
TextView mobile;
public MyViewHolder(View view) {
super(view);
// binding view
ButterKnife.bind(this, view);
}
}
public ContactsAdapter(List<Contact> contacts) {
this.contacts = contacts;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.contact_list_row, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(MyViewHolder holder,
int position) {
Contact contact = contacts.get(position);
holder.name.setText(contact.getName());
holder.mobile.setText(contact.getMobile());
}
@Override
public int getItemCount() {
return contacts.size();
}
} 5. Using with Resources – Strings,
Colors, Dimens, Drawables etc.,
In addition to binding view elements, you can also bind other resources
like strings (@BindString), colors (@BindColor), dimensions
(@BindDimen) and drawables (@BindDrawable).
Below example demonstrates multiple annotations and their usage. public class MainActivity extends AppCompatActivity {
@BindView(R.id.logo)
ImageView imgLogo;
@BindView(R.id.lbl_title)
TextView lblTitle;
@BindDrawable(R.mipmap.ic_launcher)
Drawable drawableLogo;
@BindColor(R.color.colorPrimaryDark)
int colorTitle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// bind the view using butterknife
ButterKnife.bind(this);
// setting label color
lblTitle.setTextColor(colorTitle);
// displaying logo using drawable
imgLogo.setImageDrawable(drawableLogo);
}
}
6. Adding Click Listener (Listener Binding)
We have already seen the example of @OnClick annotation, but below
are variants of function params. // click event with source view params
@OnClick(R.id.btn_enter)
public void onButtonClick(View view) {
Toast.makeText(getApplicationContext(),
"You have entered: " + inputName.getText().toString(),
Toast.LENGTH_SHORT).show();
} // click event without params
@OnClick(R.id.btn_enter)
public void onButtonClick() {
Toast.makeText(getApplicationContext(),
"You have entered: " + inputName.getText().toString(),
Toast.LENGTH_SHORT).show();
}
// click event with specific type param
@OnClick(R.id.btn_enter)
public void onButtonClick(Button button) {
Toast.makeText(getApplicationContext(),
"You have entered: " + inputName.getText().toString(),
Toast.LENGTH_SHORT).show();
} 7. Grouping Multiple Views into List & applying action
There might be scenarios where in you want to apply some action on to group of views,
like applying color, setting text or selecting all CheckBoxes at once.
This can be done very easily using ButterKnife.
All you have to do is, use @BindViews annotation to store all the views into a
List and using ButterKnife.Action() method to apply some operations on to all views.
In the below example, two actions are applied to group of TextViews.
First, the text is set from an array of strings. Second, a color is applied to all the
TextViews in the list. public class MainActivity extends AppCompatActivity {
@BindColor(R.color.colorPrimaryDark)
int colorTitle;
@BindViews({R.id.lbl1, R.id.lbl2, R.id.lbl3})
List<TextView> lblArray;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// bind the view using butterknife
ButterKnife.bind(this);
final String[] lblText = new String[]{"Cat", "Dog", "Rat"};
ButterKnife.Action<TextView> APPLY_TEXT =
new ButterKnife.Action<TextView>() {
@Override
public void apply(TextView view, int index) {
view.setText(lblText[index]);
}
};
// setting text to array of labels
ButterKnife.apply(lblArray, APPLY_TEXT);
// Applying color to group of labels
ButterKnife.Action<TextView> APPLY_COLOR =
new ButterKnife.Action<TextView>() {
@Override
public void apply(@NonNull TextView view, int index) {
view.setTextColor(colorTitle);
}
};
ButterKnife.apply(lblArray, APPLY_COLOR);
}
}
8. Annotations
Below are the list of annotations provided by ButterKnife and their usage.
|
I hope we have covered most of the ButterKnife features.
That's all folks !!
Comments
Post a Comment