Skip to content
Related Articles

Related Articles

How to Implement View Binding Inside Dialog in Android?

Improve Article
Save Article
Like Article
  • Last Updated : 06 Jan, 2022

In android, View binding is a feature that allows you to more easily write code that interacts with views. Once view binding is enabled in a module, it generates a binding class for each XML layout file present in that module. An instance of a binding class contains direct references to all views that have an ID in the corresponding layout.

What we are going to build in this article?

In this article, we will be implementing the concept of viewBinding inside a dialog box. Here is a sample video of the application which we are going to build. Note that we are going to implement this project in Java Language.

Step by Step Implementation

Step 1: Create a new project

  • Open a new project.
  • We will be working on Empty Activity with language as Java. Leave all other options unchanged.
  • You can change the name of the project at your convenience.
  • There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?  

Step 2: Navigate to Build scripts -> build.gradle(module) file and add the following piece of code in it.

buildFeatures
{
  viewBinding true
}

Click on sync now to save changes.

Step 3: Working with XML files

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<!--Relative layout as parent layout-->
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
     
      <!-- Button to show dialog-->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/bt_show"
        android:text="Show dialog"
        android:layout_centerInParent="true"
        />
 
</RelativeLayout>

 
Follow the path app > res > layout > right click > new > layout resource file and create a new file named as dialog_main.xml. Use the below code in dialog_main.xml file-

XML




<?xml version="1.0" encoding="utf-8"?>
<!--Relative layout as parent layoout-->
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 
      <!-- cardview to give view of a dialog-->
    <androidx.cardview.widget.CardView
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:cardCornerRadius="16dp"
        >
       
          <!-- Linear layout number 1-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="20dp"
            >
          
        <!--textview to show number count-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_count"
            android:textSize="64sp"
            android:textStyle="bold"
            android:text="0"
            />
           
        <!--Linear layout number 2-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="16dp"
            >
 
              <!-- minus button-->
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/bt_minus"
                android:text=" - "
                android:layout_marginEnd="4dp"
                android:layout_marginRight="4dp" />
               
              <!-- plus button-->
            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/bt_plus"
                android:text="+"
                android:layout_marginStart="4dp"
                android:layout_marginLeft="4dp" />
 
        </LinearLayout>
           
        </LinearLayout>
 
    </androidx.cardview.widget.CardView>
 
</RelativeLayout>

After executing the above code design of the dialog_main.xml file looks like this.

Step 4: Working with MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




package com.example.bindingdialog;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.View;
 
import com.example.bindingdialog.databinding.ActivityMainBinding;
import com.example.bindingdialog.databinding.DialogMainBinding;
 
public class MainActivity extends AppCompatActivity {
 
    // Initialize variables
    ActivityMainBinding binding;
    DialogMainBinding dialogMainBinding;
    Dialog dialog;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
         
          // Inflate activity main
        binding=ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
 
        binding.btShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {             
                // Inflate dialog main
                dialogMainBinding=DialogMainBinding.inflate(getLayoutInflater());  
            
                // Initialize dialog
                dialog=new Dialog(MainActivity.this);       
         
                // set background transparent
                dialog.getWindow().setBackgroundDrawable(new ColorDrawable(
                        Color.TRANSPARENT
                ));             
                // set view
                dialog.setContentView(dialogMainBinding.getRoot());
                // set listener on plus button
                dialogMainBinding.btPlus.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        // get count from text view
                        String sCount=dialogMainBinding.tvCount.getText().toString();
                        // convert into int
                        int count=Integer.parseInt(sCount);
                        // Increase count
                        ++count;
                        // set count on textview
                        dialogMainBinding.tvCount.setText(String.valueOf(count));
                    }
                });
 
                // set listener on minus button
                dialogMainBinding.btMinus.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        // get count from text view
                        String sCount=dialogMainBinding.tvCount.getText().toString();
                        // convert into int
                        int count=Integer.parseInt(sCount);
                        // check condition
                        if(count!=0)
                        {
                            // When count is not equal to 0
                            // Decrease count
                            --count;
                            // set count on text view
                            dialogMainBinding.tvCount.setText(String.valueOf(count));
                        }
                    }
                });
                // display dialog
                dialog.show();
            }
        });
    }
}

 
Here is the final output of our application.

Output: 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!