Create an Assets Folder in Android Studio

GridView Project: 1 2 3 4 5 6 7 8 9

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:

Android view in the project explorer

Now select your app folder:

The app folder highlighted in Android Studio

Right-click the app folder. From the menu that appears, select New > Folder > Assets Folder:

Menus showing the Assets Folder item

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:

Explorer showing an assets folder created

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:

DOWNLOAD ZIP FILE (24 Kilobytes)

Highlight all the files except the cat_big.png image (we'll create an images folder for this):

HTML files highlighted in Windows Explorer

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:

Copying files dialogue box

Click OK on this and your assets folder should look like this:

HTML pages added to the assets folder

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:

A simple HTML page

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:

H1 {

Color:#996724;
text-align:center;
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:

Simple HTML with IMG and HREF tags

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):

<img src="images/cat_big.png">
<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:

Menu with the Directory item highlighted

From the dialogue box that appears, type images:

New Directory dialogue box

Click OK and you should see an images folder inside of your assets one:

An images folder added inside of assets

Now copy and paste that cat_big image from your download files into your new images folder:

An image added to the images folder

The IMG tag from the HTML should be OK now:

<img src="images/cat_big.png">

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.