Android custom dialog with image, title, close and two buttons

android pick video from gallery or camera, android take screenshot, android take scrollview screenshot, android custom dialog with image and title

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.

android custom dialog with image and title
Dialog view

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

via GIPHY

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.