Sitemap
Open in app

Sign in

Medium Logo
Write
Search

Sign in

Abhishek Pathak

Abhishek Pathak

Associate Director @ UBS | 12 Years in Software Engineering | Mobile Architecture | Tech Leader, Mentor & Writer

Mastering in Dialogs in Android

Abhishek Pathak
4 min readAug 1, 2023

Step 1: Implement xml of activity

<?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"
    android:padding="20dp"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnDelete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#C32828"
        android:text="Delete"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnSave"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#2C850C"
        android:text="Save"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnDelete" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnLoginForm"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#0C5B85"
        android:text="Show login form"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnSave" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnSelectLanguages"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#810C85"
        android:text="Select languages"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnLoginForm" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnSelectSkills"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#0C8555"
        android:text="Select Skills"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnSelectLanguages" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnRegister"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#850C2E"
        android:text="Registration form"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnSelectSkills" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnSelectBirthday"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#100C85"
        android:text="Select your Birthday"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnRegister" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnPartyTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#FF3D00"
        android:text="Select your party time"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnSelectBirthday" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btnBottomSheetDialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#001AFF"
        android:text="About me"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnPartyTime" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 2: Implement Activity Main

package com.learning.dialogs

import android.annotation.SuppressLint
import android.app.DatePickerDialog
import android.app.TimePickerDialog
import android.os.Bundle
import android.view.Gravity
import android.widget.DatePicker
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomsheet.BottomSheetDialog
import com.learning.dialogs.databinding.AboutMeBinding
import com.learning.dialogs.databinding.ActivityMainBinding
import com.learning.dialogs.databinding.LoginFormBinding
import java.util.*

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initView()
    }

    private fun initView() {
        binding.btnDelete.setOnClickListener {
            openConfirmationDialog(
                getString(R.string.delete),
                getString(R.string.message_delete),
                getString(R.string.deleted)
            )
        }
        binding.btnSave.setOnClickListener {
            openConfirmationDialog(
                getString(R.string.save),
                getString(R.string.data_save),
                getString(R.string.saved)
            )
        }
        binding.btnLoginForm.setOnClickListener {
            showLoginForm()
        }
        binding.btnSelectLanguages.setOnClickListener {
            selectLanguages()
        }
        binding.btnSelectSkills.setOnClickListener {
            selectSkills()
        }
        binding.btnRegister.setOnClickListener {
            val signUp = SignUpDialog()
            signUp.show(supportFragmentManager, "SignUpDialog")
        }
        binding.btnSelectBirthday.setOnClickListener {
            selectBirthday()
        }
        binding.btnPartyTime.setOnClickListener {
            selectPartyTime()
        }
        binding.btnBottomSheetDialog.setOnClickListener {
            showBottomSheetDialog()
        }
    }

    private fun showBottomSheetDialog() {
        val dialog = BottomSheetDialog(this)
        val bindingBottomSheetDialog = AboutMeBinding.inflate(layoutInflater)
        dialog.setContentView(bindingBottomSheetDialog.root)
        dialog.show()
    }

    @SuppressLint("SetTextI18n")
    private fun selectPartyTime() {
        val calendar = Calendar.getInstance()
        val hour = calendar.get(Calendar.HOUR_OF_DAY)
        val min = calendar.get(Calendar.MINUTE)

        val timePicker = TimePickerDialog(
            this,
            { _, selectedHour, selectedMinute ->
                binding.btnPartyTime.text = "Time :  $selectedHour : $selectedMinute"
            }, hour, min,
            true
        )
        timePicker.show()
    }

    @SuppressLint("SetTextI18n")
    private fun selectBirthday() {
        val calendar = Calendar.getInstance()
        val year = calendar.get(Calendar.YEAR)
        val month = calendar.get(Calendar.MONTH)
        val day = calendar.get(Calendar.DAY_OF_MONTH)

        val datePicker = DatePickerDialog(
            this,
            { _: DatePicker, selectedYear: Int, selectedMonth: Int, selectedDay: Int ->
                binding.btnSelectBirthday.text =
                    "Date : ${selectedMonth + 1} - $selectedDay -$selectedYear"
            }, year, month, day
        )
        datePicker.show()
    }

    private fun selectSkills() {
        val skills = arrayOf(
            "Java",
            "Kotlin",
            "C",
            "C++",
            "C#",
            "Python",
            "Pearl",
            "Groovy",
            "Html",
            "Swift",
            "React"
        )

        val checkedItems = BooleanArray(skills.size) { false }
        checkedItems[1] = true
        checkedItems[2] = true

        val builder = AlertDialog.Builder(this).apply {
            setIcon(R.drawable.ic_android_black_24dp)
            setTitle("Select your skills")
            setMultiChoiceItems(skills, checkedItems) { dialog, position, checked ->
                checkedItems[position] = checked
            }

            setPositiveButton("Done") { dialog, _ ->
                val output = StringBuilder("Selected skills are \n")

                for (i in checkedItems.indices) {
                    if (checkedItems[i]) {
                        output.append("${skills[i]}\n")
                    }
                }
                showToast(output.toString())
                dialog.dismiss()
            }
        }

        val dialog = builder.create()
        dialog.setCancelable(false)
        dialog.show()
    }

    private fun selectLanguages() {
        val langauges = arrayOf(
            "English",
            "Hindi",
            "Chinese",
            "Bhojpuri",
            "Spanish",
            "French",
            "Madrasi",
            "Roman",
            "Italian",
            "Japanese"
        )

        val builder = AlertDialog.Builder(this).apply {
            setIcon(R.drawable.ic_android_black_24dp)
            setTitle("Select your native language")
            setSingleChoiceItems(langauges, 0) { dialog, position ->
                val selectedLanguages = langauges[position]
                showToast("Selected languages are $selectedLanguages")
                dialog.dismiss()
            }
        }
        val dialog = builder.create()
        dialog.setCancelable(false)
        dialog.show()
    }

    private fun showLoginForm() {
        val dialogBinding: LoginFormBinding = LoginFormBinding.inflate(layoutInflater)

        val builder = AlertDialog.Builder(this).apply {
            setView(dialogBinding.root)
            setCancelable(false)
        }

        val dialog = builder.create()
        dialog.window?.setGravity(Gravity.CENTER)
        dialogBinding.btnCancel.setOnClickListener { dialog.dismiss() }
        dialogBinding.apply {
            btnLogin.setOnClickListener {
                val email = edEmail.text.toString()
                val password = edPassword.text.toString()

                if (email == "9599652867" && password == "admin") {
                    showToast("login success")
                    dialog.dismiss()
                } else {
                    showToast("Login failed!!")
                }
            }
        }
        dialog.show()

        /*val params = dialog.window?.attributes
        params?.height = WindowManager.LayoutParams.MATCH_PARENT
        params?.width = WindowManager.LayoutParams.MATCH_PARENT
        dialog.window?.attributes = params*/
    }

    private fun openConfirmationDialog(title: String, message: String, toastMessage: String) {
        val builder = AlertDialog.Builder(this)
        builder.apply {
            setTitle(title)
            setMessage(message)
            setPositiveButton("Confirm") { _, _ ->
                showToast(toastMessage)
            }
            setNegativeButton("Cancel") { _, _ ->
                showToast("Confirmed as cancel")
            }
        }

        val alertDialog: AlertDialog = builder.create()
        alertDialog.setCancelable(false)
        alertDialog.show()
    }

    private fun showToast(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_SHORT).show()
    }
}

Step 3: Login form UI

Get Abhishek Pathak’s stories in your inbox
Join Medium for free to get updates from this writer.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="15dp"
    android:padding="15dp"
    app:cardBackgroundColor="#CAF8F7"
    app:cardCornerRadius="40dp"
    app:cardElevation="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/ed_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter email"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/ed_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter password"
            app:layout_constraintTop_toBottomOf="@+id/ed_email" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="#C32828"
            android:text="Cancel"
            android:textColor="@color/white"
            android:textSize="30sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/btnLogin"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ed_password" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="#2C850C"
            android:text="Login"
            android:textColor="@color/white"
            android:textSize="30sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/btnCancel"
            app:layout_constraintTop_toBottomOf="@+id/ed_password" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Step 4: Dialog fragments

package com.learning.dialogs

import android.os.Bundle
import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.view.WindowManager
import android.widget.Toast
import androidx.fragment.app.DialogFragment
import com.learning.dialogs.databinding.SignUpFormBinding

class SignUpDialog : DialogFragment() {

    private lateinit var binding: SignUpFormBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = SignUpFormBinding.inflate(layoutInflater, container, false)
        binding.btnLogin.setOnClickListener {
            register()
        }
        return binding.root
    }

    private fun register() {
        Toast.makeText(context, "Registered successfully!!", Toast.LENGTH_SHORT).show()
    }

    override fun onResume() {
        super.onResume()

        val params = dialog?.window?.attributes
        params?.height = WindowManager.LayoutParams.MATCH_PARENT
        params?.width = WindowManager.LayoutParams.MATCH_PARENT
        dialog?.window?.attributes = params
    }

    override fun onStop() {
        super.onStop()
        Log.i("tag", "Dialog finished!!")
    }

}

SignUp form xml now

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="15dp"
    android:padding="15dp"
    app:cardBackgroundColor="#CAF8F7"
    app:cardCornerRadius="40dp"
    app:cardElevation="10dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_baseline_login_24" />

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/ed_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter email"
            app:layout_constraintTop_toBottomOf="@+id/img" />

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/ed_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter name"
            app:layout_constraintTop_toBottomOf="@+id/ed_email" />

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/ed_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter mobile no"
            app:layout_constraintTop_toBottomOf="@+id/ed_name" />

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/ed_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter password"
            app:layout_constraintTop_toBottomOf="@+id/ed_mobile" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/btnLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="#2C850C"
            android:text="Register"
            android:textColor="@color/white"
            android:textSize="30sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/ed_password" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

About me xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    android:elevation="10dp"
    android:padding="50dp"
    app:cardBackgroundColor="#DAF6F6"
    app:cardCornerRadius="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp">

        <androidx.cardview.widget.CardView
            android:id="@+id/cardImage"
            android:layout_width="150dp"
            android:layout_height="150dp"
            app:cardBackgroundColor="@color/white"
            app:cardCornerRadius="150dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <androidx.appcompat.widget.AppCompatImageView
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:cropToPadding="true"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/profileee" />
        </androidx.cardview.widget.CardView>

        <TextView
            android:id="@+id/txtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginRight="5dp"
            android:fontFamily="casual"
            android:gravity="center_vertical|start"
            android:padding="5dp"
            android:text="Abhishek Pathak"
            android:textColor="@color/black"
            android:textSize="25sp"
            android:textStyle="bold"
            app:layout_constraintStart_toEndOf="@+id/cardImage"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txtEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            android:fontFamily="casual"
            android:gravity="center_vertical|start"
            android:padding="5dp"
            android:text="myofficework000@gmail.com"
            android:textColor="@color/black"
            android:textSize="22sp"
            android:textStyle="bold"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/cardImage" />


        <TextView
            android:id="@+id/txtAbout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            android:fontFamily="casual"
            android:gravity="center_vertical|start"
            android:padding="5dp"
            android:text="I am an Android Developer, passionate about building great apps."
            android:textColor="@color/black"
            android:textSize="22sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txtEmail" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Dialog
Android
Alert Dialog Android
Android App Development

--

--

Abhishek Pathak
Abhishek Pathak

Written by Abhishek Pathak

1.1K followers
11 following

Associate Director @ UBS | 12 Years in Software Engineering | Mobile Architecture | Tech Leader, Mentor & Writer

Help

Status

About

Careers

Press

Blog

Store

Privacy

Rules

Terms

Text to speech