Creating custom layout dialog – Android

custom_dialog_android

In this article, we will learn how to create a custom layout for android dialog. I writing this article because our next tutorial will be on how to update firebase email. Where you will be required to re-authenticate. And for that we will be using a custom dialog, hence this article.

Here we will make a simple android project. Our main objective is to create a custom dialog. So the app will be very simple. It will have only two EditTexts with two Buttons. One Cancel button and an Ok button.

See the image below –

custom_dialog_android

As you can see from the above image there will be two buttons. Clicking on the cancel button will close the dialog and the Ok button will show a toast message.

At first, we will create an activity which will have a Button. Clicking on the button the dialog will open.

Go to the android studio and create an empty activity. I am naming it TestActivity and its layout activity_test. Below is the XML layout code of our TestActivity and the TestActivity.java file.

Now let’s create a sperate class for our custom dialog and name it MyCustomDialog. It will have a showDialog(Context context) method.

We will call the above method showDialog() from the TestActivity to show our custom dialog. And for a custom dialog, we need a separate layout. Create an XML layout. Name it custom_dialog_layout.

Below is the XML layout code of our custom dialog (See the image preview above).

I have also used drawable shape for the two EditTexts and the Two buttons.

Go to res, then drawable and create a new Drawable resource file. Name it edittext_background. This for the two EditTexts.

Create another drawable resource file for the two Buttons. Name it button_background.

The layout is ready for our dialog. Now let’s code the MyCustomDialog class. Create an object of the Dialog class and call setContentView to set the screen content from our dialog layout resource file. At last call show() to display the dialog. See the code below –

Now we can use findViewById to retrieve the widgets in our dialog UI. Update your MyCustomDialog class with the code below –

Complete code of our MyCustomDialog class – 

At last, update your TestActivity.java code. Call the method showDialog() method to show the dialog.

 

Now run your project. Fill the EditText fields and click Cancel and Ok button. Cancel will close the dialog and clicking the Ok button, a toast message will be displayed.

This is how we can make a fully customized dialog for our android projects. From the next tutorial, I will be continuing our firebase tutorial series.

Hope you have understood everything. If you have any doubt or query let us know in the comment section below.

 

You May Also Like

Leave a Reply

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