Android Tutorial Adding an animated gif to your app

Ya can do it like this.

Add a webview to your design, lets call it WebView1

make a file initially called whatever, banner1.txt in the Files folder of your project open it in notepad and write:

<html><body><img src="myanimatedgif.gif" /></body></html>

Save it, change its name to banner1.html

Copy your myanimatedgif.gif file into your files folder and remember to add them both to your project so that they don't accidentally get deleted.

In your Main code you put in the Sub Globals
Dim WebView1 As WebView

you don't need to .initialize it, that's done in the designer

then in your Activity_Create sub you put:
WebView1.LoadURL("file:///android_asset/banner1.html")


And thur ya have it! an animated gif in your app.

added: oh, oops, one more thing, in the designer, click on WebView1 and turn ZoomEnabled to False (or else you get some nasty resizing arrow buttons)
 
Last edited:
Click to expand...
IanMc

IanMc

Well-Known Member
Licensed User
Longtime User
The web :)

Seriously just search for something like 'fun animated gifs' then when you see an animated gif right-click it and choose the Save As option.
 
coslad

coslad

Well-Known Member
Licensed User
Longtime User
Hi IanMc , it works , but, my gif is bigger than the webview , is there a way to strech or reduce di gif so it can be all visible in the webiew?

Thanks
 
IanMc

IanMc

Well-Known Member
Licensed User
Longtime User
Ok, look up the HTML command for img it has a width and a height parameter which you might try setting to 100% for each of them.

It may also be possible to do some cool things with CSS & Javascript.
 
Magma

Magma

Expert
Licensed User
Longtime User
@lanMC

..All good but how can i make it transparent.... actually how to disable background of webview ?
 
Arf

Arf

Well-Known Member
Licensed User
Longtime User
I've got a animated gif displaying no, using this method, however I have a question:
The gif does not fill the webview frame completely as I want it to.
The gif is 104x184, I set the webview to this size too, but the the gif is displayed smaller than this - probably device scaling I suppose.
So in the HTML img code I set height and width to 100%, displays bigger but still doesn't fill the webview frame.

How can I make it fill the webview completely? I will try set its size to 104x184 DIPS in the designer, thats my next move.
 
IanMc

IanMc

Well-Known Member
Licensed User
Longtime User
Well the WebView is like incorporating a browser into your app so you'll need to learn a bit of HTML and CSS to get it to do some magic stuff.

I haven't tried it but making the gif fill the whole WebView might be as easy as setting it to be the background image and you can do this by using a CSS style so for an example which I haven't tested, then instead of putting an <img> tag in your HTML you might try HTML like this instead:
B4X: 
<html>
  <head>
    <style>
    body {
    background-image: url(myanimatedgif.gif);
    }
    </style>
  </head>
<body>
</body>
</html>

if this doesn't work then you'll have to look into 'styling' the <img> tag to see if you can stretch your animated gif to fill the webview that way.
 
IanMc

IanMc

Well-Known Member
Licensed User
Longtime User
Magma said:
@lanMC

..All good but how can i make it transparent.... actually how to disable background of webview ?
Click to expand...

Well again if it works using the above technique to set the background image and then you should be able to set images in front of it, I'm not sure if you can get transparent animated gifs?

Anyone?

I do know you can get transparent .png graphics but they're not animated, for example
Transparent.png
 
IanMc

IanMc

Well-Known Member
Licensed User
Longtime User
Reaching back into .gif memory I do believe that you can get transparent .gifs
With both transparent .png and .gif the idea is that one of the colours is transparent so if you overlay that graphic on top of something else you can see that something else through the transparent parts and in the case of my graphic above everything is transparent apart from the words and the image of the guy so say you had set the background colour of your webpage to be green, you'd see that green all around the text and the guy, say you'd set a background image in your Webview then you put this graphic in an <img> tag, you'd see the background image through all the parts of this image that aren't text or the guy.

Transparent animated gifs would need to consist of a sequence of transparent gifs if I remember correctly.
 
E

enrico

Active Member
Licensed User
Longtime User
Problem with Webview is that, as I know, you can't fit it in the device screen automatically zooming or shrinking width and height.
If anyone has an html code solution...
 
IanMc

IanMc

Well-Known Member
Licensed User
Longtime User
there are other problems with the whole webview thing

unbeknownst to us (yes it is a word, look it up)

WebView is a massive Android object that likes to work or not work depending on the Android version.

It'll bite you in the ass

so you can't rely on it.
 
You must log in or register to reply here.
Top