Android Tutorial WebView Tutorial

WebView tutorial

I wanted an easy way to provide in-app documentation such as help screens etc.

I was thinking of going with the CustomListView and then trying to colour some of the lines of text etc. but then someone suggested that he used the webview to do this.

When I started figuring out the webview I remembered that I have an excellent free web designer package that is really easy to use and comes with templates.
I wondered if I could get the webview to work with this and after a little experimentation I found that I could.

Here's how I do it.

As an example we start out with a simple project. There are just two activities, the main activity has some buttons on it, each button first loads the name of the page
that we wish to load into a global variable and then it calls the second activity which houses the WebView.

This is done very simply, I'm sure there are better programatical ways of doing this but lets keep it simple for now.

activity Main has one centered panel with six buttons on it then activity WebView has just one centered WebView on it which fills the screen.

I provide the empty project for you to look at as WebView2Empty.zip

Now go along to www.serif.com and download the free WebPlus x5 starter and install it.

Now I load up Serif WebPlus and create a new project using a template.
When you create a project with Serif WebPlus you can save your project and it is saved as one single file with the extension .wpp
It is not so important where you save this just as long as you remember when you need to load it back up. I save it in my B4A project folder.

WebPlus then gives you the option to publish to a disk folder.

In this example all I did was load up a template, untick all but six screens, save the project then publish to a disk folder and I published it directly to the Files folder of my WebView2 project.

I would like to point out that this is a pretty complex template and in practice you would probably not use a template at all and you would be starting from scratch to get a cleaner less complicated look.

When I now look in my B4A project's Files folder I can see there are two extra folders called wpimages and wpscripts and that I have the six html files there.

I didn't have to import any files in B4A, just as long as they are in the physical disk folder 'Files' within my project then the WebView can find them and they get compiled into the finished .apk file.

In my example here I altered activity Main like this:

B4X:
Sub Button1_Click
   page = "index"
   StartActivity("webview")
End Sub
Sub Button2_Click
   page = "page2"
   StartActivity("webview")   
End Sub
Sub Button3_Click
   page = "page3"
   StartActivity("webview")
End Sub
Sub Button4_Click
   page = "page4"
   StartActivity("webview")
End Sub
Sub Button5_Click
   page = "page5"
   StartActivity("webview")
End Sub
Sub Button6_Click
   page = "page7"
   StartActivity("webview")
End Sub

and in the Sub Process_Globals I have the global variable
Dim page As String

Then I altered activity WebView like this:

B4X:
'Activity module
Sub Process_Globals
   'These global variables will be declared once when the application starts.
   'These variables can be accessed from all modules.

End Sub

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   'Do not forget to load the layout file created with the visual designer. For example:
   Activity.LoadLayout("WebView")
   If Main.page <> "" Then
      WebView1.LoadURL("file:///android_asset/" & Main.page & ".html")
   End If      
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

The finished result is in WebView2Full.zip

Couple of points.
The provided example is done just by loading up a template in WebPlus, unticking all but six of the pages and that's all I did.
Pressing the back button takes you back to your activity Main with the buttons.
For in app documentation I would start from scratch, not using a template, make the pages very simple and if you don't put any links to any external
websites then you don't need internet permissions in your app.
The entire apk size with all this 'complete website' in it is 921k
You can zoom in to a webview using the spread apart fingers gesture or the zoom buttons at the bottom, you can zoom out by using the pinch gesture or the buttons.

As Basic4Android continues to improve its getting a lot quicker to do Rapid Application Development in it.

I wanted to quickly knock up a WebView example and this only took me about 20 minutes! However just choosing a template from WebPlus incorporates all kinds of graphics etc. so I didn't pay much heed to the size of the files. The WebView2Empty.zip is only 142kb so I could upload it here but the finished WebView2Full.zip is nearly 3mb oops :) and the WebView2.apk is nearly 1mb oops :)

I have put these on my server and they can be accessed here:
www.GoodFunThings.com/WebView2Full.zip
www.GoodFunThings.com/WebView2.apk

A realistic project using simpler pages would only be a fraction of that size.
Please see my first project here:
http://www.b4x.com/forum/basic4android-updates-questions/24321-webview-example-pimp-up-your-app.html
 

Attachments

  • WebView2Empty.zip
    142.3 KB · Views: 4,883
Last edited:

codemanager

Member
Licensed User
Longtime User
Hello,

I wanted to load a local html file in webview so I made an html file and put it in my files folder. The webview is there in my layout file. Then i used this method as shown
B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    WebView1.LoadURL("file:///android_asset/index.html")
End Sub

But the above code gives me "Webpage not available". The Web Page at file:///android_asset/index.html could not be loaded as: The requested file was not found. index.html

Am i missing something? All i want to do is to load a local html file into a webview. Also this html file has not images only text.

Thanks for guidance!
 

NJDude

Expert
Licensed User
Longtime User
Try this:
B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")

    myHTML = File.ReadString(File.DirAssets, "index.html")
    
    WebView1.LoadHTML(myHTML)
End Sub

If you have pictures, you will have to modify your HTML and point the source to the assets directory.
 

IanMc

Well-Known Member
Licensed User
Longtime User
That is strange.

You could try with other html files, also check that the index.html file hasn't been deleted as if you don't add it to your project and do a 'clean' this can happen.

NJ's tip should make it clearer if the problem is that it can't find the file (which is what it is saying).

Can you make a simple project, zip it up and post it here then we can analyse it.

Does my example work on your machine?
 

codemanager

Member
Licensed User
Longtime User
thanks for your help NJDude! your code worked perfectly : ) Also thanks for pointing out newbie resources as i'm new to B4Android and loving it, cheers
 

codemanager

Member
Licensed User
Longtime User
thanks for the example project IanMac! I downloaded WebView2 Example and when i run it i get to the activity where there are buttons for various pages but clicking on either of the buttons shows me the "Webpage not available". The Web Page at file:///android_asset/index.html could not be loaded as: The requested file was not found. I also checked with Files tab and all the html files are in there. I'll try it a couple of times again tomorrow and will update you! thanks for all the help and yes i'm new to b4android and loving it, cheers!
 

IanMc

Well-Known Member
Licensed User
Longtime User
Ok cool, glad you are loving B4a, we all are :)

An interesting problem you are having there so when we inevitably figure it out it will be interesting to find out what the problem is.
 

rbghongade

Active Member
Licensed User
Longtime User
Dear IanMc,
Thank you for the great tutorial on Webview.
I could generate the ebook , but missing out as to what template should I select so that the page fits to a cell phone screen. Your example of "A Turkey For One" is the one I expect of my ebook. If you could please upload one such example project (complete with source) , I would appreciate that greatly!
My intention is to create an ebook using the word file already typed by me.
regards,
 

IanMc

Well-Known Member
Licensed User
Longtime User
Hi RB

Just the fact that you have got this far tells me that you are a good programmer.

Keep at it, here is the source for A turkey for one.

Keep learning and soon you'll be earning :)

ian
 

Attachments

  • A_Turkey_for_one.zip
    29 KB · Views: 711

IanMc

Well-Known Member
Licensed User
Longtime User
Hey RB, I hope you noticed that it was really the story that you liked in my 'A turkey for one' and that made you look beyond the clunky way I displayed it.

I hope this will instill in you a desire to present a story in a much better way than I did it.

Let me know if I can help.
 

rbghongade

Active Member
Licensed User
Longtime User
Dear IanMc,
Thank you for your super-quick response. Because of people like you I dare to write programs! BTW I work as a Professor in Electronics & Telecom Engineering and desire to share my technical understanding with any and everyone! I want to write about the intricate concepts in easy language and distribute the same freely. Due to B4A and this forum, with friends like you and Erel , I , have found a way to do so!
Thanks once again!
regards,
 

coslad

Well-Known Member
Licensed User
Longtime User
I didn't understand a things .
Your html page fills horizontal the device display , i tried it on a galaxy s and on a note 3 .
How do you make it possible ?
 

luisftv

Member
Licensed User
Longtime User
Try this:
B4X:
Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")

    myHTML = File.ReadString(File.DirAssets, "index.html")

    WebView1.LoadHTML(myHTML)
End Sub

If you have pictures, you will have to modify your HTML and point the source to the assets directory.



This code did work for me too... but I have a few questions:

1. Why the code WebView1.LoadURL("file:///android_asset/index.html") does not work but the one using myHTML does?

2. In my code screen, the myHTL is red. Why? It does work though... I just want to understand.

3. Also, my html file contains a picture which loads correctly from withing the assets, but, after zooming the text I have to scroll left and right to read it. If I remove the picture, then the zoomed text gets automatically re-position on the screen and there is no need to scroll. While having the picture, how can I stop it from scrolling left and right so that it wraps and re-positions on the screen automatically.

4. I was also able to load an "mht" file, instead of an html. However, it did not display all the formatting correctly or the embedded pictures. Does Android support "mht" files? How?

Thanks.
 
Last edited:

Izmirov.Yaminovich

Member
Licensed User
Longtime User
I'm trying to stream ip camera using webview, it is possible? Because at the webview the layout for the web has been finish loading but in the area that show the live feed, it show "couldn't load the plug in"...is there any plug in for the webview to stream the ip camera or it must use videoview?
 
Last edited:
Top