OK, now that we have the GridView working as we want it, we can turn our attention to the WebView and web pages. Every time one of grid items is tapped, we want to go to a web page. So if you tap on the Cat item, for example, a page will open all about cats.
For this, we're going to need a new Activity. This Activity will hold a WebView widget. First, though, we need to add the HTML pages and images to the projects.
Things like HTML pages and resources you use for those pages must go in an
Assets folder. They are not drawable files or layout files that you place under
the res folder. In the Explorer area to the left of Android Studio, then, switch
back to Android view:
Now select your app folder:
Right-click the app folder. From the menu that appears, select New > Folder > Assets Folder:
You should see a Configure Component dialogue box appear. Just click Finish on this dialogue box. You should then see an assets folder in your Explorer area:
Now navigate to where on your computer you saved the files you downloaded for this project. If you haven't downloaded the files yet, click here:
Highlight all the files except the cat_big.png image (we'll create an images folder for this):
Press CTRL + C or (Command + C on the Mac) to copy the files. Now go back to Android Studio. Click on your assets folder to select it. Press CTL + V or Command + V to paste the files over. You should see a Copy box appear:
Click OK on this and your assets folder should look like this:
Notice that in the main coding area, one of the HTML pages may well have opened up. We've kept the code quite simple for the web pages:
If you know any HTML then feel free to amend them. One thing to notice is the Stylesheet tag at the top:
<LINK REL = Stylesheet TYPE ="text/css" HREF ="mystyle.css">
The HREF is "mystyle.css". This is a CSS file that we created. It is in the same folder as the web pages, so you can just type the file name and extension to reference this CSS file. The code for the CSS file is quite simple, too. It just changes some values for the H1 heading:
font-family: Arial, Helvetica, sans-serif;
Feel free to change the CSS, though, or add some more to it.
But double click the cat.html page and you'll see this:
We have references to two files in the BODY tags, one for an image and one for a web page (we've left the P tags off):
<A HREF="dog.html">Go to Dog Page</A>
The source (src) for the image (img) is "images/cat_big.png". This is pointing to a folder called images. We're saying that inside of this folder is a file called cat_big.png. However, we have neither a folder called images or a cat image inside of it. So this will fail. (The HREF for the web page, dog.html, will be OK, because the dog page is in the same folder as the cat page.) To solve this problem, we can create an images folder inside of assets.
Right-click your assets folder in the Explorer window. From the menus that appear, select New > Directory:
From the dialogue box that appears, type images:
Click OK and you should see an images folder inside of your assets one:
Now copy and paste that cat_big image from your download files into your new images folder:
The IMG tag from the HTML should be OK now:
We have an images folder now and a file called cat_big.png inside of that folder.
But that's the setup complete for the assets folder. Let's do some coding for the WebView.