Create HTML Dialog in Sketchware

March 04, 2023

Introduction

Dialogs are important part of sketchware coding. But due to limitations of dialogs customizations, it is hard to add new view in it. And also customization of that view is hard. But a Sketchware dev created a much better solution for showing view in dialog. And it unlock new opportunities for sketchware devs to create better app with sketchware.

In this project we are creating a dialog which uses html to show it's content. We'll use webview as custom view for dialog, and then load html in it.

Our final result is going to look like this this ->

So let's create it.

Sketchware Project creating

*There is nothing to do in oncreate section

Create a new project in sketchware and add a button in the view section.

Then go to button Onclick

Add all the block described here.

1. Add an ASD Block with code.

AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);

This will create new dialog, There is no need of adding dialog from components.

2. Create a new string named html and add a block which Sets String to html

For demo purpose add this code to your string

<html>

<head>

</head>

<Fer3>

<Fer2>html</Fer2> Dialog created with html <br>

<Fer1>html</Fer1> Elefante <br/>

<Fer1>html</Fer1> Pingüino <br/>

<Fer1>html</Fer1> Caballo <br/>

<Fer1>html</Fer1> Cuervo <br/>

</Fer3>

</html>

You can change it to your desired html but you have to add CSS inside the html.

3. Add dialog blocks, Inside these blocks add a ASD block and write the code which I given to you.

Add blocks Set Title, Set message, ASD, Ok button (optional), Dialog show.

In ASD Add this code

WebView htw = new WebView(MainActivity.this);

htw.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);

dialog.setView(htw);

Now you have to set dialog to our created dialog in step 1.

Click on dialog selector then click code editor and Fill the same name we used in step 1.

Click Save and arrange all the blocks in serial manner as shown in picture

Now come back and click run and you'll see a new style dialog in Sketchware.

Final Words

Thanks for reading this post. If you are also a sketchware dev and you have created useful projects then you can share them to me at telegram @haryanvee and I'll add them to this blog with proper credits.

If you have any problem creating this project then contact me at telegram I'll surely help you out.

Thanks for reading

Create HTML Dialog in Sketchware

Introduction

Sketchware Project creating

Contact Form