Android Custom Dialog Rounded Corners Programmatically | Border

Tutorial is about Android Custom Dialog Rounded Corners Programmatically.

We will create total of three custom dialog with rounded corners in this tutorial.

All three dialog will have different background and rounded corners.

You will learn how to set rounded corner to custom dialog Programmatically as well as using drawable XML files.

Separate Drawable XML file enable us to make fully customizable background for any custom dialog.

Third dialog will have borders along with rounded corners.

You can also set the size and color of the border as per your requirements.

See Your Dialog

Step 1. Changing Colors

There is a file under res->values->colors.xml directory.

Add the below lines in colors.xml file.

Step 2. Twitter Images

We require images in res->drawable directory.

Click the below link to download twitter images.

Download Twitter Images

After downloading images from above link, add them in drawable folder.

Step 3. XML Layout File For Dialog

Now we need to make one XML layout resource file, which will help us to make unique layout for custom dialog.

Make a new XML file under res->layout directory.

Name of the file should be round_corner.xml

Add the below coding lines in round_corner.xml file

  • Above file is the basic structure of the custom dialog.
  • You can add any UI widget like TextView, Button, ImageView etc. in this file.
  • I have mainly taken One ImageView, Two buttons and one Textview.
  • Root element of this file is a RelativeLayout. I have given a black color opacity value 67 as the Background of this RelativeLayout.
  • It will make the transparent background of our dialog.

Step 4. Required Drawable Files

Now let us create three drawable XML files to provide some background features to dialog.

Create a new XML file under res->drawable directory.

Set the name of the file as dialog_bg.xml and add the below code in it

  • Above file will set the color, padding and radius size.
  • <corners> tag helps us to define the radius of the rounded corners.

Make another file in the same directory named dialog_second_bg.xml

Code block for dialog_second_bg.xml file is as the below

  • This file has the same code as of dialog_bg.xml , only color value is changed.
  • Now prepare another XML file under same directory.
  • Name for this file is dialog_third_bg.xml

Following is the code structure for dialog_third_bg.xml file.

  • This file has one extra tag than the above two files. This tag is <stroke> tag.
  • <stroke> tag will enable us to give borders to custom dialog.
  • Using this tag, we can also set the color and width of the border as per our particular requirements.

Step 5. Last and Important Task

Final step is to write main files.

Code for activity_main.xml should look like the below

  • There are three buttons in this file. Every button will open unique custom dialog.

Now write down the following source code in file.

Dive Deep In Main

Consider the below code block

  • Above snippet consist of three button click implementation.
  • Every button will call separate method.
  • First button will call showDialog() method.

Code snippet for showDialog() method is as the below

  • Above method will create the object of the Dialog class.
  • Then compiler will set the content view for the dialog. Here, it will set the round_corner.xml as a content view.
  • After that, compiler will set the title of the dialog into the Textview.
  • Then it will set the click events of OK and CANCEL buttons.
  • Finally, line will pop up the custom dialog.

Now button click of second button will call showDialogSecond() method.

Code structure for showDialogSecond() method is as the following

  • This method performs the similar task as the previous one like dialog object, then set content view, then set title and button clicks.
  • But it has one extra feature.
  • After setting the content view, compiler will inflate the LinearLayout of round_corner.xml file.
  • Then it will set the dialog_second_bg.xml file as the background of this linearlayout.
  • Thus dialog will have the view of dialog_second_bg.xml file.
  • We have create the dialog with rounded corners programmatically here with this method.

Third button will call the showDialogThird() method.

  • This method will set the background of linearlayout as the dialog_third_bg.xml file.

Other functionalities are same as the showDialogSecond() method.

Download Source code for android custom dialog rounded corners

Download Source Code For CustomDialog_rounded_corner

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 *