Develop Reference

Can I use my website's mobile version as an app on ios/android market?

I need to create an application for my website. but i have a mobile version of my website which is lighter and it's responsive(php/html/css)
the question is "Can i somehow create my Application by just importing or using this website?"
so that it has an icon and it seats next to other apps in mobile's menu. but when pressing the icon it loads in itself. I don't want it to use mobile's browser to show the website.
what i mean is a trick here , I don't design an app , but people think i have an app! and i shouldn't worry about the updates and platforms , while simply all i need to do is to maintain my website.
isn't that possible? any clue on how to achieve this?

It is in fact possible, and can be achieved by creating a webview of your mobile site.
Assuming you know the basics of how to create the structure of an android application, the this is what you will need for your main activity's XML named "webview_paceholder"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webview" <!-- The ID of your webview, can be wahtever you want. Just remember it for latter on -->
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
And for your java class (if it is named WebView1):
package com.companyname.packagename;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebSettings;
import android.webkit.WebViewClient;
import android.webkit.WebView;
import android.webkit.JavascriptInterface;
public class WebView1 extends Activity {
private WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview_paceholder);
mWebView = (WebView) findViewById(R.id.webview); // ID from earlier comment
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.loadUrl("http://example.com/whateveryourmobileviewis/"); // This url should be the mobile view of your site
mWebView.setWebViewClient(new WebViewClient());
}
If you do not know the basics of an android application, you can quickly learn to make one Here for Eclipse and Here for Android Studio (recommended).
Hope this helps!

Ios app store doesn't generally allow apps that are just wrappers for a webpage. You'd need a good excuse for that, e.g. offering push notifications or some other enhanced functionality.
It is possible to make a web app appear more like an app (without the browser GUI, and with a nice icon) in ios. For example, utorrent does this with their remote web interface to avoid app store restrictions. It still requires your users to bookmark your site to the homescreen.

HTML form Input with Phonegap Android development in Eclipse

I have a weird problem. I recently developed an App for ios using Phonegap and Xcode. It went well, they are in the App store, everything worked. One of the elements is a simple email form, written in HTML. It looks like this:
<form name="emailformbtn" id="emailformbtn" onsubmit="submitHandler(e);" action="#emailfromBtn">
To: <input type="email" name="emailvarto"/>
Message:<textarea cols="40" rows="8" id="emailmessagebtn" name="emailmessage">Email Message</textarea>
<input type="button" value="send" onsubmit="submitHandler(e);" onclick="emailProcessfromBtn();"/>
</form>
Works in ios using Phonegap and Jquery mobile. So i decided to convert the app into Android. Converting all the ObjectiveC into Java, and the rest should work because they are both Phonegap/Cordova.
I am Using Cordova 2.0 and Android 4.1
A lot of it does, but when I try to touch the input of the emails field, it does nothing, and Eclipse displays the message:
The View is not attached to a window.
Its a Phonegap/Cordova element. I'm not even sure what its trying to say. Is there an issue with Android and Jquery mobile, or does touching input fields in Android using phonegap not invoke native Keyboards?
Any direction or advice on this problem would be greatly appreciated.
Just to make things clearer, even though I followed Phonegap's configuration guide tot he letter, Here is the contents of the Activity.java file:
package uk.co.testdevelopment.testapp.droidapp;
import android.os.Bundle;
import android.view.Menu;
import org.apache.cordova.*;
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}

Are you sure your activity is extending 'DroidGap' and not 'Activity'? This definitely sounds wierd and looks more like a problem of the cordova configuration than anything to do with your html

The issue appears to be with the menu that you specified that you're calling inflate on. With ICS and higher, the menu is created when the app is first run and not when the menu is accessed. I would recommend removing your menu code to get rid of the View error.
BTW: Views have to be attached to a root element of an Android View, which is normally handled by DroidGap. DroidGap also has menu handlers as well, and you may want to look at using a Menu Plugin or using the CordovaWebView approach to developing a Hybrid App for Android 4.x.

jquery animation not working in android

I have html doc with jquery animation looks very much alike: http://tympanus.net/Tutorials/LittleBoxesMenu/
and it works fine on browser but not working on android WebView .
Why not?
Is there some catch with jquery and android?
EDIT: did some testing on iPhone and everything is working just fine, still no idea why not working in android

Ok, problem solved, quite simple at the end, in android app imported apache.cordova package, extended PhoneGap class and simply loaded URL. And that was it.
package voi.tii.yu;
import org.apache.cordova.*;
import android.os.Bundle;
public class PhonegapActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/page2/index.html");
}
}

The docs for WebView clearly state that Android's WebView doesn't use JavaScript:
By default, a WebView provides no browser-like widgets, does not
enable JavaScript and web page errors are ignored. If your goal is
only to display some HTML as a part of your UI, this is probably fine;
the user won't need to interact with the web page beyond reading it,
and the web page won't need to interact with the user. If you actually
want a full-blown web browser, then you probably want to invoke the
Browser application with a URL Intent rather than show it with a
WebView.

Why are the images in WidgetTab not shown if minSdkVersion>10?

I have been attempting to create a simple TabActivity with 3 Tabs. All works except if I put android:minSdkVersion="11" in the Manifest file, the icons are not shown. If I set `minSdkVersion="10", all is well.
I have looked high and low, but I have not been able to determine what is wrong.
I have put the same images in the seemingly appropriate resource directories:
res/drawable-hdpi-v5
res/drawable-ldpi-v5
res/drawable-mdpi-v5
res/drawable-xhdpi-v5
And the the code is simple:
import android.app.TabActivity;
import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabWidget;
public class Review extends TabActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TabHost tabs = getTabHost();
getLayoutInflater().inflate(R.layout.main,
tabs.getTabContentView(), true);
Resources resources=getResources();
Log.d("testing", String.format("icon: %d.%d",
resources.getDrawable(R.drawable.review).getIntrinsicWidth(),
resources.getDrawable(R.drawable.review).getIntrinsicHeight()));
TabHost.TabSpec details = tabs.newTabSpec("review"). setContent(R.id.review).
setIndicator(getString(R.string.review),
resources.getDrawable(R.drawable.review));
TabHost.TabSpec gallery=tabs.newTabSpec("gallery").setContent(R.id.photos)
.setIndicator(getString(R.string.gallery),
resources.getDrawable(R.drawable.photos));
TabHost.TabSpec reservation=tabs.newTabSpec("reservation").
setContent(R.id.reservation)
.setIndicator(getString(R.string.reservation),
resources.getDrawable(R.drawable.reservation));
tabs.addTab(details);
tabs.addTab(gallery);
tabs.addTab(reservation);
}
}
In digging into this, the only difference I can see internally under android 2.0 vs 3.0 is that Android uses a RelativeLayout instead of a LinearLayout in the 2.0 implementation.
Just to be certain that the icons images are being found, Log.d of above shows:
icon: 32.32 as it should.
Why does this shift from android 2.0 to 3.0 do this???? I am hopeful that someone else has run into this and it is obvious. Thanks very much for your help!
-- UPDATE:
I discovered today, as I looked more closely at what is actually happening when this code is built for android 3.0+, I learned that the ImageView's that come about when SetIndeicator(string, drawable) is called for each TabSpec, are actually never set and are actually NULL (ImageView.mDrawable==null) and INVISBLE.
If I force set those drawables to be set, and call ImageView.setVisiblity(View.VISIBLE) then they show up. However under android 2.0 they appear stacked with the image above and the text below as in:
<image>
<text>
Under android 3.0 they appear (when forced as above) side by side as in:
<image><text>
Thus it seems that things have changed a great deal and I need to investigate the changes for android 3.0 more carefully.
Stay tuned for more...
-- Final UPDATE:
Ultimately, I abandoned this avenue and decided that this style of doing things changed and is perhaps now depreciated and there are other better ways to do this and the icons are a bit old style.

strange, this solves the problem
//bmOptions.inSampleSize = 1;
//or better
bmOptions.inScaled = false;
more at:
https://stackoverflow.com/a/12088287/1320686

Disable zoom when clicking on form fields within a WebView?

I've looked through dozens of pages if similar questions, none of them have any answers, so hopefully this one will be different.
I have a webview, and I do not want the zoom of the view to change from the initial zoom level I have it set to. The only thing which changes the zoom level currently is when a text box is focused.
I need to be able to do this through Java code, not using the viewport meta tag.
Just so I don't have the common responses, I have the following in my code to disable zooming, and the zoom controls:
mWebView.getSettings().setBuiltInZoomControls(false);
mWebView.getSettings().setSupportZoom(false);
I'm thinking that a possible solution is to check to see when an onFocus or even an onClick event occurs within the WebView and then zoomOut, but I'm not even sure if that is possible?
Any suggestions would be appreciated.

UPDATE This answer was written almost 6 years ago, with all the new android versions that came since then, this is most likely outdated.
This thing caused a major headache, but finally was solved thanks to setDefaultZoom(ZoomDensity.FAR);
One thing which is important is that onCreate and loadUrl get called before the WebSettings, otherwise it caused a force close situation. Here the ENTIRE code including imports (for the novice Java users)
package com.my.app;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;
import com.phonegap.*;
public class MyDroidActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
WebSettings settings = appView.getSettings();
settings.setBuiltInZoomControls(false);
settings.setSupportZoom(false);
settings.setDefaultZoom(ZoomDensity.FAR);
}
}

I solved this on HTC phones by adding a WebViewClient with an empty listener for onScaleChanged. My app is PhoneGap, so this is what it looks like, but adding the listener should look the same in a non-PhoneGap app:
public class Main extends DroidGap {
private class NoScaleWebViewClient extends GapViewClient {
public NoScaleWebViewClient(DroidGap ctx) {
super(ctx);
}
public void onScaleChanged(WebView view, float oldScale, float newScale) {
Log.d("NoScaleWebViewClient", "Scale changed: " + String.valueOf(oldScale) + " => " + String.valueOf(newScale));
}
}
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
this.init();
setWebViewClient(appView, new NoScaleWebViewClient(this));
// disables the actual onscreen controls from showing up
appView.getSettings().setBuiltInZoomControls(false);
// disables the ability to zoom
appView.getSettings().setSupportZoom(false);
appView.getSettings().setDefaultZoom(ZoomDensity.FAR);
appView.setInitialScale(100);
}
}
Strangely, the onScaleChange listener never gets called -- by listening for the zoom, it blocks the zoom from happening. I've found that I need all the other calls (setSupportZoom, setDefaultZoom, setInitialScale) in order for this to work, and removing any of them reverts to the old, buggy behavior.

I had the same trouble. I needed to find a way to scale content of webview to exact value, everything worked fine until user starts to input text. There are methods that work on relatively new devices android 4.0+ but fails on old ones. The only way that works everywhere is setting the zoom value not in Java but in viewport like this
<meta name="viewport" content="initial-scale=.80; maximum-scale=.80; minimum-scale=.80;" />
It works on every device I tested.

Did you try to disable the user-scalable in the viewport tag? Not sure if that will work for you, but it works for me. I did not need to do anything on the java side.
<meta name="viewport" content="user-scalable=no, width=device-width" />

I have encountered this problem too, and I solved it like this:
myWebview.getSettings().setDefaultZoom(ZoomDensity.FAR);
It's runing normally on Sumsung Galaxy Tab. I hope this will help you.

The WebView has one special "thing", which I think it will trigger many questions and answers here. What happens is, that when an URL is loaded, the default Android Browser kicks in through an Intent to handle this. The zooming takes part in this browser, not in your Webview.
Solution: You need to add a WebviewClient to tell Android that you handle the browsing yourself. An example:
// Use WebView and disable zooming
public class MyWebView extends Activity {
// nested class
private class HelloWebViewClient extends WebViewClient {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true
}
}
private WebView mWebView;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
mWebView.setWebViewClient(new HelloWebViewClient());
mWebView.setInitialScale(500); // added after user comment
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(false);
mWebView.getSettings().setSupportZoom(false);
mWebView.loadUrl("http://www.google.com");
}
}
My main.xml looks like this
<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
This code disabled zooming on my HTC Desire running Android 2.2. Tapping into HTML Input fields makes no difference.
The whole topic of WebView/HelloWebViewClient as well as an important hint to handle the "Back" button correctly is documented in Hello Views, Web View. It should be required reading for anybody who uses WebView.

I believe you can set the zoom level with WebView.setInitialScale method. It takes an int as scale so I guess you would want to do something like myWebView.setInitialScale(100).

This issue has been fixed by a firmware update on HTC devices, it was (apparently) being caused by the Sense UI overriding default Android functionality incorrectly.
It is very difficult to provide information on exactly when this was corrected, however my web application no longer zooms when a text box is clicked on any HTC device with the latest firmware.
The following two lines of code will disable the "zoom" aspects of an android webview:
// disables the actual onscreen controls from showing up
mWebView.getSettings().setBuiltInZoomControls(false);
// disables the ability to zoom
mWebView.getSettings().setSupportZoom(false);

This was headache for me too, but fortunately I have found this article: How to stop zoom in on input focus on mobile devices.
Set font size of the text in the input element to 16px (or more) in the css file.
input {
font-size: 16px;
}
It is rather hack, but if nothig else works ...