Skip to main content

DataBinding - ViewBinding in Android

ViewBinding is a feature that allow you to write code more easily.
 First we will see an App without ViewBinding then we will enable ViewBinding in the App .Screenshot of our app is , it is asimple application when we  click the Button score Will Increase


You can also see this tutorial in my youtube channel



you can download source code of this project from GitHub

Layout file is
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        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"
        tools:context=".MainActivity">
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Score"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <TextView
            android:id="@+id/tv_score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="0"
            android:textSize="18sp"
            android:textStyle="bold"
            android:typeface="normal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/text1" />
        <Button
            android:id="@+id/bt_play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:text="Play"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

 </androidx.constraintlayout.widget.ConstraintLayout>
Mainavtivity.kt

package com.arun.androidtutsforu.demonavgraphtest
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView
class MainActivity : AppCompatActivity() {
    private var score =0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val tvScore = findviewById<TextView>(R.id.tv_score)
        val btPlay = findViewById<Button>(R.id.bt_play)
        btPlay.setOnClickListener {
            tvScore.text = (score++).toString()
        }

    }
}
 We use findViewById to reference views in our Activity , every time we use  findViewById android has to traverse the view hierarchy in runtime to find the view , when we use bigger apps with deep view hierarchy it can slow down our app

when we use DataBinding , It will connect our Activity to layout at compile time. The Compiler will create a binding class from our xml layout at compile time . Activity can now reference this binding class directly to access views . Name of the binding class will be same as the layout name with Binding at the end . Name of every view will be same as its id in the xml

To enable DataBinding first we need to enable it in our module level
build.gradle file

  buildFeatures{
    dataBinding true
  }
then convert our layout to DataBinding layout  . In dataBinding layouts, <layout> is the root element .You can convert your layout  easily to data binding layout in Android studio . Click on the root element press alt enter in keyboard , context menu will open ,in the context menu click convert to data binding layout. Your layout will be converted to data binding layout.
our new layout file is
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
    <data>
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Score"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <TextView
            android:id="@+id/tv_score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="0"
            android:textSize="18sp"
            android:textStyle="bold"
            android:typeface="normal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/text1" />
        <Button
            android:id="@+id/bt_play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:text="Play"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
You can see that our root element is changed to <layout> . Next build the app . The compiler will create a binding class for us. Name of the binding class will be ActivityMainBinding(because name of our xml layout file is activity_main). Now we can use the instance of this binding class to reference each view . Name of every view will be same as its id in the xml layout . Id of our button is bt_play and textview is tv_score.
Now we can reference both using our binding object
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.btPlay
        binding.tvScore
we don't need to use findViewById anymore. ViewBinding help us to call the views quickly and easily. It also simplifies the code.
MainActivity.kt 
package com.arun.androidtutsforu.demonavgraphtest
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.TextView
import com.arun.androidtutsforu.demonavgraphtest.databinding.ActivityMainBinding
class MainActivity : AppCompatActivity() {
    private var score =0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.btPlay.setOnClickListener {
            binding.tvScore.text = (score++).toString()
        }

    }
}

you download dource code from GitHub

https://github.com/arunkfedex/DemoNavGraphTest

Comments

Post a Comment

Popular posts

Android Sqlite and ListView Example

This is simple application which insert data into Sqlite database --and shows the data  from the database in a ListView ListView is not used in android Anymore . We use RecyclerView and CardView   in Android RecyclerView Demo is available on the following link http://androidtuts4u.blogspot.in/2017/04/android-recyclerview-example.html RecyclerView with CardView Demo is available on the following link http://androidtuts4u.blogspot.in/2017/09/android-card-view-example.html This  is the first Activity of application which shows data from database in listview. Register here buton will start a Registration Activity. Submit button will add data to database and show it in the ListView of MainActivity. Update can be performed by clicking ListView items.     you can download the source code of this project from  google drive   https://drive.google.com/folderview?id=0BySLpWhqmbbdS0dtT1R2TXdBWEE&usp=sharing click on the abov...
195 comments
Read more

ViewModel with Jetpack Compose

  Compose uses remember API to store object in memory. Stored value is returned during recomposition . remember helps us retain data across recompostion , but when configuration changes happen all stored values are lost . One way to overcome this is to use rememberSaveable . rememberSaveable saves any value that can be saved in a Bundle , so it will survive configuration changes.  But when we are using lot of data , for example a list we can cannot use a rememberSavble beacuse there is limit on amount of data that can be stored in Bundle . So we use ViweModel . ViewModel provide the ui state and access to the business logic located in other layers of the app. It also survives configuration changes. ViewModel handles events coming from the UI or other layers of the app and updates the state holder based on the events. We need to add the following dependency in our app level build.gradle to use ViewModel implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1" F...
Post a Comment
Read more

Hardware information on Windows 10

 To know hardware information in Winows 10  1. Go to control panel and select System and security    2.click on Administrative tools inside System and Security 3.Click on System information in Administrative tools 4.Now you can see your pc's hardware and software information >>> if you want to know more detailed information about your Processor ,Ram ,motherboard it is better to use 3rd party applications like  CPU-Z .  Download   CPUZ   . 
Post a Comment
Read more