Kotlin Synthetic Binding || A new way to bind UI components

 

Kotlin Synthetic Binding :

Kotlin synthetic binding makes it much simpler and easier to bind views in your code. It has a easy to implement interface and is supported in Kotlin.

We declare id for the components and the id is the only aspect we make use in the synthetic binding we previously seen different ways of binding data when compared to them this is much simpler and easier.

We need not provide any declarations, class files all the related things are handled by Kotlin  synthetic binding for us isn’t it cool let’s see an example now.

 

Kotlin Synthetic Binding Video :

Dependency’s

This is the default plugins applied when you create a Kotlin project but when you try to update from java project

apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

 

Try to use a TextView using kotlin synthetic binding

<TextView
    android:id="@+id/txtName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

 

directly access the text field

txtName.setText("Abhi")

 

by importing

 

also we can make use of button’s too and different components  used in the app development

<Button
    android:id="@+id/btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="SetText"/>

 

Set the text when button is clicked just to make sure to show synthetic binding usage

btn.setOnClickListener(View.OnClickListener {

    txtName.setText(edtText.getText().toString())
})

 

When you import individual components we can go this way

import kotlinx.android.synthetic.main.activity_main.txtName

 

When you import with ‘*’ you can use all the components in that layout

import kotlinx.android.synthetic.main.activity_main.*

 

now its also much easier to handle include layout components too.

 

<include
    layout="@layout/layout" />

 

same way import kotlin synthetic binding

import kotlinx.android.synthetic.main.layout.*

 

layout.xml :

Add the text views to set the data and button to make a click

<?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="wrap_content"
    android:orientation="vertical">


    <TextView
        android:id="@+id/txtIncludeName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="username..." />

    <TextView
        android:id="@+id/txtIncludePassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="password..." />

    <Button
        android:id="@+id/btnIncludeGo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Go"/>
</LinearLayout>

 

activity_main.xml :

Include the layout file and no more extensions required

<?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:orientation="vertical"
    tools:context=".MainActivity">

    <include
        layout="@layout/layout" />

    <TextView
        android:id="@+id/txtName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/txtEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/edtText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SetText"/>

</LinearLayout>

 

MainActivity.class

Here we will see the simple way to access the views using kotlin synthetic binding by using various functionalities like setting text to views making onClickListners and much more in real time usage.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.layout.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        //  from include layout.xml

        txtIncludeName.setText("")
        txtIncludeName.setText("")

        btnIncludeGo.setOnClickListener(View.OnClickListener {  })

        //


        // from activity_main.xml

        txtName.setText("Abhi")

        txtEmail.setText("abhi@gmail.com")

        btn.setOnClickListener(View.OnClickListener {

            txtName.setText(edtText.getText().toString())
        })

        //

    }
}

 

also in fragments, adapters we can make use of these bindings.

 

Output :

This screen depicts the usage of Kotlin synthetic binding we can see the user input is collected from the two edittext’s and append it to the textview’s when the user click on the button.

 

 

If you have any query’s on this tutorial on Kotlin synthetic binding do let us know in the comment section below.If you like this tutorial do like and share us for more interesting tutorials.