DEV Community

Cover image for View Binding in Android.
Boris Ochieng
Boris Ochieng

Posted on • Edited on

View Binding in Android.

On the 23rd of November 2020, Google announced that Kotlin Synthetics had been deprecated where the findViewById() method was used to find an existing view in your XML layout by it's android:id attribute. Enter View Binding.

If you're like me, you often have to go back to the official documentation and read on how to integrate this into your project. I wrote this article as a quick reference for future me and probably you😉.

Enable view binding.

In your tool window bar, switch to Project View and under Gradle Scripts, in the app module, select the build.gradle file and set the viewBinding to true as shown below:

android {
    ...
    buildFeatures {
        viewBinding = true
    }
}
Enter fullscreen mode Exit fullscreen mode

Behind the scenes, a binding class is generated for all the XML layout files. Each binding class holds references to the root view and all views that possess an ID. The name of the binding class comes from the name of the XML file. The name is changed to a special format called Pascal case and the word "Binding" is added to the end.
Suppose you have a layout file named activity_main.xml;

<RelativeLayout ...>
  <TextView android:id="@+id/hello" />
</RelativeLayout>
Enter fullscreen mode Exit fullscreen mode

The generated class will be named ActivityMainBinding with a TextView named hello.

Use view binding in activities.

In the MainActivity.kt file, add the following code or adjust accordingly:

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    val view = binding.root
    setContentView(view)
}
Enter fullscreen mode Exit fullscreen mode

You can use the binding class to access any of the views now.

//change the text to "Hello World"
binding.hello.text = "Hello World"
//do something when clicked
binding.hello.setOnClickListener {
   //do something
}

Enter fullscreen mode Exit fullscreen mode

Use view binding in fragments.

Suppose you have a fragment named HelloWorld.kt with a layout file fragment_hello_world.xml. Add the following code or adjust accordingly:

private var _binding: FragmentHelloWorldBinding? = null
// This property is only valid between onCreateView and
// onDestroyView.
private val binding get() = _binding!!

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    _binding = FragmentHelloWorldBinding.inflate(inflater, container, false)
    val view = binding.root
    return view
}

override fun onDestroyView() {
    super.onDestroyView()
    _binding = null
}
Enter fullscreen mode Exit fullscreen mode

That's just about it, you can get an in depth look in the official documentation and a practical tutorial here.

Neon image

Serverless Postgres in 300ms (!)

10 free databases with autoscaling, scale-to-zero, and read replicas. Start building without infrastructure headaches. No credit card needed.

Try for Free →

Top comments (0)

Image of Stellar post

🚀 Stellar Dev Diaries Series: Episode 1 is LIVE!

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️