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:
and in the Sub Process_Globals I have the global variable
Dim page As String
Then I altered activity WebView like this:
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
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 Suband 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 SubThe 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
Last edited:
