I have an app fully developped with Android Studio. I need to create a second app and this one I would like to do it with phonegapp. These two apps are related one to each other... so ideally I would like to combine them both in the same app... By combining I do not mean they need to work together. I would like them to be downloadad together (as the same app) and be able to go from one to the other withinn the app... so they can be completely two separate apps, but where the user would think it is only one app. I hope I am making myself well understood, The hybrid app uses the microphone with the Cordova plugin. At one time I thorugh about placing it with an iframe, but we would lose the microphone which invokes speech recognition Google native in Android, to convert it to text and pass it to edit text.
So my questions is:
Can I combine these two apps (native and hybrid) into one app?
Would the microphone with speech recognition to convert to text work well in both cases?
Yes, it was a bit of a pain to set up, but I have it working. I am not using PhoneGap, but I am using Construct along with the Cordova plugin, so it should be a similar setup.
First I took all of the web files generated by Cordova and placed them in the assets directory (if you do not have an assets directory you can just create one in the main directory). Then I used a WebView to display the content:
public class CordovaActivity extends AppCompatActivity {
private WebView mWebView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_cordova);
mWebView = (WebView) findViewById(R.id.content);
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
settings.setAllowUniversalAccessFromFileURLs(true);
}
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
settings.setMediaPlaybackRequiresUserGesture(false);
}
mWebView.loadUrl("file:///android_asset/www/index.html");
}
#Override
public void onResume() {
super.onResume();
if(mWebView != null) {
mWebView.resumeTimers();
mWebView.onResume();
}
}
#Override
public void onPause() {
super.onPause();
if(mWebView != null) {
mWebView.pauseTimers();
mWebView.onPause();
}
}
}
The setJavaScriptEnabled(), setDomStorageEnabled() and setAllowUniversalAccessFromFileURLs() settings all had to be set to true or the content would not load. The last setting, setMediaPlaybackRequiresUserGesture(), was required to allow audio to play.
It will be a little more work to get the Cordova content to interact with the rest of the app though; you will have to use a JavaScriptInterface in order to do so.
1) Nothing is stopping you from having two apps that act as one (aside from the downloading part). They can "speak" to one another using dedicated Intents and share data using ContentProviders. You will have to take care of the case where one app is installed and the other isn't.
2) I don't see any particular issue with the the microphone in this scenario.
However, if I were you, I'd opt for using a single app if that is possible. I am not sure what are the phonegapp limitations for this kind of implementation though.
Below is the WebView code, which shows the webpage at here. Everything works fine. The date picker is so slow, everything else works fine. It takes like 4-5 seconds to select a date. Any alternatives?
public class click extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.click);
WebView webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("http://www.exceptnothing.com/appointment.html");
webView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
}
}
I tried adding android:hardwareAccelerated="true" in that activity, same effect still.
I'm a beginner, so simpler code will be appreciated. Thanks in advance :)
try to checkout android DatePickerDialog. Its native and fast way to pick a date on android. Also, using webview in android applications is a bad practice to build a well formed user interfaces, it's realy decreases the application performance, look, and user feel. Native android vidgets are always best to do the work. This tutorial will help you if you decide to build your ui as views layout http://www.tutorialspoint.com/android/android_datepicker_control.htm
I’ve been making android apps for like 4-5 days now. So i’m wondering if you know how I can make a web app? I have been looking through many tutorials, but none shows directly how I can make an app that displays the content from a website, and that I can decide what I want and don’t want to display. So I really just want to customize a website into an app and make my own layout. I know how the WebView and WebContent works and all that stuff, but I don’t know how I can do what I described here.
So what do I need to learn and know to make an app like that?
You can do it by fill your xml layout with EdidText for the url and Buttons for Go, back, forward and so on, finally you need webview in this xml layout.
for the java code you can check the below sample.
public class SimpleBrowser extends Activity implements OnClickListener {
WebView myBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.simplebrowser);
//here the code for initialize and set yourwebView Settings.
myBrowser= (WebView) findViewById(R.id.wvBrowser);
//the below line to enable javascript if you want that
myBrowser.getSettings().setJavaScriptEnabled(true);
//here another settings could be enabled for you your webview
myBrowser.getSettings().setLoadWithOverviewMode(true);
myBrowser.getSettings().setUseWideViewPort(true);
try {
//here the default web page
ourBrow.loadUrl("http://www.google.com");
}catch (Exception e){
e.printStackTrace();
}
}
}
and for sure you need to implements your buttons using onClicklistener to be suitable for your idea.
https://www.youtube.com/watch?v=lkadcYQ6SuY&index=89&list=PL2F07DBCDCC01493A
https://www.youtube.com/watch?v=PQ94MmEg0Qw&index=90&list=PL2F07DBCDCC01493A
public class WebKhmer2Activity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView mWebView = (WebView) findViewById(R.id.web);
String source = "អ្នកជាមនុស្ស មិនមែនសត្វ";
mWebView.loadDataWithBaseURL("null",source,"text/html","UTF-8",null);
}
}//output just like box it should be អ្នកជាមនុស្ស មិនមែនសត្វ
It's getting easier now, but still not out of the box. There is a group on facebook that has a lot of documentation (because the hacks for Khmer Unicode vary depending on your software and hardware). I would recommend joining the facebook group here. And then check out the files they have for documentation on various methods for getting Khmer Unicode to work on Android here.
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 ...