Android Custom AlertDialog

Alert dialog is a subclass of dialog class , In the previous tutorial we have seen basic example of alertDialog with title and message , If you want a custom layout in a dialog , Create a layout and add it to an AlertDialog by calling setView() on the AlertDialog.Builder instance.

Optionally you can set title ,icon ,message for the alertDialog .

XML Layout

Create XML Layout activity_main.xml , this will be set as content view for launcher Activity (MainActivity.kt) .

file : activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="30dp"
        android:orientation="vertical"
        tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="show Custom Dialog"
            android:textSize="20sp"
            android:textAllCaps="false"
            android:onClick="customAlertDialog"/>

</LinearLayout>

XML Layout For Dialog

Create XML Layout custom_layout.xml , this will be set as content view for alertDialog .

file : custom_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">


    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center"
              android:textSize="30sp"
              android:textStyle="bold"
              android:textAllCaps="true"
              android:padding="6dp"
              android:textColor="@android:color/white"
              android:background="@android:color/holo_blue_light"
              android:text="@string/signIn"/>

    <androidx.appcompat.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/userName"
            android:hint="@string/hint_username"
            android:layout_marginTop="16dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:layout_marginBottom="4dp"/>

    <androidx.appcompat.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/password"
            android:inputType="textPassword"
            android:hint="@string/hint_password"
            android:layout_marginTop="16dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:layout_marginBottom="4dp"/>


    <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:layout_marginTop="6dp"
            android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/cancel"
                android:text="@string/cancel"/>

        <androidx.appcompat.widget.AppCompatButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/login"
                android:text="@string/login"/>

    </LinearLayout>


</LinearLayout>

Activity

file : MainActivity.kt

package com.tutorialsbuzz.customalertdialog

import android.content.Context
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.custom_layout.view.*

class MainActivity : AppCompatActivity() {

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

    fun customAlertDialog(view: View) {
        val builder: AlertDialog.Builder = AlertDialog.Builder(this@MainActivity)
        val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val customView = inflater.inflate(R.layout.custom_layout, null, false)

        builder.setView(customView)

        val alertDialog: AlertDialog = builder.create()
        alertDialog.show()

        customView.cancel.setOnClickListener({
            alertDialog.dismiss()
        })

        customView.login.setOnClickListener({
            Toast.makeText(this@MainActivity, customView.userName.text, Toast.LENGTH_SHORT).show()
            alertDialog.dismiss()
        })
    }
}

DOWNLOAD CODE