August 28, 2020

Custom Alert Dialog in Android

By Mohit Agrawal

Learn how to design custom alert dialog in the android

Introduction

In one of my recent android tutorials, I have shown How to implement native alert dialog but the default design is a little boring. So today we will see how to design some cool looking custom alert dialog in android.

Once you understand the basics then you will be able to design any type of custom alert dialog by yourself. If you notice, most of the android applications use there own custom UI designs because everyone wants to look different 👨🏻‍🎤.

What we will build?

Before starting the actual implementation, let me show you first that what we are going to design in this android tutorial.

custom alert android 1

Implementation

To achieve this type of custom dialog I am using an XML approach. First I have designed the required UI design in the separate XML file then I created a custom reusable Dialog class.

I am going to explain everything step by step. Please follow the below instructions.

1 STEP: Create a new android project. If you have an existing android project then that is also completely fine.

2 STEP: Let’s design the UI part first. For the tutorial purpose, I am making it as simple as possible but I hope at the end of this tutorial you will be able to design any type of custom alert as per your project need 🤩.

Create a new layout file and name it “dialog_layout.xml”. Now copy the below code and paste it.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffffff">

    <ImageView
        android:id="@+id/a"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#0097a7"
        android:gravity="center"
        android:scaleType="center"
        android:src="@android:drawable/ic_dialog_alert" />

    <TextView
        android:id="@+id/text_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/a"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="20dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="20dp"
        android:gravity="center_horizontal"
        android:textColor="#ff000000"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_dialog"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_below="@+id/text_dialog"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:gravity="center_vertical|center_horizontal"
        android:background="#0097a7"
        android:text="OK"
        android:textColor="#ffffffff" />

</RelativeLayout>

It is a simple layout design. You must have noticed that I am using Relative Layout as the parent and inside it, I am using only three basic elements as children.

You can also Linear Layout if you want. In fact I will strongly recommend you to play with different designs so that you can learn more.

The things you should note down in this step is the id for the Button and the TextView. Because We will be using it in the coming steps.

3 STEP: We will create a new reusable class for our custom alert. This will make our custom alert dialog a reusable component.

Create a new Kotlin class and name it CustomAlert.kt. Copy-paste the below code inside it.

package com.example.customdialog

import android.app.Activity
import android.app.Dialog
import android.view.View
import android.view.Window
import android.widget.Button
import android.widget.TextView


class CustomAlert {

    fun showDialog(activity: Activity?, msg: String?) {
        val dialog = Dialog(activity!!)
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE)
        dialog.setCancelable(false)
        dialog.setContentView(R.layout.dialog_layout)
        val text = dialog.findViewById<View>(R.id.text_dialog) as TextView
        text.text = msg
        val dialogButton: Button = dialog.findViewById<View>(R.id.btn_dialog) as Button
        dialogButton.setOnClickListener {
            dialog.dismiss()
        }
        dialog.show()
    }
}

As you can see in the above class I have defined a very simple method showDialog(). It takes two parameters.

  • activity: Here you need to pass the context of the activity where you are calling this method.
  • msg: This is a text message which you can display in the alert dialog.

To set our custom alert dialog design dialog_layout.xml use setContentView() property.

dialog.setContentView(R.layout.dialog_layout)

Use findViewById() property to find the views (TextView and Button) inside the design_layout.

4 STEP: We have already designed our custom alert dialog now in this step we will design a button which can trigger the alert.

Open the activity_main.xml and copy paste the simple UI for a button.

<?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">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Alert"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Now open the MainActivity.kt and paste the below code.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

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

        button.setOnClickListener {
            val alert = CustomAlert()
            alert.showDialog(this,"Welcome to Warmodroid !!!")
        }
    }
}

That’s all folks. Now run your project and play with your custom alert dialog in android 😎.

Demo

Conclusion

Help me to grow our YouTube Channel: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!