Android Question ? Difference WebView and native Browser

[GMan]

I am calling a Ajax webside from an ARDUINO Webserver with a webview in my App.
All sending, receiving, switching, reading and displaying datas etc. works fine.
BUT: in the webview i have a little different view as in the native browser.

The webiew didnt display i.e. the javascript clock NOT, but the weather script.
And it displays the shown buttons NOT with transparency (but the are .png's created by javascript on the webside).

Has anyone a solution ?
(Pic1 is browser, Pic2 is webview)

 

[Erel]

Are you testing it on an Android 4+ device? If yes then try to add android:targetSdkVersion="14" to the manifest editor.

 

[GMan]

Yes - and target is 20

 

[Erel]

Why does the second picture use Android 2 style?

 

[GMan]

IF YOU don't know that - how should i ?
The Device has 4.2 onBoard

As written, all buttons are generated by javascript code in the html-page


Here is my manifest:

AddManifestText(
<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="20"/>
<supports-screens android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="true"
    android:anyDensity="true"/>)
SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")
'End of default text.

AddApplicationText(
<activity android:name="com.dropbox.sync.android.DbxAuthActivity" />
<activity
  android:name="com.dropbox.client2.android.AuthActivity"
  android:launchMode="singleTask" >
  <intent-filter>
    <data android:scheme="db-xxxxxxxxxxxx" /> <!-- NEED TO UPDATE -->
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.BROWSABLE" />
    <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
</activity>
<service
  android:name="com.dropbox.sync.android.DbxSyncService"
  android:enabled="true"
  android:exported="false"
  android:label="Dropbox Sync" />  )
AddReplacement(<uses-permission android:name="android.permission.INTERNET" />,)
AddReplacement(<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />,)

And here the code of such a button:
CSS-part of the html-page

<style>
.onoffswitch {
position: relative; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
width: 18px; margin: 6px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 20px;
position: absolute; top: 0; bottom: 0; right: 56px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
</script>

html-part of the page:

<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch1" checked="">
<label class="onoffswitch-label" for="onoffswitch1">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div></label>
</div>

 

[Erel]

Are you sure that the right picture was taken from an Android 4+ device?

Make sure that the Do not overwrite manifest file option is not checked (or that the file is readonly).

 

[GMan]

Both times yes, Erel.
Where you can see that difference ?

 

[Shahid Saeed]

Both times yes, Erel.
Where you can see that difference ?

Have you tried with webview extra with Javascript enabled. Maybe it can help.

 

[GMan]

شكرا - i will give it a try.
Its clear that the prob is on the javascript side, so we'll see.

 

[GMan]

Meanwhile...
i made a Pic from the SAME soft on an old 2.1 Tablet : awesome !
All is displayed correct ???

 

[GMan]

...and no change in the view when using webviewextras

 

[Shahid Saeed]

...and no change in the view when using webviewextras

I hope you had used it in a correct way:

Sub Globals   
    Dim www As WebView
    Dim wvxtra As WebViewExtras
End Sub

Sub Activity_Create(FirstTime As Boolean)

   wvxtra.addJavascriptInterface(www, "B4A") ' "B4A" is the namespace you give to Javascript/the website
   www.LoadURL("http://www.YourDomain.com/Page.html")

End Sub

 

[GMan]

Yes, i did it exact like you - no change.
And i also have the webview (wvLAN in my App) created in the designer as in the sample.