Android Custom Dialog With EditText Example Tutorial

Android Custom Dialog With edittext example and tutorial is the main focus here.

In this example, we will create a custom popup alert dialog with multiple edittext.

User will be able to type his string in our custom input dialog. You can use this dialog with edittext to get password from the user.

Dialog will have custom layout. You add many UI widgets like TextView, EditText, Button etc. as per your requirements.

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

So, follow all the below steps to make your desired custom dialog with edittext.

Step 1. Custom Drawables

We are going to customize the look and feel of EditText and Buttons For our custom dialog.

Due to this purpose, we need to make some drawable xml files.

  • First of all, create a new xml file under res->drawable directory. edittext.xml should be the name of this file.

Add the following code into this file.

  • Above layout file with customize the edittext of the dialog with blue rounded borders.
  • Now make another xml file named button.xml under the same directory.

Copy below source code in button.xml file.

  • This file will give blue colored look and feel to the dialog’s button.
  • Prepare third xml file named button_yellow.xml

Write down below source code in it.

Above file will give yellow gradient effect to the button of the custom popup alert dialog.

Step 2. Dialog Layout

Let us create a layout resource file which will represent the custom layout of the dialog.

Create new xml layout resource file under res->layout directory.

Put the following code in it

  • You can see that the xml files we created in the drawable folder are used in this file.
  • In the edittext, we have set it’s background with reference to the edittext.xml file.
  • For button, button.xml and button_yellow.xml are used to customize the background of the buttons.

This file give it’s exact layout to the custom dialog. This file will generate layout like the below image.

android custom dialog with edittext

Step 3. Last Codes

At last, we need to write code for Main Activity.

Write down the following code in activity_main.xml file

Here, I have taken one button and three TextViews.

Now add the below source code in MainActivity.java file.

Reading Carefully

Consider the below code

  • First of all, button and three textviews are defined then button’s on click method written.
  • When the user will click the button, showDialog() method will be called.

showDialog() method

Below is the code for this method.

  • First line will declare the object of the dialog.
  • Second line will remove the title from the dialog.
  • Third line will set the cancelable property as a true. It means that when user touches outside the dialog, the dialog will not go away. He need to click the cancel button for this.

Consider below code

  • First three lines will declare the objects of the EditText.
  • Second will declare the object of the Button (This is OK button.)

When the user clicks on the OK button , following compiler will execute the following code

  • Compiler will set the text for the textviews.
  • It will fill the first TextView with the text of the first EditText. Similarly, second and third TextView will get their texts.
  • Then compiler will remove the dialog from the screen.

Now read the following code

  • Above code is representing the CANCEL button.
  • When user clicks the CANCEL button, simply compiler will remove the custom dialog which have three edittexts.

Similar examples related to Custom Dialog,

Last Output

Your custom dialog will look like below

Download Source Code for Android custom dialog with edittext

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 *