Create HTML Dialog in Sketchware

 

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 ->

Dialog using html in sketchware

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>
        <style>html{background-color: #FFFFFF; color: #303030;}Fer3{line-height: 2; display: block;}Fer2, Fer1{padding: .2rem .4rem; border-radius: .25rem;}Fer2{background-color: #d5dee2; color: #506874; font-weight: bold}Fer1{color: #ffffff; background-color: #31A1FF}</style>
</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 ytvigaming 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

Comments

Post a Comment

Popular posts from this blog

Sketchware Generate Firebase Dynamic Link (Long Url To Short) | sketchware blocks explained

Image
  So Today I am going to discuss how to make long url to short link with firebase dynamic link Table of Contents View So first I'll design a ui for this app here is a example of app ui. I used a  edittext  to get long link a  button  to generate link. A  textview  to get generated link.                                      ui example Library Add firebase project in your sketchware and turn on appcompact library.                               Add Firebase Example Oncreate Leave oncreate section empty  Components section   Add a request network component as shown in picture. On Button Click Add a  string  I used  url_to_shorten  as string name Add an another string named json In the value of json put this a join and another join block inside this block.  Code for first part {    "longDynamicLink": "https://sketchprojects.page.link/?link= Change with you dynamic link  After that add you string variable (whose value is long url) Code for second part ",      "su
Read more

what is sketchware and history of sketchware

Image
What is sketchwere   Sketchware is an integrated development environment (IDE) inspired from the language Scratch, which allows you to develop, compile, and build an Android application directly on your smartphone, without any help from a PC. It uses block language like Scratch, an innovative programming language invented by MIT that transforms the complex language of text-based coding into visual, drag-and-drop building blocks. It’s okay if you do not know anything about developing Android apps.   History of sketchwere Sketchware started in 2016 when the founders quit their original jobs to dedicate their time and efforts to creating the most convenient and flexible app development tool for people without extensive programming background knowledge. The idea was to help people learn faster by effortlessly creating android applications on their smartphone. Sketchware is an online application development platform intended to develop applications through a smartphone.  The comp
Read more

How to import local library in sketchware

Image
  Hey Coders, In this post I'll tell you how to import local library in sketchware. This is very useful when you try some new widget.  How to get dependency For that you need to have library dependency. You can get dependency from GitHub or documentation page of the widget.  For example I am trying to download library for nobo button.  I go to GitHub and search for this code containing dependency. And now copy the code written after dependency. By copying this code I get this line  com.ornach.nobobutton:nobobutton:1.6 This code is separated by two ':'  Now come to sketchware open any project then click on 3 dots.  Then scroll and search for option of local library. You will get it below custom blocks and above native library option. Open this option and here you'll get all library list that you're having in sketchware. You can enable or disable any library.  Above all these libraries you'll find an icon representing download file.  Click on this icon and then a
Read more

Create Percentage loading bar in sketchware

Image
  Helo Guys, Today i am going to tell how to make percentage loading bar in sketchware. How it works in Sketchware Pro ? For example you add a progress bar in sketchware and it looks normal but there is a method in which you can add a textview which will show how much percent is loaded. And the best thing is that this textview will be interlinked with progress bar. So let's start our project View manager In view manager section I have added a linear named  load   a progressbar named  progressbar1  and a textview named  persen  . Components manager In components manager I added a timer named  t  and a intent named  I  Oncreate I have added a number variable named  n .  1. Set number  n  to  0 2. Timer after  100ms  for every  100ms 3.  progressbar1  set progress  n 4. Add code which I had given below 5. //Do whatever you want when progress = 100 6. If  n=101  set  n  to  0  else  n  increase  1   Use this code in asd if (n==0) { persen.setText ("0%"); } if (n==1) { persen.
Read more

how to import export custom blocks sketchware

Image
  Sketchware pro custom blocks are the easiest way to do a complex operation without writing so long codes and without doing unnecessary research. In old time when sketchware original was working then everyone was using Moreblocks. You can get a large collection of Moreblocks from this link. Link:- coming soon on tha way But now you can use a combination of Moreblocks and blocks for very good coding experience.  So today I am going to tell you how to import and export sketchware custom blocks.  So Hello coders, There are two things in sketchware pro the first one is import and the second one is export. So you need to understand what they mean.  Import Blocks So block import means you have a json file of blocks and you install this json in sketchware and new blocks will appear in editor area.  Export blocks Export blocks means you have already installed blocks and you want to Share the blocks anywhere, so here when you click to export you will get a json file.  How to export blocks To e
Read more

Sketchware Generate Firebase Dynamic Link (Long Url To Short) | sketchware blocks explained

Image
So Today I am going to discuss how to make long url to short link with firebase dynamic link So first I'll design a ui for this app here is a example of app ui. I used a  edittext  to get long link a  button  to generate link. A  textview  to get generated link. Library Add firebase project in your sketchware and turn on appcompact library.                               Add Firebase Example Oncreate Leave oncreate section empty  Components section   Add a request network component as shown in picture. On Button Click Add a  string  I used  url_to_shorten  as string name Add an another string named json In the value of json put this a join and another join block inside this block.  Code for first part {    "longDynamicLink": "https://sketchprojects.page.link/?link= Change with you dynamic link  After that add you string variable (whose value is long url) Code for second part ",      "suffix": {     "option": "SHORT"    } } Then creat
Read more

Android 10/11 Storage Permission sketchware | New blocks + method

Image
 After the release of android 10 and 11 storage permissions and codes regarding storage permissions stop working. No matter which software you use, it become a problem for every android developer. In this post i will tell the method to get storage permission in Sketchware Pro. Method 1 Change your max api level to 30. To do this work, Open your sketchware app and long click your project. you'll see a option menu displayed under you sketchware pro project. Click on config option and a dialog will appear. In this dialog a number 28 will appear change this to 30. And done, your first thing is done. Method 2 For this method you need to use sketchware pro aab support. If you not have you can download from this link. Link: https://swrevo.blogspot.com/2021/09/sketchware-pro-all-versions-apk.html?m=1 Download sketchware pro aab support from this link. Then Go in the project and then click on setting icon in side of run button. Then change all option to 2nd position as shown in picture. The
Read more

Auto Get text from camera || OCR in sketchware || free project | Sketchware pro tutorial

Image
  Hey fellow sketchware coders, I know many of you are working on some projects which requires ocr (optical character recognition) But not getting success in ocr. So Today I am here to present sketchware ocr project and tutorial. Note:  All files and links are provided below this article. Some examples of app where you can use ocr • Questions search app • Tanslator app • Also you can modify it for extracting text from pictures In this project only realtime ocr is made. If you want text from pictures ocr. Then comment below this post. To start, Make a project in sketchware You need to have google vision library. If you don't have then please download it and if you have then enable it. Look at this example your app will do function like this. Turn on your Google vision library. After that you need to make your app design You'll need  1.  A linear for making of camera layout 2.  A textview for getting text. Look at my example In this example linear1 is main layout. Linear2 is came
Read more

Image filter moreblocks for making black and white imageview

Image
  A Black and white image speak much more than a colourful one. Hello Sketchware users, in today's post i'll tell about moreblock, which you can use for making a imageview black and white in sketchware. And also there is other moreblock to remove this filter.  View Editor Sketchware In View editor add a imageview, Set a colourfull image for this imageview and a button (just for now to learn),  We will write the codes in such a way that on button click first time the color will change to black and white and on again click the color will change to colourful. For doing this we will make a boolean with any name in sketchware. In my case i make a boolean named img. Event editor Sketchware Make a boolean named img. In Oncreate Set  Boolean img to false  ,  On Button click, Add The same condition as shown in picture. Now Run your project and try clicking on button. The color of imageview will change. Moreblocks You can download the moreblocks from this link.  Link:  As Always, if an e
Read more