The new generation of declaring views (View Binding — Kotlin)

Most of the developers out there are using kotlin and most of them still using or used to use the kotlin synthetics to interact with UI elements. However, with the latest update of kotlin (version 1.4.20) this extension is deprecated that why you might have noticed a warning about it.

Synthetic deprecation warning

So, you might be thinking what are you gonna do now? Should you start using again the old fashion java style findViewById()? This is not necessary as google has introduced the view binding as part of Android Jetpack.

Let’s have some fun and jump into the implementation part:

STEP 1:

First, you have to add in you module Gradle file under the android section the following code.

buildFeatures {
    viewBinding true
}

Once you enable the view binding an auto-generated file will be created with the name of your XML file and the word Binding at the end. Please note that you can skip the creation of the auto-generated file by setting tools:viewBindingIgnore="true" at the root layout of your XML file.

STEP 2:

At this step, you are ready to start using view binding. The only thing you have to do is to create your layout in the XML file of your activity/fragment.

NOTE: In case you don’t set id for any of your views in the XML file the auto-generated class will not create any reference to that view.

STEP 3:

Now it’s time to access views from your activity. Inside the onCreate() you have to get an instance of your Binding class and then set the root of that class into setContentView() method. Have a look at the following example:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)
}

Now you can use the binding variable to access any view in your activity_layout.xml file as follow:

//welcomeMessage is the id of TextView in activity xml
binding.welcomeMessage.text = getString(R.string.activity_binding_message)

To access views from your fragment you can use either the inflate() method the same way as in the activity on step 3 or the bind() method.

WAY A (using inflate()):

In case you want to use the inflate() method, you have to get the instance of Fragment Binding class inside the onCreateView() method. The only difference from what you did in the activity is that because the onCreateView() method returns a view you have to return the root of your view.

Example:

Old onCreateView() method body:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    return inflater.inflate(R.layout.fragment_binding, container, false)
}

The onCreateView() method body using view binding inflate() method:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
    binding = FragmentBindingBinding.inflate(layoutInflater)
    return binding.root
}

WAY B ((using bind()):

You want to use the bind() method if your view is already inflated. In that case, you have to get the instance of your binding class inside the onViewCreated () method by passing the view into bind() method.

Example:

override fun onViewCreated(view: View, savedInstanceState: Bundle?){
    super.onViewCreated(view, savedInstanceState)
    binding = FragmentBindBinding.bind(view)
}

After you get the instance of your binding class either with WAY A or WAY B you can access your layout views using the binding variable as follow:

//welcomeMessage is the id of TextView in activity xml
binding.welcomeMessage.text = getString(R.string.activity_binding_message)

IMPORTANT NOTE: For Fragments make sure that you are clearing the instance to binding class by setting it equal to null.

As a reference, I have used the official google documentation which you can visit for more information at https://developer.android.com/topic/libraries/view-binding

Example project: https://github.com/r1n1os/ViewBindingExample