Part 1 – Activity & Fragment

Watch the next part

In this tutorial, I will explain how to use Android View Binding in activities and fragments, and how it’s different from Data Binding, findViewById, Kotlin’s synthetic properties, and Butterknife.

Show less

MainActivity.ktactivity_main.xmlExampleFragment.ktfragment_example.xmlfragment_example.xml (land)include_layout.xml

package com.codinginflow.viewbindingexample

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.codinginflow.viewbindingexample.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.textView1.text = "View Binding"
        binding.textView2.text = "is cool"

        binding.buttonOpenFragment.setOnClickListener {
            openFragment()
        }
    }

    private fun openFragment() {
        supportFragmentManager.beginTransaction()
            .add(R.id.fragment_container, ExampleFragment())
            .addToBackStack(null)
            .commit()
    }
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_view_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="TextView 1" />

        <TextView
            android:id="@+id/text_view_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="TextView 2" />

        <Button
            android:id="@+id/button_open_fragment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Open fragment" />

    </LinearLayout>

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

package com.codinginflow.viewbindingexample

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.codinginflow.viewbindingexample.databinding.FragmentExampleBinding

class ExampleFragment : Fragment() {
    private var _binding: FragmentExampleBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        _binding = FragmentExampleBinding.inflate(inflater, container, false)

        binding.fragmentTextView1.text = "View Binding"
        binding.fragmentTextView2?.text = "works in fragments"
        binding.includeLayout.includeTextView1.text = "and with"
        binding.includeLayout.includeTextView2.text = "include layouts"

        return binding.root
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:colorBackground"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/fragment_text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Fragment TextView 1" />

    <TextView
        android:id="@+id/fragment_text_view_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Fragment TextView 2" />

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

</LinearLayout>

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:colorBackground"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/fragment_text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Fragment TextView 1" />

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

</LinearLayout>

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/include_text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Include TextView 1" />

    <TextView
        android:id="@+id/include_text_view_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Include TextView 2" />

</LinearLayout>