DEV Community

Akshay
Akshay

Posted on

KAlertDialog: A Beautiful Material Alert Dialog Library for Android

#android #java #opensource #mobile

KAlertDialog: A Beautiful Material Alert Dialog Library for Android

Dialogs are one of the most common UI components in Android apps.

We use them for confirmations, errors, success messages, loading states, input forms, warnings, and many other user interactions.

But the default Android AlertDialog can feel very basic when you are building a modern production app.

That is why I built KAlertDialog — a beautiful, customizable, Material-style alert dialog library for Android.

GitHub Repository:
https://github.com/TutorialsAndroid/KAlertDialog

What is KAlertDialog?

KAlertDialog is an Android library that helps developers create beautiful alert dialogs with very little code.

It supports multiple dialog types such as:

  • Success dialogs
  • Error dialogs
  • Warning dialogs
  • Normal message dialogs
  • Progress/loading dialogs
  • Input field dialogs
  • Custom image dialogs
  • URL image dialogs

It is designed for Android developers who want clean, modern, and customizable dialogs without writing custom layouts again and again.

Why I Built It

While building Android apps, I noticed that dialogs are used everywhere.

For example:

  • Showing a success message after saving data
  • Showing an error when something fails
  • Asking confirmation before deleting something
  • Displaying a progress loader while an API request is running
  • Taking user input in a small popup
  • Showing custom images inside dialogs

Instead of creating custom XML layouts for each case, I wanted a reusable library that makes this easy.

That idea became KAlertDialog.

Installation

Add Maven Central and JitPack in your project repositories:

repositories {
    mavenCentral()
    maven { url 'https://jitpack.io' }
}
Enter fullscreen mode Exit fullscreen mode

Then add the dependency in your app-level build.gradle:

dependencies {
    implementation 'io.github.tutorialsandroid:kalertdialog:20.5.11'
    implementation 'com.github.TutorialsAndroid:progressx:v6.0.19'
}
Enter fullscreen mode Exit fullscreen mode

Basic Usage

Creating a simple dialog is very easy.

new KAlertDialog(this)
        .setTitleText("Here's a message!")
        .show();
Enter fullscreen mode Exit fullscreen mode

With content text:

new KAlertDialog(this)
        .setTitleText("Here's a message!")
        .setContentText("It's pretty, isn't it?")
        .show();
Enter fullscreen mode Exit fullscreen mode

That is all you need to show a clean alert dialog.

Success Dialog

Use a success dialog when an operation completes successfully.

new KAlertDialog(this, KAlertDialog.SUCCESS_TYPE)
        .setTitleText("Good job!")
        .setContentText("You clicked the button!")
        .show();
Enter fullscreen mode Exit fullscreen mode

This can be used after:

  • Form submission
  • Payment success
  • Profile update
  • File upload
  • Data save operation

Error Dialog

Use an error dialog when something goes wrong.

new KAlertDialog(this, KAlertDialog.ERROR_TYPE)
        .setTitleText("Oops...")
        .setContentText("Something went wrong!")
        .show();
Enter fullscreen mode Exit fullscreen mode

This is useful for:

  • API failures
  • Validation errors
  • Login errors
  • Network issues
  • Payment failures

Warning Dialog

Warning dialogs are useful before performing destructive or sensitive actions.

new KAlertDialog(this, KAlertDialog.WARNING_TYPE)
        .setTitleText("Are you sure?")
        .setContentText("Won't be able to recover this file!")
        .setConfirmClickListener("Yes, delete it!", null)
        .show();
Enter fullscreen mode Exit fullscreen mode

You can also attach a click listener:

new KAlertDialog(this, KAlertDialog.WARNING_TYPE)
        .setTitleText("Are you sure?")
        .setContentText("Won't be able to recover this file!")
        .setConfirmClickListener("Yes, delete it!", sDialog -> {
            sDialog.dismissWithAnimation();
        })
        .showCancelButton(true)
        .setCancelClickListener("Cancel", sDialog -> {
            sDialog.cancel();
        })
        .show();
Enter fullscreen mode Exit fullscreen mode

Progress Dialog

KAlertDialog also supports progress dialogs.

KAlertDialog pDialog = new KAlertDialog(this, KAlertDialog.PROGRESS_TYPE);
pDialog.getProgressHelper().setBarColor(Color.parseColor("#A5DC86"));
pDialog.setTitleText("Loading");
pDialog.setCancelable(false);
pDialog.show();
Enter fullscreen mode Exit fullscreen mode

This is useful when your app is:

  • Loading data
  • Calling an API
  • Uploading a file
  • Processing a request
  • Waiting for Firebase/database operations

You can also customize the progress helper dynamically.

Input Field Dialog

KAlertDialog supports input dialogs too.

KAlertDialog dialog = new KAlertDialog(this, KAlertDialog.INPUT_TYPE);
dialog.setInputFieldHint("Write message");
dialog.setInputFieldText("Hello World!");
dialog.setTitleText("Edit Text");
dialog.setConfirmClickListener("OK", kAlertDialog -> {
    kAlertDialog.dismissWithAnimation();

    String inputText = kAlertDialog.getInputText();
    Toast.makeText(this, inputText, Toast.LENGTH_SHORT).show();
});
dialog.show();

dialog.getWindow().clearFlags(
        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE |
        WindowManager.LayoutParams.FLAG_ALT_FOCUSABLE_IM
);
Enter fullscreen mode Exit fullscreen mode

The latest version supports setting default text inside the input field using:

dialog.setInputFieldText("Hello World!");
Enter fullscreen mode Exit fullscreen mode

This is helpful when users need to edit an existing value.

Custom Image Dialog

You can show a custom drawable image inside a dialog.

new KAlertDialog(this, KAlertDialog.CUSTOM_IMAGE_TYPE)
        .setTitleText("Sweet!")
        .setContentText("Here's a custom image.")
        .setCustomImage(R.drawable.custom_img)
        .show();
Enter fullscreen mode Exit fullscreen mode

This is useful for:

  • Brand illustrations
  • Achievement popups
  • Custom app messages
  • Empty states
  • Promotional dialogs

URL Image Dialog

You can also show an image from a URL.

new KAlertDialog(this, KAlertDialog.URL_IMAGE_TYPE)
        .setTitleText("KAlertDialog")
        .setContentText("Here's a custom image.")
        .setURLImage("put your image url", KAlertDialog.IMAGE_BIG)
        .setConfirmClickListener("OK", null)
        .show();
Enter fullscreen mode Exit fullscreen mode

Supported display types include:

KAlertDialog.IMAGE_BIG
KAlertDialog.IMAGE_CIRCLE
Enter fullscreen mode Exit fullscreen mode

Dark Mode Support

KAlertDialog supports auto dark mode.

You can also tint vector drawables when the app is running in night mode.

new KAlertDialog(this, KAlertDialog.CUSTOM_IMAGE_TYPE)
        .setTitleText("Sweet!")
        .setContentText("Here's a custom image.")
        .setCustomImage(R.drawable.vector_drawable)
        .setDrawableTintOnNightMode(true, R.color.red)
        .show();
Enter fullscreen mode Exit fullscreen mode

This helps the dialog look good in both light and dark themes.

Custom Button Drawable

The latest update also adds support for custom drawable backgrounds for confirm and cancel buttons.

new KAlertDialog(this, KAlertDialog.NORMAL_TYPE, true)
        .setTitleText("Lorem Ipsum")
        .setContentText("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")
        .setConfirmClickListener("OK", null)
        .setCancelClickListener("Cancel", null)
        .confirmButtonDrawable(R.drawable.red_button_background)
        .cancelButtonDrawable(R.drawable.button_background)
        .show();
Enter fullscreen mode Exit fullscreen mode

This makes it easier to match dialog buttons with your app branding.

Change Font

You can apply custom fonts to the title.

new KAlertDialog(this, KAlertDialog.NORMAL_TYPE)
        .setTitleText("Lorem Ipsum")
        .setTitleFontAssets("fonts/os.ttf")
        .setContentText("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")
        .setConfirmClickListener("OK", null)
        .show();
Enter fullscreen mode Exit fullscreen mode

You can also change the content font:

new KAlertDialog(this, KAlertDialog.NORMAL_TYPE)
        .setTitleText("Lorem Ipsum")
        .setContentText("Lorem Ipsum is simply dummy text of the printing and typesetting industry.")
        .setContentFont(R.font.sf)
        .setConfirmClickListener("OK", null)
        .show();
Enter fullscreen mode Exit fullscreen mode

Change Text Colors

You can customize title and content colors.

.setTitleColor(R.color.yourColorName)
.setContentColor(R.color.yourColorName)
Enter fullscreen mode Exit fullscreen mode

You can also customize button colors:

.confirmButtonColor(R.color.colorPrimary)
.cancelButtonColor(R.color.colorAccent)
Enter fullscreen mode Exit fullscreen mode

And button text colors:

.setConfirmClickListener("OK", R.color.black, clickListener)
.setCancelClickListener("CANCEL", R.color.black, clickListener)
Enter fullscreen mode Exit fullscreen mode

Change Content Alignment

KAlertDialog allows you to control content text alignment.

.setContentTextAlignment(View.TEXT_ALIGNMENT_VIEW_START, Gravity.START)
Enter fullscreen mode Exit fullscreen mode

For center alignment:

.setContentTextAlignment(View.TEXT_ALIGNMENT_CENTER, Gravity.CENTER)
Enter fullscreen mode Exit fullscreen mode

This is helpful when your app needs different text layouts for different dialog types.

Hide Confirm or Cancel Button

You can hide confirm or cancel buttons when needed.

new KAlertDialog(this, KAlertDialog.CUSTOM_IMAGE_TYPE)
        .setTitleText("Sweet!")
        .setContentText("Here's a custom image.")
        .setCustomImage(R.drawable.custom_img)
        .showConfirmButton(false)
        .showCancelButton(false)
        .show();
Enter fullscreen mode Exit fullscreen mode

Change Alert Type Dynamically

You can change the dialog type after a user action.

new KAlertDialog(this, KAlertDialog.WARNING_TYPE)
        .setTitleText("Are you sure?")
        .setContentText("Won't be able to recover this file!")
        .showCancelButton(true)
        .setCancelClickListener("No, cancel", sDialog ->
                sDialog.setTitleText(null)
                        .setContentText("Your imaginary file is safe :)")
                        .showCancelButton(false)
                        .setConfirmClickListener("OK", null)
                        .changeAlertType(KAlertDialog.ERROR_TYPE))
        .setConfirmClickListener("Yes, delete it!", sDialog ->
                sDialog.setTitleText("Deleted!")
                        .showCancelButton(false)
                        .setContentText(null)
                        .setConfirmClickListener("OK", null)
                        .changeAlertType(KAlertDialog.SUCCESS_TYPE))
        .show();
Enter fullscreen mode Exit fullscreen mode

This is useful for confirmation flows where you want the dialog to update after the user clicks a button.

Main Features

KAlertDialog includes:

  • Material-style alert dialogs
  • AndroidX support
  • Auto dark mode
  • Success dialog
  • Error dialog
  • Warning dialog
  • Progress dialog
  • Input field dialog
  • Custom image dialog
  • URL image dialog
  • Custom fonts
  • Custom title and content colors
  • Custom button colors
  • Custom button drawables
  • Custom button text colors
  • Vector drawable tinting in night mode
  • Title and content alignment
  • Dynamic alert type change
  • Confirm and cancel listeners

When Should You Use It?

You can use KAlertDialog when your Android app needs:

  • Better looking alert dialogs
  • Reusable dialog components
  • Fast implementation
  • Customizable buttons
  • Dark mode support
  • Input popup support
  • Progress/loading dialogs
  • Clean Java API

It is useful for both small apps and production-level Android projects.

GitHub Repository

You can find the complete source code and documentation here:

https://github.com/TutorialsAndroid/KAlertDialog

If you find it useful, please consider giving it a star on GitHub.
It helps the project reach more Android developers.

Final Thoughts

KAlertDialog was created to make Android dialogs more beautiful, simple, and customizable.

Instead of spending time creating custom dialog layouts for every use case, developers can use KAlertDialog to quickly add polished dialogs to their apps.

If you are building Android apps in Java and want a modern alert dialog library, give KAlertDialog a try.

implementation 'io.github.tutorialsandroid:kalertdialog:20.5.11'
implementation 'com.github.TutorialsAndroid:progressx:v6.0.19'
Enter fullscreen mode Exit fullscreen mode

Happy coding 🚀

Top comments (0)