Android custom dialog with image, title, close and two buttons

We will create Android custom dialog with image and title in this tutorial.

This custom popup alert dialog contains two buttons, Ok and Cancel

You will learn how to add images in your custom dialog.

In this example, we will create one specific layout file where you can customize your pop up dialog.

You will be able to add any number of UI widgets(Buttons, TextView, Images etc.) you like.

Step 1. Custom Image

I am using one image to show on the custom dialog.

Download this image by clicking the below link.

[sociallocker]Download Custom Image[/sociallocker]

After downloading the image, copy this image into res->drawable directory.

Step 2. Drawable resource files

In this example, we need to create two drawable resource files. These files are used to give radiant effect to our buttons.

  • Create a xml resource file named button.xml in res->drawable directory.

Add below source code in it.

  • It will add the gradient effects with blue as a core color.
  • Now create another xml resource file named button_yellow.xml in res->drawable directory.

Copy below code in this file

  • It will add the gradient effects with yellow as a core color.

Step 3. Layout Of the Custom Dialog

Here, we will create another layout resource file named dialog_layout.xml

Source code this file is as following:

  • You can create any layout as per your requirements using this file.
  • I will show one image and two buttons in this example.

This file will generate the following preview.

android custom dialog with image and title

Dialog view

Our custom dialog will exactly look like the above image.

Step 4. Final Work

Only thing required now is to change code for activity_main.xml and MainActivity.java file

Put following code in activity_main.xml file

Copy the below source code in MainActivity.java

  • showDialog() method will create our custom dialog and will pop up it to the user.

Read the below two lines of code

  • First line will disable the cancelable property of dialog. It means that when user taps on the outside of the dialog to cancel it, it will not be canceled.
  • Second line will set our custom view or representation in the dialog.
  • We have made our custom look for dialog in dialog_layout.xml file. Second line will tell the compiler to make the look and feel of the dialog as per our dialog_layout.xml file.

Setting The Custom Title

  • As I have already said that we are able to set custom title for our dialog with this example.
  • To set the custom title, you have to send your title when you are calling the showDialog() method.
  • Set your custom title in the second parameter of the showDialog() method. I have set the title as “First Custom Dialog.”

Following line will set the title of the dialog

Button Clicks

Let us show how to handle button clicks. I have taken two buttons in this dialog.

Following code will handle the first button’s (OK button) click event.

  • Dialog will be dismissed when the user clicks on the OK button.

Similarly you can customize this click event as per your requirements.

Other dialog related examples

Final Views For Android custom dialog with image and title

After going through all the above steps, you will have a demo app like below gif

via GIPHY

Download Source Code

[sociallocker]Download Custom Dialog Source Code[/sociallocker]

End of this android custom dialog with image and title tutorial for now. Share demonut’s tutorial with other students and learners. Thank you.

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *