I have developed a Phonegap application, and am now trying to run it in the android emulator. My problem is that the application doesn't scroll in the emulator or device, but it works well in a normal browser like mozilla or chrome. Butwhen I test in the emulator or device then it doesn't scroll.
Here is my html file http://pastie.org/3981916
And here is my css file http://pastie.org/3981918
I am not able to find a solution to this problem, can any one help me out please?
well you cant get the normal html scroll behavior when trying to create a app using phonegap on android.
you cant get the overflow:scroll effect for any of the html elements.
you'll need to make use of third party libraries such as jquerymobile, iscroll4, etcfor getting the native look and feel.
or also you can construct your own logic
Related
I'm trying to build an android app that allows -
Automatically scroll page by page.
Take screenshot after each scroll (and ideally merge all screenshots into one image, if possible) and save the resulting image(s) in an album.
For example - the user opens a very long webpage in the browser, then triggers the app which screenshots the entire webpage automatically by scrolling down and taking screenshots until it reaches the bottom.
There seem to be many libraries to do the screenshot part for React Native but I can't seem to find any for ReactJS. Is it even possible with ReactJS or do I need to learn some other android specific technology to make it happen? I'm a ReactJS and mobile app dev newbie, so I might be missing something obvious.
If I understand well, your Android app is just a webview rendering the React app.
If this is the case, you cannot do anything at React layer. you have to code the logic at native layer (in the native android application).
you can use this package to take screenshot from any pages
"use-react-screenshot"
but this package have some problems. it works by react hooks
or in take screenshot, svg codes not exist in image
i made this app for android using Android Studio that is kind of like a game, and i wanted to make the same thing but on a website, is there any simple way to do this? Or do i have to write the whole code all over again (i.e. using HTML, CSS, Javascript)?
is there any simple way to do this?
No
Or do i have to write the whole code all over again (i.e. using HTML, CSS, Javascript)?
exactly
I have converted a jquery mobile webpage to android app using phonegap.
The problem is that mavbar/menu in Android is cutting the menu words. i.e. What we do -> What we... .Can u suggest me a better way to create a menu without damaging the UI?
Using Bootstrap CSS is the better way to make your application work well on all screen resolution
I want to know if it's possible to design my android app UI with HTML5 and CSS3.
If it's possible, is there any performance issue?
Android has WebView which can render HTML content, but it doesn't provide the same user experience as native apps so its use is generally discouraged.
Yes it possible. As rhoadster91 stated, you can use a normal Android WebView which loads your "index.html". All your HTML files should be in the "assets/www" directory. But you'll find plenty tutorials out there which explain everything step by step. Have a look at Googles developer site.
A second possibility would be Phonegap. It is a little tool which helps you to deploy your app for various devices (Android, iOS, WP,...) while coding your app only once in HTML.
I experimented with jquery mobile, native application and phonegap. Building a web application at first seemed very attractive at first as the coding is a lot easier compared to native applications. Here is my opinion based on my research:
Using phonegap slows your application responses, it loads slowly and together with jquery mobile the response and load time increases. So I didnot use it.
Using jquery alone was no different in Gingerbread mobile and on emulator you can clearly see the lag in switching between one div to another div. I didnot use it either.
What I did was use android Webview. I wrote my own javascript and css and placed them on the head section of my page. Used div for changing pages on button click. This approach worked really good giving nearly native performance.
I have a working app built in jQuery Mobile and Phonegap (using Eclipse on Mac OSX)
Everything is working OK, except when the Ajax loading message pops up, the animated gif does not animate, it simply stick on the first frame.
Viewing the app in a web browser (as it is basically a mobile site) the gif animates no problem.
I have read that showing animated gifs on Android is tricky without using the web browser. Is there a way to get it to work? Maybe replace it with something in CSS3?
Although the comments explain why it doesn't work, this might get you started on finding a workable replacement: https://stackoverflow.com/a/2767556/878602