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.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorTransparent">#43000000</color>
</resources>
Step 2. Twitter Images
We require images in res->drawable directory.
Click the below link to 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
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/colorTransparent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/ll"
android:layout_margin="40dp"
android:background="@drawable/dialog_bg"
android:orientation="vertical">
<ImageView
android:id="@+id/a"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="center"
android:scaleType="fitCenter"
android:src="@drawable/tww" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/a"
android:orientation="vertical">
<TextView
android:id="@+id/text_dialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/a"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="Your Custom Dialog"
android:textColor="#000"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"
android:textColor="#000"
android:textSize="20sp" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|center_horizontal"
android:text="Cancel"
android:textColor="#000"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
- 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
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#e23535"/>
<corners
android:radius="30dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
- 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
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#e235ab"/>
<corners
android:radius="30dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
- 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.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#e29135"/>
<corners
android:radius="30dp" />
<stroke android:color="#000" android:width="5dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
- 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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn1_d"
android:textSize="10sp"
android:layout_marginTop="2dp"
android:text="Open First custom Dialog"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:textSize="10sp"
android:layout_marginTop="2dp"
android:text="Open Second custom Dialog"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:textSize="10sp"
android:layout_marginTop="2dp"
android:text="Open Third custom Dialog"/>
</LinearLayout>
- There are three buttons in this file. Every button will open unique custom dialog.
Now write down the following source code in MainActivity.java file.
import android.app.Activity;
import android.app.Dialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private Button btn1, btn2, btn3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn1 = findViewById(R.id.btn1_d);
btn2 = findViewById(R.id.btn2);
btn3 = findViewById(R.id.btn3);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this,"First Custom Dialog");
}
});
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogSecond(MainActivity.this,"Second Custom Dialog");
}
});
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogThird(MainActivity.this,"Third Custom Dialog");
}
});
}
public void showDialog(Activity activity, String msg){
final Dialog dialog = new Dialog(activity, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.round_corner);
TextView text = (TextView) dialog.findViewById(R.id.text_dialog);
text.setText(msg);
Button dialogButton1 = (Button) dialog.findViewById(R.id.btn1);
dialogButton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
Button dialogButton2 = (Button) dialog.findViewById(R.id.btn2);
dialogButton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
public void showDialogSecond(Activity activity, String msg){
final Dialog dialog = new Dialog(activity, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.round_corner);
//set background drawable programatically
LinearLayout ll = dialog.findViewById(R.id.ll);
ll.setBackgroundResource(R.drawable.dialog_second_bg);
TextView text = (TextView) dialog.findViewById(R.id.text_dialog);
text.setText(msg);
Button dialogButton1 = (Button) dialog.findViewById(R.id.btn1);
dialogButton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
Button dialogButton2 = (Button) dialog.findViewById(R.id.btn2);
dialogButton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
public void showDialogThird(Activity activity, String msg){
final Dialog dialog = new Dialog(activity, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.round_corner);
//set background drawable programatically
LinearLayout ll = dialog.findViewById(R.id.ll);
ll.setBackgroundResource(R.drawable.dialog_third_bg);
TextView text = (TextView) dialog.findViewById(R.id.text_dialog);
text.setText(msg);
Button dialogButton1 = (Button) dialog.findViewById(R.id.btn1);
dialogButton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
Button dialogButton2 = (Button) dialog.findViewById(R.id.btn2);
dialogButton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
}
Dive Deep In Main
Consider the below code block
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this,"First Custom Dialog");
}
});
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogSecond(MainActivity.this,"Second Custom Dialog");
}
});
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialogThird(MainActivity.this,"Third Custom Dialog");
}
});
- 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
public void showDialog(Activity activity, String msg){
final Dialog dialog = new Dialog(activity, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.round_corner);
TextView text = (TextView) dialog.findViewById(R.id.text_dialog);
text.setText(msg);
Button dialogButton1 = (Button) dialog.findViewById(R.id.btn1);
dialogButton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
Button dialogButton2 = (Button) dialog.findViewById(R.id.btn2);
dialogButton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
- 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, dialog.show() 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
public void showDialogSecond(Activity activity, String msg){
final Dialog dialog = new Dialog(activity, android.R.style.Theme_Translucent_NoTitleBar_Fullscreen);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.round_corner);
//set background drawable programatically
LinearLayout ll = dialog.findViewById(R.id.ll);
ll.setBackgroundResource(R.drawable.dialog_second_bg);
TextView text = (TextView) dialog.findViewById(R.id.text_dialog);
text.setText(msg);
Button dialogButton1 = (Button) dialog.findViewById(R.id.btn1);
dialogButton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
Button dialogButton2 = (Button) dialog.findViewById(R.id.btn2);
dialogButton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
- 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.