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.
Other dialog related examples
Download Source Code
[sociallocker]Download Custom Dialog Source Code[/sociallocker]
End of this android custom dialog with image and title tutorial for now. Share demonut’s tutorial with other students and learners. Thank you.