Extensive use of SVG in phonegap project - android

I have a web site that makes extensive use of SVG for scalable maps. After using phonegap ton convert to an app for an android, none of the graphics are rendered correctly or are visible. What is recommended to address this? Should I convert the SVG? Recommend a plug-in...? Would phonegap build handle such a task?
Thanks!

I downloaded and used Cordova and all rendering worked perfectly.

Related

Using Highcharts JS in native mobile application

so i started to look into building android application that would mirror some stuff i use on a webpage. Namely weather meteograms that are built with Highcharts.
Since i am using angular 2 i thought it would be logical to go angular 2 + nativeScript way. And i cant seem easilly find information about using Highcharts within native application.
Does anyone has examples or knows some page with information about this subject.
Worst case - what would be a good alternative to highcharts to use in mobile app built with angular2 and NativeScript?
Please dont suggest paid librarys/packages.
Add a WebView to the XML file and load a local HTML containing the charts.
There is a paid plugin for creating charts in nativeScript aclled telerik-ui-pro.
More about it here
Demonstration application can be found here
high charts uses the DOM to generate the charts, nativescript doesn't use the DOM for rendering so is a no go..
i was able to generate a bar chart (on android) by creating a small plugin out of this android library https://github.com/PhilJay/MPAndroidChart

Cocos2d-x: possible to use HTML (UIWebView)?

I'm trying out cocos2d-x and got to the point where I can build the Javascript samples for Android and run them inside a browser as well.
Now I want to create my own game, but coming from a HTML background, I'd rather use HTML tags with CSS than use Javascript to setup the user interface.
I've read about UIWebView which can display HTML-pages in an app, but I was wondering if anyone has ever done this in combination with Cocos2D-x ? And could this be transparent, to overlay a normal cocos2d-x screen in the app then?
If so, how could this be done?
You can use CCXWebview for that with Cocos2d-x. This extension is based on Cocos2d-x 2.0.4 and it seems to work also on Cocos2d-x 2.x with some modification.
However, if you want to use Cocos2d-x 3.0 for Android, you cannot use it because Cocos2d-x 3.0 uses NativeActivity, thus you cannot combine Android WebView on the Cocos2d-x screen.
EDITED
only problem is that I have little knowledge of Java or C++
... It would take me years to figure the Java and C++ things out :)
So why are you sticking to use Cocos2d-x??? Why don't you use Cocos2d-html5? It has same functionality as Cocos2d-x JavaScript binding and it uses HTML5 Canvas, so you can use DOM with it.
https://twitter.com/hyperandroid/status/311534580962295809 :
Cocoonjs can run Cocos2d-html5 games too.

WebView or Phonegap ... what to use for better experience with HTML5 app

I would like to build an App in HTML5. I have play around with Phonegap on Android but the whole feeling like scrolling and touch is somehow not the best one. I have seen this App: https://play.google.com/store/apps/details?id=com.indeed.android.jobsearch&hl=en and here we see some HTML load in container.
How is this done? Is this only an Android Wrapper with WebView and the HTML content is loaded in it? Why is Phonegap so slow, when it is using WebView as well? What is the trick on the App above?
Thanks
Nik
They seem to be using the Android WebView, WebViewClient, WebChromeClient. They have extended them for some functionality it seems, not sure if that would actually alter performance.
PhoneGap has a lot of plugins and other things that allow more functionality compared to just using a regular WebView this does affect performance.
If your build target is low you can try adding the hardwareaccelation="true" in the manifest which might give you a performance boost on device which allow it. It is on by default if you have a newer build target.
I use PhoneGap since I also make Apps for iOS and I have no clue how to use their WebView counterpart so I just stick with PG for Android and iOS. I am pretty sure I could gain some performance by sticking to a regular WebView for Android but I don't think it is worth the effort for my Apps.

is there any high level GUI framework around for android sdk?

I am rewriting an Android project, and I am stucked and sucked at making the GUI look like the way I wanted it too. It is easily achievable using HTML and CSS, I have done it with PhoneGap, CSS, HTML, JS, but it is kind of slow, so I want to do it native using Java.
(My background is C++ and some web programming stuff)
What I have been encountered so far is that the default GUI builder is not really pretty and I feel frustated almost every the time using it. And people recommend droiddraw in few other questions in Stackoverflow, but it also not resulting in pretty GUI as well.
What I want to have is some flexibility like HTML and CSS and from that I can execute native code.
I believe I can achieve GUIs like from the Facebook or Twitter client easily with HTML and CSS, but if i m going to do native using the SDK, I think I'm gonna need something like 1 month just to do the GUI.
So the questions would be:
Is there any GUI framework for Android SDK ? (More high level then the provided one)
How to render HTML/CSS that allows executing native code on interaction with its element.
Any suggestions welcome for any workflow.
And of course, Open Source solutions are preferable.
There are some projects for some iphone like widgets in android. You can find them seperately mostly in github, so I have not even seen a complete higher level widget library yet. But you can give appcelerator a try. You are writing html,css,js and it compiles to native code. I personally did not used it. It is a free software. Some people are happy with it, and some are not. You should read some experiences before beginning development. http://www.appcelerator.com/

SVG support on Android

Does Android support SVG? any example?
The most complete answer is this:
The Android 2.x default browser does not natively support SVG.
The Android 3+ default browsers DO support SVG.
To add SVG support to 2.x versions of the platform, you have two basic choices:
Install a more capable browser (like Firefox or Opera Mobile - both support SVG)
Use a JavaScript polyfill that can parse SVG and render it to an HTML5 canvas
The first option is okay if you're just trying to make SVG work for personal uses or a limited (controllable) set of users. It's not a great option if you want to use SVG while targeting a large, uncontrolled user base.
In the later case, you want to use a polyfill. There are many JavaScript libraries available today that can prase SVG and render to a canvas. Two examples are:
canvg
fabric.js
Using a polyfill, you can render your SVG in a canavs on all versions of Android 2.x.
For a more complete example of this approach, you can refer to this blog post that discusses the use of the canvg polyfill for making Kendo UI DataViz charts (SVG-based) work on Android 2.x. Hope that helps!
There is a new open-source library that supports loading and drawing SVG Basic 1.1 files: https://github.com/pents90/svg-android. Performance is good as the actual drawing is handled natively by an android.graphics.Picture object.
There is a new library (under active development) androidsvg which allows one to incorporate svg images directly in to projects. It has the advantage of defining an SVGImageView which allows one to incorporate an svg directly in the layout xml.
Finally, including svg in android is straightforward.
More details: Stack Overflow post
Android supports vector drawables: https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
And there exists an Android SVG to VectorDrawable Converter:
http://inloop.github.io/svg2android/
I know my solution is somewhat hardcore, but it works great, doesn't require any external libraries (at least not in your final code) and is extremely fast.
1) Just take an existing SVG loading library, such as for example svg-android-2 (which is a fork of svg-android mentioned in another answer, just with more features and bugfixes): https://code.google.com/p/svg-android-2/
2) Write a simple app that will do nothing else but load and display your SVG image.
3) Modify the SVG loading library, so that it prints the Java code that creates the Picture class or saves it in a String variable.
4) Copy-paste the Java code obtained this way into the app you are writing.
To get more information about this technique and download sample source code, go to my blog:
http://androiddreamrevised.blogspot.it/2014/06/transforming-svg-images-into-android.html
You can get a working example of this technique from Google Play here:
https://play.google.com/store/apps/details?id=pl.bartoszwesolowski.svgtodrawablesample
Here's an example of a commercial app created using this technique (Milan metro map):
https://play.google.com/store/apps/details?id=pl.bartoszwesolowski.atmmetroplan
Notice how fast the map loads and how pretty it looks, even when magnified.
Firefox for Android supports SVG.
Opera Mobile for Android supports svg, and Opera Mini supports static svg content.

Categories

Resources