How to insert html code in Android app created with Sketchware

How to insert HTML code to Android app created with Sketchware?

If you are not using Sketchware, you need to know that it is an Android app which can be used to develop real android apps using block language, directly on your Android device. Download Sketchware

Here is a step by step guide to inserting HTML code into your app in Sketchware.

Step 1
Start new project and fill details in project settings.

Step 2
In your app View in Main.xml or any other page where you want to insert HTML code, insert webview widget.

Step 3
Now go to Logic of your page (MainActivity.java for Main.xml) and in onCreate event use following block:
WebView ......... loadUrl .............

Now fill this block as below:
WebView webview1 loadUrl data:text/html, <html > <title> </title> <body> Write your HTML code here. </body> </html>

Step 4
Also add onBackPressed event and use following blocks:
If webview1 canGoBack
   WebView webview1 goBack
else
   FinishActivity

Step 4
Save and Run your app. Your app will show contents of your HTML code at the place where webview is located.

You can use CSS and JavaScript in your code. You can insert links to gif and images.

To enable the links in the HTML code, and to enable JavaScript in the HTML code, insert the following code using code injection technique in Sketchware:

WebSettings webSettings=webview1.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setJavaScriptCanOpenWindowsAutomatically(true); if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) { webSettings.setAllowFileAccessFromFileURLs(true); webSettings.setAllowUniversalAccessFromFileURLs(true); }

Comments

  1. Replies
    1. If you are editing the code then see this tutorial: https://developer.android.com/guide/topics/ui/layout/gridview.html
      Else to create gridview like view in Sketchware watch this https://youtu.be/6HIDwm0HXXo

      Delete
  2. hello friend, where will the accompanied image files go.

    ReplyDelete
    Replies
    1. You can either write the web url of image in html, or you have to create assets folder, add image and link to it using apk editor pro.

      Delete
    2. you can embed the image as base64 if you use this technique (url containing html code)

      Delete
  3. Dear SANJEEV, I have tried using apk editor pro, assets folder...but how to give the link?

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. It works well with local html file and jpeg files in assets folder but not with insert code method

      Delete
    2. Yes links do not work when you insert a html file in assets folder. Also JavaScript do not work, because they are not enabled.

      Delete
    3. You can inject codes to make them work, but I am not aware of the codes.

      Delete
    4. I have updated the code to be inserted by code injection to enable external links and to enable JavaScript.

      Delete
  5. I also liked your video on youtube very much.. I also liked your quiz program
    Thanks again.. Keep up the good work

    ReplyDelete
  6. Replies
    1. I have added an Image in step 4 to make it clear.

      Delete
  7. Apakah ini bisa bekerja untuk facebook..?

    ReplyDelete
  8. your forth step's pic give me new idea thanks

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. how can i import PDF files in sketchware?
    thanks in advance

    ReplyDelete
  12. Pleassssse i dont't want make gif
    iwant to import gif from my device but it dosent support
    What can i do please??

    ReplyDelete
  13. The app doesn't work the JavaScript what should I do.

    ReplyDelete

Post a Comment

Popular posts from this blog

A Flash Light App in Sketchware

Create Music Player app in Sketchware

Simple car racing android game in Sketchware

In Sketchware: How to create a calculator for any simple formula?

Firebase auth in Sketchware for Login Activity