View Binding In Android Application - Kotlin

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.

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. 

kotlin

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.

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:gravity="center"  
  8.     android:orientation="vertical"  
  9.     tools:context="com.androidmads.kotlinsample_helloworld.MainActivity">  
  10.   
  11.     <TextView  
  12.         android:id="@+id/helloTxtView"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:text="Hello World!" />  
  16.   
  17.     <TextView  
  18.         android:id="@+id/helloAndroidExtension"  
  19.         android:layout_width="wrap_content"  
  20.         android:layout_height="wrap_content"  
  21.         android:layout_marginTop="10dp"  
  22.         android:text="Hello World!" />  
  23.   
  24.     <ImageView  
  25.         android:id="@+id/imageView"  
  26.         android:layout_width="wrap_content"  
  27.         android:layout_height="wrap_content"  
  28.         android:layout_marginTop="10dp"  
  29.         app:srcCompat="@mipmap/ic_launcher" />  
  30.   
  31. </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.

  1. // Hello Program for Kotlin Android Extension   
  2. // helloAndroidExtension is the id of the TextView  
  3. 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.

  1. package com.androidmads.kotlinsample_helloworld  
  2.   
  3. import android.support.v7.app.AppCompatActivity  
  4. import android.os.Bundle  
  5. import android.widget.TextView  
  6. import android.widget.Toast  
  7. import kotlinx.android.synthetic.main.activity_main.*;  
  8.   
  9. class MainActivity : AppCompatActivity() {  
  10.   
  11.     // Declaration  
  12.     var helloTextView: TextView? = null  
  13.   
  14.     override fun onCreate(savedInstanceState: Bundle?) {  
  15.         super.onCreate(savedInstanceState)  
  16.         setContentView(R.layout.activity_main)  
  17.   
  18.         // Initialization  
  19.         helloTextView = findViewById(R.id.helloTxtView) as TextView  
  20.         // Assigning data to TextView in runtime  
  21.         helloTextView!!.text = "Hello Kotlin!";  
  22.   
  23.         // Click Listener in Kotlin  
  24.         helloTextView!!.setOnClickListener({  
  25.             Toast.makeText(applicationContext, "Hello TextView Clicked",  
  26.                     Toast.LENGTH_LONG).show();  
  27.         })  
  28.   
  29.         // Hello Program for Kotlin Android Extension  
  30.         helloAndroidExtension.text = "Example for Kotlin Android Extension";  
  31.   
  32.         imageView.setImageResource(R.mipmap.ic_launcher_round)  
  33.     }  
  34. }  

Download Code

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


Similar Articles