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,893
Last edited:

IanMc

Well-Known Member
Licensed User
Longtime User
idea!

You know what else this could be used for?

You could write your own book and sell it!

Allow the download of a 'trial' version of the book for free which allows the user to read the first few chapters, then if they want to read the rest of the book they have to purchase the complete version!

Novels
Childrens story books with pictures & sounds
Technical manuals

Time to revisit that half-finished novel hidden away in the cupboard :)
 

Beja

Expert
Licensed User
Longtime User
Dear IanMc,
Thanks for sharing this great effort<

The webpage is designed to be displayed on desktop machines, and it would
be a good idea if you considered redesigned it for mobile devices.
Except the home page, all other pages are off-screen (wider than moble
devices)..
Another thing, and since this is a web app, then it would be better if you locked
it in the landscape orientation by selecting Landscape Only. Again, only the
homepage that is optimized for Landscape.
 

IanMc

Well-Known Member
Licensed User
Longtime User
Yes, very good points Beja, thank you.

I just chose a template from WebPlus, unticked all but six webpages and published it to the Files disk folder in my B4A project.

You are correct that this template was designed for the desktop but I just wanted to see what the WebView can handle. Apart from the massively complicated flash gallery object which my device doesn't handle, all the rest works very nicely.

Just creating a 'website' from scratch in WebPlus and using much simpler pages would allow for the pages to fit the screen without the need for scrolling, although you can always zoom in and then scroll.

I would not wish to lock the screen into landscape mode as orientation changes seem to work very well with the WebView and locking to landscape might introduce unseen problems on some devices.

If you did wish to do this though then locking only the homepage to landscape might be achieved by having a seperate activity with a WebView which only displays the homepage and is locked to landscape.

Also going along with my 'book' idea then it would be cool to capture the 'clicks' on the WebView in code so that you could do things like display a thumbnail graphic of a picture or diagram, then when the user presses the thumbnail the full version of the graphic could be loaded into a second activity WebView, then they can zoom and scroll around the graphic as needed, pressing the back button will take them back to exactly where they were in the 'book' again.

For a Childrens book this could be a small thumbnail of an animal, when the user presses the graphic a second activity/WebView opens displaying a larger animated gif of the animal and playing the sound that the animal makes.

Also useful for technical manual diagrams though perhaps without the animal sounds :)
 

Beja

Expert
Licensed User
Longtime User
IanMc,

thanks for the tip of publishing or advertising a book this way.. agree with you
it is very efficient and low-cost method for someone who is on budget like
myself.
Not revealing a secret in telling you that I am now mid-way in writing a book
about my long experience in China (about 7 years), and will try your method.

p.s.
will post this on the questions forum as well.
 

IanMc

Well-Known Member
Licensed User
Longtime User
Wow! I would be very interested to read your book.

I think if we give ourselves the tools then making things becomes a lot more fun.

Using something cool like WebPlus gives us the ability to make colourful and fun html which can be used on our websites and of course within our B4A apps.

We have B4A which makes it fun to make Android apps.
As android devices continue to explode onto the market, and I'm thinking tablets here, the market is growing and there is room for everyone.

Having these amazing tools gives us incentive to write those apps when we think 'oh now that I have this, I can do that idea that I thought about ages ago' or we think 'oh, that's interesting and gives me an idea for a new app'

Someone might say 'Yes but there are already lots of eBook readers out there that do the job' but I think we can do it better with our own programming making colourful well-crafted documentation or books to enhance our apps.

I hope that if you create a really good book app and you put the first half of your book in it that it will give you the incentive to finish your book.
 
Last edited:

IanMc

Well-Known Member
Licensed User
Longtime User
First eBook

:)

This one's a bit smaller.
 

Attachments

  • A_Turkey_For_One.apk
    178.6 KB · Views: 1,082

tekh2999

Member
Licensed User
Longtime User
Webview

Works Great, thanks. This can also be done in Microsoft Publisher, if you already have it no need to download Webplus x5. I've already made a few pages with it, it's a little more user friendly, it also creates the pages or indexes when you publish your page, pretty simple stuff, zoom and pinch work fine.
 

tekh2999

Member
Licensed User
Longtime User
webview

This realy opens up alot of possiblities when you think about it. I'm gonna try and publishing a page with Visual Studio and see how that works out as well. I believe that any software capable of creating the html with pages or indexes then your good to go. I'll let you know when I'm done.
 

IanMc

Well-Known Member
Licensed User
Longtime User
Cool, I thought Publisher was just for making business cards and flyers etc.
You can use it for html as well?

The example I gave at the start was way more complex than you would actually need. For the help in my soon-to-be-published app I have manually made pages and just select some of the text, right-click and choose Hyperlink then site page and link it to another site page.

Still easier to use WebPlus than anything else I know. Also WebPlus will save the main file somewhere else then when you choose 'publish to disk' it will save all you need into your 'Files' folder. Quite handy if you accidentally decide to clean your project and choose to 'delete files' which has been known to happen :)

Watch out for that one if you use some other software.

About the pinch to zoom etc. I didnt' want that so I did:
WebView1.ZoomEnabled = False
Now I don't get the +/- buttons etc. and I can decide how big the text is.

Did ma' main website in WebPlus too :) have a look:

BTInterface for Arduino Raspberry Pi PIC and all Microcontrollers

So when I open WebPlus I get both my main site and my help pages in the same app :) Just on different tabs.
 

GaNdAlF89

Active Member
Licensed User
Longtime User
Certificate problem

I have a problem, I can't open a site. from the android browser I saw that's a problem with a certificate of site. For this reason I can't open the web page from my webview, but the site is reliable. How can I bypass this? Thanks
 

GaNdAlF89

Active Member
Licensed User
Longtime User
please can you post an example code? I have difficulty because the first web page that I want to see is a login page, where insert username and password and then I want to see the home page after login...how can I do this?

Edit: the site that I want to open uses https protocol.
 
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
I have difficulty because the first web page that I want to see is a login page, where insert username and password and then I want to see the home page after login...how can I do this?
In that case it is more complicated. You can use a tool such as FireBug to understand the required authentication process and manually implement it with HttpUtils2.
 

mbatgr

Active Member
Licensed User
Longtime User
hi there,
I added the code WebView1.LoadURL("file:///android_asset/bai.bmp")

i got these errors and the application crashes at start

at com.rbsoft.testtcpip.main.afterFirstLayout(main.java:95)
at com.rbsoft.testtcpip.main.access$100(main.java:16)
at com.rbsoft.testtcpip.main$WaitForLayout.run(main.java:76)
at android.os.Handler.handleCallback(Handler.java:730)
at android.os.Handler.dispatchMessage(Handler.java:92)
at android.os.Looper.loop(Looper.java:137)
at android.app.ActivityThread.main(ActivityThread.java:5103)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:525)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:737)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
at dalvik.system.NativeStart.main(Native Method)
** Activity (main) Create, isFirst = true **
 

IanMc

Well-Known Member
Licensed User
Longtime User
You are trying to load a .bmp using 'LoadURL'.

I'd make a simple html page and in that page put a link to your .bmp so...

<html>
<body>
<img src="bai.bmp"></img>
</body>
</html>

So now in the 'files' folder of your project you have

mypage.html
bai.bmp

then load that .html page up with

WebView1.LoadURL("file:///android_asset/"mypage.html")

Don't forget to add those two files to the project so you don't accidentally delete them when you clean your project.

Actually, thinking about it, you may have to convert your .bmp to either a .gif or a .jpg or a .png to be able to use it with webview.

See my other post to do this with an animated gif:
http://www.b4x.com/android/forum/threads/adding-an-animated-gif-to-your-app.29872/
 
Last edited:

mbatgr

Active Member
Licensed User
Longtime User
thank you ianMc

Can I do the same in order to read load a pdf/rtf file...? and if I want it to put the object (image, pdf etc) in particular position of the activity?
mike
 

IanMc

Well-Known Member
Licensed User
Longtime User
It should be possible for the WebView to keep aware of the current place that you are on a webpage by accessing the URL property of the WebView to interrogate and save the current URL.

Here is my first attempt, but its sloooowww

I include the project file and for those that don't need to load up the project where the Layout1 consists of just a main WebView then three buttons, here's the code:
B4X:
Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim currentURL As String   
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.

    Private 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("Layout1")

End Sub

Sub Activity_Resume
    ToastMessageShow(currentURL, False)
    WebView1.LoadUrl(currentURL)
End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub Button1_Click
    WebView1.LoadUrl("http://www.google.com")
End Sub

Sub Button2_Click
    WebView1.LoadUrl("http://www.bing.com")
End Sub

Sub Button3_Click
    WebView1.LoadUrl("https://www.google.co.uk/search?q=B4a")
End Sub

Sub WebView1_PageFinished (Url As String)
    currentURL = WebView1.Url
    ToastMessageShow("Page Finished Loading " & WebView1.Url, False)
End Sub

It might be quicker to save the HTML in a string and reload that?
 

Attachments

  • WebViewKeeper1.zip
    7.2 KB · Views: 1,311
Top