Add View Binding to Replace findViewById

View Binding initializes every UI element which has an id in the layout files and exposes them to the developers through a generated class.

If you think writing findViewById in every activity or fragment should not be a developer's job then you are reading the right article.

Does the code inside the activity or fragment start like this?

Manual UI elements initialization

// Initialize the UI elements
final ConstraintLayout constraintLayout = findViewById(R.id.coordinatorLayout);
final TextView responseTextView = findViewById(R.id.responseTextView);
final BottomAppBar bottomAppBar = findViewById(R.id.bottomAppBar);
final FloatingActionButton fab = findViewById(R.id.fab);
final RecyclerView productRecyclerView = findViewById(R.id.productRecyclerView);
final Button filterButton = findViewById(R.id.filterButton);
final Button sortButton = findViewById(R.id.sortButton);

Butter Knife UI elements initialization

// UI elements
@BindView(R.id.coordinatorLayout) CoordinatorLayout coordinatorLayout;
@BindView(R.id.responseTextView) TextView responseTextView;
@BindView(R.id.bottomAppBar) BottomAppBar bottomAppBar;
@BindView(R.id.fab) FloatingActionButton fab;
@BindView(R.id.productRecyclerView) RecyclerView productRecyclerView;
@BindView(R.id.filterButton) Button filterButton;
@BindView(R.id.sortButton) Button sortButton;

Doesn't this code look ugly? Even the article looks ugly by adding it to the top of the page. Without additional dependencies, Android now provides in-built support to replace findViewById in both Java and Kotlin.

Enable View Binding for the module by adding the following lines to the android block inside the module level build.gradle file.

Between Android Studio versions 3.6 and 4.0

viewBinding {
    enabled = true
}

From Android Studio version 4.0

buildFeatures {
    viewBinding true
}

Now, for an XML file with a name activity_main, a corresponding view binding class with the name ActivityMainBinding file would be generated.

The generated ActivityMainBinding class implements the ViewBinding interface to override getRoot method. The getRoot method returns the root element of the layout.

Inside the MainActivity or the activity class that is setting its content using the layout named activity_main, Our typical,

// Set the content view
setContentView(R.layout.activity_main);

changes to

// Inflate the layout
final ActivityMainBinding binding = ActivityMainBinding.inflate(getLayoutInflater());
// Set the content view
setContentView(binding.getRoot());

Calling inflate method inflates the activity_main layout and internally calls bind method where it initializes the views available in the layout. 

@NonNull
public static ActivityMainBinding inflate(@NonNull LayoutInflater inflater) {
  return inflate(inflater, null, false);
}

@NonNull
public static ActivityMainBinding inflate(@NonNull LayoutInflater inflater,
    @Nullable ViewGroup parent, boolean attachToParent) {
  View root = inflater.inflate(R.layout.activity_main, parent, false);
  if (attachToParent) {
    parent.addView(root);
  }
  return bind(root);
}

@NonNull
public static ActivityMainBinding bind(@NonNull View rootView) {
  // The body of this method is generated in a way you would not otherwise write.
  // This is done to optimize the compiled bytecode for size and performance.
  int id;
  missingId: {
    id = R.id.activityContent;
    View activityContent = rootView.findViewById(id);
    if (activityContent == null) {
      break missingId;
    }
    ActivityContentBinding activityContentBinding = ActivityContentBinding.bind(activityContent);

    id = R.id.bottomAppBar;
    BottomAppBar bottomAppBar = rootView.findViewById(id);
    if (bottomAppBar == null) {
      break missingId;
    }

    CoordinatorLayout coordinatorLayout = (CoordinatorLayout) rootView;

    id = R.id.fab;
    FloatingActionButton fab = rootView.findViewById(id);
    if (fab == null) {
      break missingId;
    }
    return new ActivityMainBinding((CoordinatorLayout) rootView, activityContentBinding,
        bottomAppBar, coordinatorLayout, fab);
  }
  String missingId = rootView.getResources().getResourceName(id);
  throw new NullPointerException("Missing required view with ID: ".concat(missingId));
}

If you observe the generated class, inflate method is overloaded twice. One takes LayoutInflater and the other one takes additional parameters ViewGroup, attachToParent.

Does the second overloaded method look familiar? It is similar to inflating layout inside a fragment. This is the method, we use to perform View Binding inside a Fragment. Currently inside onCreateView,

return inflater.inflate(R.layout.main_fragment, container, false)

changes to

binding = MainFragmentBinding.inflate(inflater, container, false);
return binding.getRoot();

The only pain point with View Binding in fragments is that we need to set the binding variable to null when the fragment is destroyed.

@Override
public void onDestroyView() {
    super.onDestroyView();
    binding = null;
}

The binding variable holds references to all the views in the layout. The generated ViewBinding class exposes the variables by setting them to public.

@NonNull
private final CoordinatorLayout rootView;

@NonNull
public final ActivityContentBinding activityContent;

@NonNull
public final BottomAppBar bottomAppBar;

@NonNull
public final CoordinatorLayout coordinatorLayout;

@NonNull
public final FloatingActionButton fab;

For example, we can set listeners to the fab button which has an id fab as shown below.

Without View Binding:

// Initialize the UI element
final FloatingActionButton fab = findViewById(R.id.fab);
// Set a click listener
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Show a snack message
        showSnack(getString(R.string.clicked_button_fab));
    }
});

With View Binding:

// Set a click listener
binding.fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Show a snack message
        showSnack(getString(R.string.clicked_button_fab));
    }
});

View Binding provides null safety and type safety. The fab button returned by the binding variable is of type FloatingActionButton. As soon as an id is removed, the compiler shows an error that the symbol cannot be resolved and there is no need to build the project to see which keys are removed.

In case, we have include tags that add nested layouts then simply add an id to the include tag to reference the nested elements in the layout.

<include android:id="@+id/activityContent" 
    layout="@layout/activity_content"/>

This gives us access to the views available inside activity_content like responseTextView, productRecyclerView, filterButton, sortButton and we can update the text view like below.

binding.activityContent.responseTextView.setText(response);

Unlike other layout files, if we want to skip generating ViewBinding classes for some, we can always add tools:viewBindingIgnore="true" to the top view group.

The code becomes cleaner by removing the manual or butter knife initialization of UI elements in the activity or fragment. Kotin Android Extensions provide similar feature but the solution is limited to pure Kotlin Android projects.

View Binding is similar to Data Binding but doesn't provide any advanced features like binding views in the layout or two-way binding.

Popular posts from this blog

How to Read Metadata from AndriodManifest File

Metadata tags are key-value pairs and one of the decent ways to access the API keys from the libraries. They are added to the AndroidManifest.xml under the application tag and are available through the PackageManager . If you have worked with third-party libraries or even with App shortcuts, Downloadable Fonts, Firebase MLKit, you may have come across metadata tags. In the article, let’s add the metadata tags to the app module’s Manifest file and read the metadata key-values and the key-resource from a library module both in kotlin and java. Add meta-data: Add metadata to the app module's AndroidManifest.xml file under the application tag. You can add as many metadata elements as you want and you can also add metadata under the activity, service, broadcast receiver, content provider tags. <meta-data android:name= "com.gsrikar.library.LIBRARY_ACCESS_KEY" android:value= "masndfiu4er9funwikesd" /> <meta-data and
Read more

Create Assets Folder, Add Files and Read Data From It

Image
Sometimes, we need to read the data stored in the files during runtime and want to make sure the data is not tampered by the Android build system. In this article, we will take a look at how to create the assets folder using Android Studio and read the stored data from it. First, Right-click on the module name or the package name. This opens an option window where we need to select the Assets Folder option by hovering over New and then on the Folder option. Now, we will see a window where we change the folder location and the source set. Change the values if necessary otherwise keep the defaults and click Finish. It may trigger a Gradle Sync. Irrespective of the sync, the Assets folder is created and is visible in the module. Now, Right-click on the Assets folder and click on the File option by hovering over the New option. Enter the name of the file name and click Enter to create the file. The file with the name user_details.json is created under the assets folder. Add some JSON
Read more

Add Options Menu to Activity and Fragment

Image
Options Menu contains a set of primary menu items that are accessible to the user. In this article, we will take a look at how to implement the options menu in an Android Activity or a Fragment. Right click on the res directory in Android Studio and select Android Resource File option. It opens the Resource File creation modal where we need to enter the file name and select Resource Type as Menu. Clicking on OK button creates main_menu.xml under menu directory. Now add the following items to the XML file. <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/search" android:icon="@drawable/ic_search_white" android:orderInCategory="100" android:title="@string/action_title_search" app:actionViewClass="androidx.appcompat.widget.SearchView" app:showAsAction="ifRoo
Read more

How to Change Material Chip Text Size, Text Style and Font

Chips in Android is a Material Design Component used primarily for actions or choice or during filters or as an input. The attributes like textColor , textStyle and fontFamily are ignored when added to the Material Chips directly. We need to modify these values using textAppearance . <com.google.android.material.chip.Chip android:id="@+id/maleChip" style="@style/Widget.MaterialComponents.Chip.Choice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checkable="true" android:layoutDirection="locale" android:text="@string/chip_text_male" android:textAppearance="@style/AppTheme.GenderChip" android:textColor="@color/colorWhiteText" app:chipBackgroundColor="@drawable/select_chip" app:chipEndPadding="@dimen/chip_horizontal_margin" app:chipStartPadding="@dimen/chip_horizontal_margin&quo
Read more

Add Spacing to Recycler View Linear Layout Manager Using Item Decoration

Image
In this article we will learn about, item decoration in Android and how we can use it to add even spacing between the child items. A RecyclerView without spacing will look like the image below but in most cases, we want to add spacing between the items. [You can see there are no margins between the views and only elevation] A more traditional option is adding margins in the list item xml file. If we take this route, we will soon end up with uneven spacing issues with vertical margins. [There are even left, right, top, bottom margins for all the rows except the last item in the first image and in the subsequent image, the top margin for the first item is half of the other items] The best way is to add the ItemDecoration to the RecyclerView as it affects the individual items and you can have more control over them. Kotlin: /** * Add vertical, horizontal spacing to the recycler view */ class DefaultItemDecorator(private val horizontalSpacing: Int,
Read more