Android Custom Dialog Tutorial With Example welcomes you.
In android, we can create custom dialog with many widgets like recyclerview, listview, edittext, rounded corners, custom border color, image, title, two buttons and transparent background color.
Below are the examples of various custom dialogs in android studio.
Course Recommendation
Below is the good course for android development with kotlin.
Kotlin android development course.
Table of Content
1. Android Custom Dialog with Recyclerview
2. Android Custom Dialog With ListView | Dialog onitemclicklistener
3. Android Custom Dialog With EditText Example Tutorial
4. Android Custom Dialog Rounded Corners Programmatically | Border
5. Android custom dialog with image, title, close and two buttons
6. Android Custom Dialog With Transparent Background | Background Color
1. Android Custom Dialog with Recyclerview
Learn to create Android Custom Dialog with Recyclerview.
We will create a custom dialog with RecyclerView in this example.
Developers use dialog with RecyclerView when they want to have a quick selection from the user. For example, to select the city or country of the user.
We will also implement onitemclicklistener for the RecyclerView inside dialog.
Alert dialog with recyclerview can be used as an alternative to spinner, where user can select any item from several options.
See RecyclerView in Dialog
Step 1. Adding required Dependencies
Make a new project with android studio.
Then add the below lines in build.gradle(Module :app) file.
implementation 'com.android.support:recyclerview-v7:27.1.1'
implementation 'com.android.support:cardview-v7:27.1.1'
First line will integrate recyclerview classes in the project.
Second line will help us to create card views for each recycler view item cell.
Step 2. Two Necessary XML files
We need to make two separate XML files that will help us to create custom views.
First is for dialog. So go ahead and make a new file under res->layout directory. Name of this file can be dialog_recycler.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="Below is RecyclerView in Custom dialog"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="10dp"
android:layout_marginTop="15dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btndialog"
android:text="Cancel"/>
</LinearLayout>
One text view, one recycler view and one button is there in the above file.
This layout will give the look and feel to our custom dialog.
Now make another XML file named rv_layout.xml.
Write down the following code lines in rv_layout.xml.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
app:cardCornerRadius="5dp">
<TextView
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Hello"
android:textColor="#000"
android:textSize="25sp" />
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
This will give the user interface to the every cell of the recycler view.
It typically includes one card view. Inside this card view I have added one text view.
Step 3. Adapter Class For dialog
Time to create a new JAVA class and give it a name of “AdapterRe.java”
Give this a below source code
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class AdapterRe extends RecyclerView.Adapter<AdapterRe.MyViewHolder> {
private LayoutInflater inflater;
private String[] myImageNameList;
public AdapterRe(Context ctx, String[] myImageNameList){
inflater = LayoutInflater.from(ctx);
this.myImageNameList = myImageNameList;
}
@Override
public AdapterRe.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.rv_layout, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(AdapterRe.MyViewHolder holder, int position) {
holder.name.setText(myImageNameList[position]);
}
@Override
public int getItemCount() {
return myImageNameList.length;
}
class MyViewHolder extends RecyclerView.ViewHolder{
TextView name;
public MyViewHolder(View itemView) {
super(itemView);
name = (TextView) itemView.findViewById(R.id.name);
itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
MainActivity.textView.setText("You have selected : "+myImageNameList[getAdapterPosition()]);
MainActivity.dialog.dismiss();
}
});
}
}
}
This class will act as a bridge between data source and recycler view.
Our data store is one string array which we will define in the main activity. We will get this data source from the parameter of the constructor of this adapter.
onCreateViewHolder() method will inflate the rv_layout.xml file, which we have created in step 2.
In onBindViewHolder() method, we will set the value text view using our string array data source.
Now look at the constructor of MyViewHolder class.
See the below code lines from this class.
itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
MainActivity.textView.setText("You have selected : "+myImageNameList[getAdapterPosition()]);
MainActivity.dialog.dismiss();
}
});
Above lines are acting as the click event of the recycler view.
Whenever the user clicks the any row of recycler view, getAdapterPosition() method will give us the position which is clicked.
Now inside onClick() method, we can write our logic.
I have made public static text view and dialog variables in the main activity. so we can use these two instances in this adapter class.
Text view will show the name of the clicked item and dialog will be removed then after.
Step 4. Final Changes in code
Now we are left with two files. activity_main.xml and MainActivity.java
Fill the activity_main.xml file with the below code structure.
<?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/btn"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Open Custom Dialog With REcyclerView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textview"
android:padding="10dp"
android:layout_marginTop="20dp"
android:textColor="#000"
android:textSize="25sp"
android:text="Select your car please !"
/>
</LinearLayout>
One button and one text view is there in the above file.
When the user clicks the button, compiler will open the dialog box.
Text view contains the name of the selected item.
Now in the MainActivity.java file, add the below source code
import android.app.Activity;
import android.app.Dialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
public static TextView textView;
public static Dialog dialog;
private Button dialogBtn;
private String[] myImageNameList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = findViewById(R.id.textview);
dialogBtn = findViewById(R.id.btn);
dialogBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this);
}
});
}
public void showDialog(Activity activity){
dialog = new Dialog(activity);
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_recycler);
Button btndialog = (Button) dialog.findViewById(R.id.btndialog);
btndialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
RecyclerView recyclerView = dialog.findViewById(R.id.recycler);
AdapterRe adapterRe = new AdapterRe(MainActivity.this,myImageNameList);
recyclerView.setAdapter(adapterRe);
recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.VERTICAL, false));
recyclerView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
dialog.show();
}
}
Look at the below lines
public static TextView textView;
public static Dialog dialog;
private Button dialogBtn;
private String[] myImageNameList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
First two lines are making public instances that we have used in the adapter class.
One is text view and another is dialog.
Then an object of the button and one string array variable.
This string array holds the various names of vehicles and cars. It is our data source.
In onCreate() method, when the user clicks the button, compiler will execute the showDialog() method.
Below is how the showDialog() method look a like
public void showDialog(Activity activity){
dialog = new Dialog(activity);
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_recycler);
Button btndialog = (Button) dialog.findViewById(R.id.btndialog);
btndialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
RecyclerView recyclerView = dialog.findViewById(R.id.recycler);
AdapterRe adapterRe = new AdapterRe(MainActivity.this,myImageNameList);
recyclerView.setAdapter(adapterRe);
recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.VERTICAL, false));
recyclerView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
dialog.show();
}
Compiler will initialize the dialog object. then it will set the dialog as non cancelable.
Then using .setContentView() method, it will inflate the dialog_recycler.xml file.
There is one button in dialog_recycler.xml file, so compiler will find it using id and then will implement it’s click method. It will simply dismiss the dialog when it is clicked.
Then an object of recycler view is there. Also an object of AdaoterRe.java class.
Finally, compiler will set the adapter in recyclerview using our data source (string array variable) and we are done !!
2. Android Custom Dialog With ListView | Dialog onitemclicklistener
Android Custom Dialog With ListView Tutorial welcomes you.
In this example, we will create a custom dialog with listview.
We will also implement onitemclicklistener for the dialog listview.
Developers use dialog with listview when they want to have a quick selection from the user. For example, to select the city or country of the user.
Alert dialog with listview can be used as an alternative to spinner, where user can select any item from several options.
Outcome of listview dialog
Step 1. Two XML files
First of all, make a new project in android studio.
Here, select “Empty activity” as the default template so that we can have clean work space without any pre-written code lines.
We need two XML files separately. One is for custom dialog and another is for listview layout.
Create a new XML file under res->layout directory and give it a name like dialog_listview.xml
Add the following source code in dialog_listview.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="Below is ListView in Custom dialog"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/listview">
</ListView>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btndialog"
android:text="Cancel"/>
</LinearLayout>
Above file create the view layout for our custom dialog.
It contains one text view, one list view and one button.
We will inflate this file in the JAVA class to create custom dialog view.
Now time create another XML file named list_item.xml under same directory.
Following is the code block for list_item.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="@+id/tv"
android:textColor="#fff"
android:paddingLeft="15dp"
android:gravity="center_vertical"
android:background="@color/colorAccent"
android:textSize="20sp"
android:text="hwllo"/>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#000"/>
</LinearLayout>
ListView in custom dialog will have some row items. Every row items will create it’s look and feel with help of above file.
Above file contains one text view and one view. So every row of listview will also contain them with their background colors.
Step 2. Main File codes
When you have created a new project, system must have created two files automatically.
One is activity_main.xml and another is MainActivity.java
Write down the following code snippet in activity_main.xml
<?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/btn"
android:layout_marginTop="20dp"
android:layout_marginLeft="10dp"
android:text="Open Custom Dialog With LISTView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textview"
android:padding="10dp"
android:layout_marginTop="20dp"
android:textColor="#000"
android:textSize="25sp"
android:text="Select your car please !"
/>
</LinearLayout>
It contains two UI widgets. One is Button and another is text view.
When the user click the button, we will open the custom dialog.
Text view will hold the name of the selected car.
Now in MainActivity.java file, add the below code structure
import android.app.Activity;
import android.app.Dialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView textView;
private Button dialogBtn;
private String[] myImageNameList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = findViewById(R.id.textview);
dialogBtn = findViewById(R.id.btn);
dialogBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this);
}
});
}
public void showDialog(Activity activity){
final Dialog dialog = new Dialog(activity);
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_listview);
Button btndialog = (Button) dialog.findViewById(R.id.btndialog);
btndialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
ListView listView = (ListView) dialog.findViewById(R.id.listview);
ArrayAdapter arrayAdapter = new ArrayAdapter(this,R.layout.list_item, R.id.tv, myImageNameList);
listView.setAdapter(arrayAdapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textView.setText("You have clicked : "+myImageNameList[position]);
dialog.dismiss();
}
});
dialog.show();
}
}
Looking above code confidently
Let us understand the logic behind the code of main activity.
First of all, read the below one
private TextView textView;
private Button dialogBtn;
private String[] myImageNameList = new String[]{"Benz", "Bike",
"Car","Carrera"
,"Ferrari","Harly",
"Lamborghini","Silver"};
First line is making the object of text view class. Second line will help us to use button in our project.
Last line is making one string array. This string array contain the names of the cars.
We will fill the listview with these car names.
In onCreate() method, compiler will first use findViewById() method to find textview and button.
On click method for button is like below
dialogBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this);
}
});
As per the above code, compiler will call showDialog() method when the user touches the button.
Code for showDialog() method is as the below
public void showDialog(Activity activity){
final Dialog dialog = new Dialog(activity);
// dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_listview);
Button btndialog = (Button) dialog.findViewById(R.id.btndialog);
btndialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
ListView listView = (ListView) dialog.findViewById(R.id.listview);
ArrayAdapter arrayAdapter = new ArrayAdapter(this,R.layout.list_item, R.id.tv, myImageNameList);
listView.setAdapter(arrayAdapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
textView.setText("You have clicked : "+myImageNameList[position]);
dialog.dismiss();
}
});
dialog.show();
}
First of all, compiler will create the Dialog object.
Then it will set it as non cancelable. It means that if user touches outside the dialog, system will pop down the dialog.
.setContentView() method will give the look and feel to our custom dialog. File dialog_listview.xml will help us in this task.
Then compiler will find the Cancel button using it’s id and will implement is’s click event.
Then compiler will find the listview.
After this, it will create the array adapter to populate the listview.
Here, it is using string array variable to show them (car names) in listview.
On click event of list view is also written. When the user clicks the listview, compiler will set the value of selected car name into text view.
3. 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.
Last Output
Your custom dialog will look like below
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.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
<gradient android:startColor="#00c4c7a9" android:endColor="#00d6dadf" android:angle="270" />
<stroke android:width="2px" android:color="@color/colorPrimary" />
<corners android:radius="2dp" />
</shape>
</item>
<item android:state_focused="false">
<shape android:shape="rectangle">
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
<gradient android:startColor="#00c4c7a9" android:endColor="#00d6dadf" android:angle="270" />
<stroke android:width="2px" android:color="@color/colorPrimary" />
<corners android:radius="2dp" />
</shape>
</item>
</selector>
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.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#9292e6"
android:centerColor="#3838c6"
android:endColor="#100669"
android:angle="270" />
</shape>
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.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#cebd0a"
android:centerColor="#cac520"
android:endColor="#d2d04c"
android:angle="270" />
</shape>
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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height= "wrap_content"
android:textSize="30dp"
android:gravity="center"
android:textColor="#da0c0c"
android:layout_marginTop="30dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="Enter Text Please!!"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et"
android:hint="I am Edit Text in Dialog"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et2"
android:hint="I am Edit Text in Dialog"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et3"
android:hint="I am Edit Text in Dialog"
android:layout_marginTop="10dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/btnok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button"
android:textSize="20sp"
android:text="OK"
android:textColor="#ffffffff" />
<Button
android:id="@+id/btncn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/button_yellow"
android:gravity="center_vertical|center_horizontal"
android:text="Cancel"
android:textSize="20sp"
android:textColor="#ffffffff" />
</LinearLayout>
</LinearLayout>
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.
Step 3. Last Codes
At last, we need to write code for Main Activity.
Write down the following code in activity_main.xml file
<?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/btn"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="Click me to fill text in below Text Box!!" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv2"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"
android:textSize="20sp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tv3"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/edittext"
android:textSize="20sp"/>
</LinearLayout>
Here, I have taken one button and three TextViews.
Now add the below 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.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView tv, tv2, tv3;
private Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn = findViewById(R.id.btn);
tv = findViewById(R.id.tv);
tv2 = findViewById(R.id.tv2);
tv3 = findViewById(R.id.tv3);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this);
}
});
}
public void showDialog(Activity activity){
final Dialog dialog = new Dialog(activity);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_layout);
final EditText et = dialog.findViewById(R.id.et);
final EditText et2 = dialog.findViewById(R.id.et2);
final EditText et3 = dialog.findViewById(R.id.et3);
Button btnok = (Button) dialog.findViewById(R.id.btnok);
btnok.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tv.setText(et.getText().toString());
tv2.setText(et2.getText().toString());
tv3.setText(et3.getText().toString());
dialog.dismiss();
}
});
Button btncn = (Button) dialog.findViewById(R.id.btncn);
btncn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
}
Reading Carefully
Consider the below code
btn = findViewById(R.id.btn);
tv = findViewById(R.id.tv);
tv2 = findViewById(R.id.tv2);
tv3 = findViewById(R.id.tv3);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this);
}
});
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.
public void showDialog(Activity activity){
final Dialog dialog = new Dialog(activity);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_layout);
final EditText et = dialog.findViewById(R.id.et);
final EditText et2 = dialog.findViewById(R.id.et2);
final EditText et3 = dialog.findViewById(R.id.et3);
Button btnok = (Button) dialog.findViewById(R.id.btnok);
btnok.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tv.setText(et.getText().toString());
tv2.setText(et2.getText().toString());
tv3.setText(et3.getText().toString());
dialog.dismiss();
}
});
Button btncn = (Button) dialog.findViewById(R.id.btncn);
btncn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
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
final EditText et = dialog.findViewById(R.id.et);
final EditText et2 = dialog.findViewById(R.id.et2);
final EditText et3 = dialog.findViewById(R.id.et3);
Button btnok = (Button) dialog.findViewById(R.id.btnok);
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
btnok.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tv.setText(et.getText().toString());
tv2.setText(et2.getText().toString());
tv3.setText(et3.getText().toString());
dialog.dismiss();
}
});
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
Button btncn = (Button) dialog.findViewById(R.id.btncn);
btncn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
Above code is representing the CANCEL button.
When user clicks the CANCEL button, simply compiler will remove the custom dialog which have three edittexts.
4. 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.
<?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.
5. 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.
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
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.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#9292e6"
android:centerColor="#3838c6"
android:endColor="#100669"
android:angle="270" />
</shape>
- 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
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
android:startColor="#cebd0a"
android:centerColor="#cac520"
android:endColor="#d2d04c"
android:angle="270" />
</shape>
- 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:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/a"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#e46f16"
android:gravity="center"
android:scaleType="fitCenter"
android:src="@drawable/twi" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
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="20dp"
android:gravity="center_horizontal"
android:text="Your Custom Dialog"
android:textColor="#ff000000"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button"
android:textSize="20sp"
android:text="OK"
android:textColor="#ffffffff" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:background="@drawable/button_yellow"
android:gravity="center_vertical|center_horizontal"
android:text="Cancel"
android:textSize="20sp"
android:textColor="#ffffffff" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
- 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.
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
<?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="30sp"
android:layout_marginTop="20dp"
android:text="Open First custom Dialog"/>
</LinearLayout>
Copy the below source code in MainActivity.java
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.TextView;
public class MainActivity extends AppCompatActivity {
private Button btn1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn1 = findViewById(R.id.btn1_d);
btn1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showDialog(MainActivity.this,"First Custom Dialog");
}
});
}
public void showDialog(Activity activity, String msg){
final Dialog dialog = new Dialog(activity);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setCancelable(false);
dialog.setContentView(R.layout.dialog_layout);
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();
}
}
- showDialog() method will create our custom dialog and will pop up it to the user.
Read the below two lines of code
dialog.setCancelable(false); dialog.setContentView(R.layout.dialog_layout);
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
text.setText(msg);
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.
Button dialogButton1 = (Button) dialog.findViewById(R.id.btn1);
dialogButton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
- Dialog will be dismissed when the user clicks on the OK button.
Similarly you can customize this click event as per your requirements.
6. Android Custom Dialog With Transparent Background | Background Color
This article is on Android Custom Dialog With Transparent Background Color Example.
You will learn to make custom dialog with transparent background.
We will also learn to change background color with different level of transparency.
For this purpose, we will make separate XML layout files for every dialog.
One easy trick for transparent background is to make the root layout of XML file as a transparent.
Creating Transparent Background
Step 1. Making Colors
First of all, we will define various colors with different opacity.
Write down the below lines in res->values->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>
<color name="redTransparent">#7ffd0101</color>
</resources>
Here, colorTransparent and redTransparent are the colors we will use in dialog background.
See the below image,
Above Image shows us how to define color with different opacity.
For this, open your colors.xml file.
Here, you will see squares filled with colors define in <color name=””……….></color> tags. These squares are at the left side of the <color> tags.
Click on that square. System will open a dialog window like the above image.
In this window, there two horizontal sliders (A & B as per the above image) .
With the help of the A, you can set the color and by using B, you can set the opacity of that color.
Lower the opacity, more transparency is there.
Step 2. XML files for dialog
Before making drawable files, we need to add two images in the drawable folder.
After downloading images from above link, add these two images in res->drawable folder.
For every custom dialog, we will make separate XML drawable files.
So, create a new XML file under res->drawable directory.
Set the name of the file as dialog_transparent.xml and add the following code
<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">
<ImageView
android:id="@+id/a"
android:layout_width="match_parent"
android:layout_height="120dp"
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="20dp"
android:gravity="center_horizontal"
android:text="Your Custom Dialog"
android:textColor="#fff"
android:textStyle="bold"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="OK"
android:textColor="#000" />
<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:textSize="20sp"
android:textColor="#000" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Above code will generate custom dialog with fully transparent background.
The parent element of this file is RelativeLayout.
I have set the background color of this relativelayout as the fully transparent with opacity 67.
Elements other than relativelayout will create attractive custom dialog with twitter image, text and two buttons.
Second file
Now under res->drawable directory, make another XML file and give it a name dialog_second.xml
Code structure for dialog_second.xml is as the below
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorTransparent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:layout_margin="20dp"
android:orientation="vertical">
<ImageView
android:id="@+id/a"
android:layout_width="match_parent"
android:layout_height="120dp"
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="20dp"
android:gravity="center_horizontal"
android:text="Your Custom Dialog"
android:textColor="#ff000000"
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>
It has the same dialog structure as the previous one. A twitter image, text and two buttons.
But I have set the background of square in which twitter image, text and two buttons are present, as the WHITE color.
For real view of this dialog, you can see the output video present at the bottom end of this tutorial.
Third File
Under the same directory, prepare another XML file named third_dialog.xml
Code structure for third_dialog.xml is as the following
<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/redTransparent"
android:orientation="vertical">
<ImageView
android:id="@+id/a"
android:layout_width="match_parent"
android:layout_height="120dp"
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="20dp"
android:gravity="center_horizontal"
android:text="Your Custom Dialog"
android:textColor="#fff"
android:textSize="20sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="OK"
android:textColor="#000" />
<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:textSize="20sp"
android:textColor="#000" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
This file also create custom dialog with same elements.
But it will hold the red background with opacity 127.
I have set the red color with opacity 127 at the root element of this file, which is RelativeLayout.
Step 3. Last Main Changes
Now it is time to make final changes in this project.
Copy the below coding lines in your activity_main.xml file
<?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>
- I have taken three buttons in this file.
- Every buttons will create custom dialog using different drawable XML files which we have just created in step 2.
Code snippet for MainActivity.java is as the following
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.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.dialog_transparent);
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.dialog_second);
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.third_dialog);
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();
}
}
Consider the below coding lines
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");
}
});
There are three button clicks in the above snippet.
Compiler will call showDialog() method when the user clicks the first button.
It will call showDialogSecond() method when the user clicks the second button.
On the click of third button, compiler execute the showDialogThird() method.
Code 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.dialog_transparent);
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();
}
Compiler will create the object of the Dialog class.
Then it will set the content view as the dialog_transparent.xml file.
So this custom dialog will have the view created by the dialog_transparent.xml file.
Then compiler will set the text in the textview of the dialog.
After this, compiler will set the button clicks for OK and CANCLE button.
Finally, dialog.show() method will create the dialog with a transparent background.
Similarly, showDialogSecond() method and showDialogThird() method will create dialogs.
- showDialogSecond() method will inflate dialog_second.xml file and showDialogThird() method will inflate third_dialog.xml file.
Thus, you have seen that creating a custom dialog with transparent background is not a complex task if you make it with proper XML file.
Transparent background with any color is also possible with little trick and tips.