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.

Comments

  1. How would you go about adding a text field and making one button enter that text into a field?

    ReplyDelete
  2. I didn't understand your question. If you are asking how to add Edittext field in Dialog Box, watch this: https://youtu.be/RT9PXi8aXfA

    ReplyDelete
    Replies
    1. Appreciate the quick response. Sorry about that question it was poorly worded.

      I actually figured that part out. The only thing left that I need regarding this is the ability to add a checkbox to the dialog window.

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. You have to use Intent:
      http://www.sketchwarehelp.com/2017/07/how-to-create-new-screen-and-link-it-in.html?m=1

      Delete
    2. This comment has been removed by the author.

      Delete
  4. You did not understand me, what I wanted to say is that how do I touch the button of the custom dialog box to send me to another page.

    ReplyDelete
    Replies
    1. Change button1 Click code above to what is given below.

      but1.setOnClickListener(new OnClickListener() { public void onClick(View view) {

      Intent intent = new Intent(getApplicationContext(), YourNewActivity.class);
      startActivity(intent);

      } });

      Delete
    2. Or you can divide the code and use blocks in between.

      Delete
    3. Can you post the divided snippets I tried this and nothing I tried worked

      Delete
    4. Would you modify the snippets so that a set image block can be used?

      Delete
    5. I dont want to offend u but your questions sound to me like "would you program my whole project pls"

      Delete
  5. Hi i want do a locker for app (in main activity with a customwiew name vip) that when i press button 1 is checks if the value of text is equal to value given of me.
    I tried to do the code but i just failed :(

    There it is

    final AlertDialog vip = new AlertDialog.Builder (MainActivity.this).create ();
    View
    inflate = getLayoutInflater ().inflate (R.layout.cust, null);
    vip.setView (inflate);
    Button
    but1 = (Button) inflate.findViewById (R.id.button1);
    but1.setOnClickListener (new OnClickListener ()
    {
    public void onClick (View view)
    {
    (vip.this.edittext1.getText ().toString ().
    contains ("Value"))} dialog2.dismiss ()};
    }});

    dialog2.show ();

    ReplyDelete
  6. I want to know how i can use this code with a edittext, and make the value from the edittext go to another string

    ReplyDelete
    Replies
    1. You can create the EditText programmatically and set it as View of Dialog, or add it to any View in CustomView. Check this: https://youtu.be/ZuwQRGlgbC8

      Delete
  7. how to add a function that when a button click once a function done and on second click another function done

    ReplyDelete
    Replies
    1. Use a number variable increase by one on click and if "variable" equals 1 do for a if "variable" equals 2 do for b

      Delete
  8. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. I stand corrected. I made a mistake in the layout

      Delete
  9. Im having a very strange issue. I got the custom dialog to work, then I modified it to have a checkbox instead of the second button, that also worked. Then I set the behavior for the checkbox when checked. That also worked. But when I copied the code and pasted it to the app that I want to use it for, it keeps giving me an error while its compiling, saying cannot resolve checkbox1. I checked three times and the id of the checkbox is checkbox1. I put an exact copy of the code from the working app, and even saved the layout to my collection and used it inbthe second app so it should be completely identical. Please help me out, I feel like there is some supernatural thumb holding me back once again just as I have a little success

    ReplyDelete
    Replies
    1. 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);
      checkbox1 = (CheckBox) findViewById(R.id.checkbox1);
      but1.setOnClickListener(new OnClickListener() { public void onClick(View view) {
      MainActivity.this.finish(); } });
      checkbox1.setOnClickListener(new OnClickListener() { public void onClick(View view) {
      preferences.edit().putString("new", "false").commit();
      } });
      dialog2.show();

      Delete
    2. You didn't Create "checkbox1" in the second app.

      Delete
  10. Write it as
    CheckBox checkbox1 = (CheckBox).....

    ReplyDelete
    Replies
    1. Hey! How to do this with linear1?

      Delete
    2. LinearLayout linear1 = inflate.findViewById(R.id.linear1);

      Delete
  11. It shows COMPILE LOG in NEW SKETCHWARE;

    ReplyDelete
    Replies
    1. Press enter before the two { public void onclick(Viewview)

      Delete
  12. Is it possible to set image view in response to previous events I'm trying to display custom dialog on image click and I want the dialog to display the clicked image

    ReplyDelete
    Replies
    1. Put an ImageView in CustomView. Use findViewById to define an ImageView, and setImage of that ImageView from the path or location of image.

      Delete
    2. The images are all app resources whats the easiest way to set the image

      Delete
  13. This comment has been removed by the author.

    ReplyDelete
  14. How can I add edittext in this custom view along with buttons. And get the text of edit text in a string?

    ReplyDelete
  15. Is it possible to make the corners round?

    ReplyDelete
  16. How to change other page from custom dialog.

    ReplyDelete
  17. How to set ImageView image programmatically in Custom dialog box in Sketchware using CustomView ?

    Please give me 2 lines of that code only.
    It's urgent needed Sanjeev Sir. 🙏🙏🙏

    ReplyDelete
  18. I had added a webview "web" in custom dialog and i want it to go back when a button is pressed but it gives error "Cannot refer to the non-final local variable web defined in an enclosing scope" please solve this

    ReplyDelete
  19. How can i add a gridview on the customlist ?

    ReplyDelete
  20. How can i open link on button click in dialog? Thank you

    ReplyDelete
  21. How can i open link on button click in dialog? Thank you

    ReplyDelete
  22. Why its show error everytime i'm using dialog.dismiss();

    ReplyDelete
  23. Como adiciono uma fonte no dialog custumizado?

    ReplyDelete
  24. How to Close (dismiss) the Dialog on an another Method?
    For example: Show Dialog in on create and dismiss it on Network Response (componement requests Network on Response) ? It says Dialog can not be resolved to a variable...

    ReplyDelete
    Replies
    1. Declare the AlertDialog in a More Block by placing } and { before and after declaring it.

      In more block:-
      }
      AlertDialog dialog2;
      {

      In onCreate:-
      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();

      Delete
  25. I have a problem, when running the app, I get an error that says that the findViewById code is undefined for the view type

    ReplyDelete
  26. Hullas dialog chiqarish oson ekan men urgandim
    Faqat dialogni orqa fonini olib bulmayabdi

    ReplyDelete
  27. I want to add a spinner to dialog box

    ReplyDelete
  28. Thank you sir! Once again you've provided solid code that worked flawlessly.

    ReplyDelete
  29. i have this error: Cannot refer to the non-final local variable inflate defined in an enclosing scope

    I don't know why

    ReplyDelete
  30. My sketchware doesn't want to connect to the internet, and it's affecting me from accessing firebase and other functions that require internet connection in the app, what do I do?

    ReplyDelete
  31. How to make it not cancelable?

    ReplyDelete
  32. How can I make it so that when I load a website in my webview I can touch a button and autocomplete the previously saved data?

    ReplyDelete
  33. How can I debug this errors please help me out,
    [/rage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/customlist.xml:8: error: No resource identifier found for attribute 'cardElevation' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/customlist.xml:8: error: No resource identifier found for attribute 'cardCornerRadius' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/main.xml:24: error: No resource identifier found for attribute 'tabGravity' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/main.xml:24: error: No resource identifier found for attribute 'tabMode' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/main.xml:24: error: No resource identifier found for attribute 'tabIndicatorHeight' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/main.xml:24: error: No resource identifier found for attribute 'tabIndicatorColor' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/main.xml:24: error: No resource identifier found for attribute 'tabSelectedTextColor' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/main.xml:24: error: No resource identifier found for attribute 'tabTextColor' in package 'com.my.storysaver', , /storage/emulated/0/.sketchware/mysc/604/app/src/main/res/layout/main.xml:24: error: No resource identifier found for attribute 'tabTextAppearance' in package 'com.my.storysaver', ]

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware