Custom dialog box in Sketchware using CustomView

The CustomView can be used to create a custom dialog box in Sketchware, by using simple codes.

Follow the steps below to create a custom dialog pop-up.

1. In VIEW area of your project add a new CustomView.

In the image above I have added a new CustomView 'cust.xml'.

2. Design the CustomView the way you want your custom dialog box to look like.

In the image above, I have added an ImageView, two TextViews, and two Buttons (namely 'button1' and 'button2').

3. Choose the event on which you want to show the dialog. It can be onBackPressed or onButtonClick, etc.

4. On the event when dialog is to be shown, use add source directly block to create and show the dialog box.

In the image above I have added the code to onBackPressed event. The code used is explained below.

a) First use the code to create a dialog.

final AlertDialog dialog2 = new AlertDialog.Builder(MainActivity.this).create();

Note that here 'MainActivity' is the name of the screen or java file in which the code is being used. Also note that 'dialog2' is name of the dialog box created.

b) Next, use code to set the View of dialog box to custom view.

View inflate = getLayoutInflater().inflate(R.layout.cust, null);
dialog2.setView(inflate);

Note that here 'cust' is name of the CustomView xml file.

c) Set title for the dialog box (optional).

dialog2.setTitle("Exit");

d) Define the buttons used in the CustomView.

Button but1 = (Button) inflate.findViewById(R.id.button1);
Button but2 = (Button) inflate.findViewById(R.id.button2);

Note that 'button1' and 'button2' are id of the buttons added in CustomView, whereas 'but1' and 'but2' is the name with which the buttons have been defined.

e) Write code to perform some action when button is clicked.

but1.setOnClickListener(new OnClickListener() { public void onClick(View view) { MainActivity.this.finish(); } });

but2.setOnClickListener(new OnClickListener() { public void onClick(View view) { dialog2.dismiss(); } });

The code above finish MainActivity (exits app in most cases) when button1 is clicked. And it dismiss the dialog box when button2 is clicked.

If you want to perform some other action when buttons are clicked, you can modify the code as per your requirement.

f) If you want that the dialog does not disappear when you click outside the dialog box, add the following code.

dialog2.setCancelable(false);

g) Write code to show the dialog.

dialog2.show();


So, the complete code for a custom dialog box may look like this:

final AlertDialog dialog2 = new AlertDialog.Builder(MainActivity.this).create();
View inflate = getLayoutInflater().inflate(R.layout.cust, null);
dialog2.setView(inflate);
dialog2.setTitle("Exit");
Button but1 = (Button) inflate.findViewById(R.id.button1);
Button but2 = (Button) inflate.findViewById(R.id.button2);
but1.setOnClickListener(new OnClickListener() { public void onClick(View view) {
MainActivity.this.finish(); } });
but2.setOnClickListener(new OnClickListener() { public void onClick(View view) { dialog2.dismiss(); } });
dialog2.show();

5. Save and run the project. The custom dialog box will show when back button is pressed.