View Binding In Android Application - Kotlin

In my previous articles, we learned the basics of Kotlin and getting started with Android application development with Kotlin. If you are new to Kotlin, read my previous articles.

• Basics of Kotlin
• Getting Started with Kotlin Android

In this article, we will learn about Kotlin Android Extensions. We already know Kotlin was announced as a first class language for Android by Google in Google I/O 2017. Kotlin Android Extensions is an important Kotlin plugin that is similar to ButterKnife. It will allow recovering Views in Android.

Coding Part

I have split this article into 3 steps as in the following.

Step 1: Creating a New Android Project with Kotlin in Android Studio.

Step 2: Setting Up the Library for Android Projects.

Step 3: Implementing Kotlin Extensions in Android Applications.

Step 1: Creating a New Android Project with Kotlin in Android Studio

By default, Android Studio 3.0 has the checkbox for Kotlin Support for your Android Application. Create a new project in Android Studio, check the Kotlin support, and start as usual with Android Studio 3.0. 

For migrating Java Android Project to Kotlin Android Project, you can do the following processes.

Configuring Kotlin

Kotlin support can be configured by selecting Tools à Kotlin à Configure Kotlin. Then, Click “Sync Now”. This step is applicable to the Android Studio pre-versions of 3.0. The best way is you must update your Android Studio.

In Android Studio 3.0, by default, you have Kotlin Activity. For Android Studio with versions lower than 3.0, users can convert their Java activity into Kotlin Activity.

Open Quick Search or Click Ctrl + Shift + A for Windows Users and Search and Select “Convert Java to Kotlin” or simply Select Ctrl + Shift + Alt + K. 

Step 2: Setting Up the Library for Android Projects

In this step, we will learn how to setup Kotlin Extensions in Android Application. You have to add the following line in your project’s app-level build.gradle file.

• apply plugin:'com.android.application'
• apply plugin:'kotlin-android'
• apply plugin:'kotlin-android-extensions'

Then click “Sync Now” to add the library.

Step 3: Implementing Kotlin Extensions in Android Application

Create a new layout file in res folder, name it activity_main.xml, and paste the following codes.

<?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:gravity="center"
    android:orientation="vertical"
    tools:context="com.androidmads.kotlinsample_helloworld.MainActivity">

    <TextView
        android:id="@+id/helloTxtView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <TextView
        android:id="@+id/helloAndroidExtension"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Hello World!" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        app:srcCompat="@mipmap/ic_launcher" />

</LinearLayout>

Open your Activity file with .kt extension and here, I have opened my MainActivity.kt file. To implement the extension, add the following line to import the library.

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

Here, activity_main is your layout’s name. The following code refers to  how to use the Kotlin Extension. Here, helloAndroidExtension is the ID of the TextView in your layout and clicking listener for this TextView is done as in below code.

// Hello Program for Kotlin Android Extension
// helloAndroidExtension is the id of the TextView
helloAndroidExtension.text = "Example for Kotlin Android Extension";

We can apply the same Approach with ImageView by assigning ImageSource from Drawable folder and we see the code below.

imageView.setImageResource(R.mipmap.ic_launcher_round)

Full Code

You can find the full code implementation below.

package com.androidmads.kotlinsample_helloworld

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*;

class MainActivity : AppCompatActivity() {

    // Declaration
    var helloTextView: TextView? = null

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

        // Initialization
        helloTextView = findViewById(R.id.helloTxtView) as TextView
        // Assigning data to TextView in runtime
        helloTextView!!.text = "Hello Kotlin!";

        // Click Listener in Kotlin
        helloTextView!!.setOnClickListener({
            Toast.makeText(applicationContext, "Hello TextView Clicked",
                    Toast.LENGTH_LONG).show();
        })

        // Hello Program for Kotlin Android Extension
        helloAndroidExtension.text = "Example for Kotlin Android Extension";

        imageView.setImageResource(R.mipmap.ic_launcher_round)
    }
}

Download Code

You can download the full source for this tutorial from GitHub. If you like this article, please star it in GitHub.