Android webview fixed background

Android webview fixed background - android

I struggled so much to have a fixed background inside the webview.
First I tried this using CSS, But I found out background-attachment:fixed doesn't work in android, at least till 4 (don't know about newer versions).
The other option was to have a scrollable DIV which android doesn't support either.
I didn't try iscroll for this problem, but earlier used it somewhere else and wasn't satisfied. I don't know if it's possible with an iframe.
The other option was to set the background using android. I read much about this and tried many thing, one for example was using a container layout with a background and setting webview background to transparent.
It worked in 2.2 with a delay, in 4 it didn't work at all.
I'm so tired wasting a lot of time to achieve this small thing.
Do you have any other idea to implement this?

I finally found a solution:
This is how you do it:
First make your project base on 11, but in AndroidManifest set minSdkVersion to 8
wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
this.wv.setWebViewClient(new WebViewClient()
{
#Override
public void onPageFinished(WebView view, String url)
{
wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
});
For safety put this in your style:
BODY, HTML {background: transparent}
worked for me on 2.2 and 4

Related

Android webview can't draw canvas after chrome updated to 76+

My webview has drawing functionality inside a canvas which was working fine. But after upgradation of Chrome it stopped drawing inside canvas. I have a work around, by setting hardware acceleration true it works perfectly, but issue is my app's memory consumption increased rapidly. Is there any solution of this problem?
I am using Cordova for cross platform.

Well, I don't know about Cordova, but I think this can also help you. I found that the key to solving the HTML5 canvas issue in Android webview is within AndroidManifest.xml. What did I have to do? I kept the strategy of using a hybrid (custom) webview, because as I develop in Xamarin Forms for both iOS and Android, I needed the same solution on both platforms. On Android I did:
// Java (or similar [laughs])
// Enable hardware acceleration using code (>= level 19)
if (Build.VERSION.SDK_INT >= 19) {
yourWebviewObj.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
yourWebviewObj.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
yourSettingsObj.setRenderPriority(WebSettings.RenderPriority.HIGH);
yourSettingsObj.setCacheMode(WebSettings.LOAD_NO_CACHE);
// Xamarin for Android
// Enable hardware acceleration using code (>= level 19)
if (Build.VERSION.SdkInt >= 19)
{
yourWebviewObj.SetLayerType (LayerType.Hardware, null);
}
else
{
yourWebviewObj.SetLayerType (LayerType.Software, null);
}
yourWebviewObj.Settings.SetRenderPriority(WebSettings.RenderPriority.High);
yourWebviewObj.Settings.CacheMode = CacheModes.NoCache;
And finally, within AndroidManifest.xml find for android:handwareAccelerated="false" and you can change the value from false to true. This tip (additionally) works for both the Java universe and Xamarin.
Had another person with the same problem at Android WebView with layer_type_software not showing HTML5 canvas content where I also posted the same solution. Sorry if my help was not enough, but today I develop applications using Xamarin. Anyway I believe that following this path will help you.

java Android - how can I make WebView transparent for android 2.x?

I need a WebView to be transparent, but can't find solution
I've found only
webView.setBackgroundColor(0x00000000);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
, but this is only for Honeycomb and older and I need my App to work on 2.x also.
None of the solutions I've found on stackoverflow are working- webView is still white.
Can anyone tell me what's working for sure for pre-Honeycomb versions?
maybe I should change something in html as well?

This worked for me : myWebView.setBackgroundColor(Color.TRANSPARENT);
OR add as part of html
here is my code snip :
String css = "<head><style >* {word-wrap: break-word;margin:0;padding:0;font-size:15px; text-align:justify;font-family: Arial, Helvetica, sans-serif}</style></head>";
myWebView.loadData(css, "text/html", null);
myWebView.setBackgroundColor(Color.TRANSPARENT);

I had written a helper method to do that and it seems to work the majority of the time, setting the background color to transparent for all versions and changing the layer type where available...
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
#SuppressLint("NewApi")
public static void clearWebViewBackground (final WebView webView) {
webView.setBackgroundColor(0x00FFFFFF);
webView.setWebViewClient(new myWebViewClient());
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.HONEYCOMB) {
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
}

Android:cannot make a selection after WebView search with highlight

Hello I have a bug in my app and I cannot figure it out.
I want to search for text in my WebView and get the found Text highlighted
for Android 1.5-2.3 this works quite well
public void onClick(View v){
webView1.findNext(true);
int i = webView1.findAll(findBox.getText().toString());
try{
Method m = WebView.class.getMethod("setFindIsUp", Boolean.TYPE);
m.invoke(webView1, true);
}catch(Exception ignored){}
}
}
for Android 3.0+ I have to use the JavaScript workaround from here, because Google doesn't support the highlighting of searched text for incomprehensible reasons
And now my Bug: After the search on my WebView I get the highlighted Text, and I can't select the Text anymore. The only fix I could use is the JavaScript workaround in older Android versions, too. But the function runs very slow and it takes about 10 seconds until the text gets highlighted. I Hope someone has a better solution/fix :)
Thank you

I use the same for 3.x then it did not work on 4.0.x.
Yesterday I updated to 4.0.4 and now highlight works again.
So the solution can be found in the 4.0.4 sources.

OK I have found a quite good solution.
Here is a JavaScript code for Highlighting, that runs really fast :) http://4umi.com/web/javascript/hilite.php#thescript
Anyway I don't understand, why I can't selecting text after the of the official Webview search

For Android 3.x I used webview.showFindDialog(stringtofind, true);

use findAllAsync() instead , finAll() is deprecated in API 16;

PictureListener and onNewPicture() are deprecated - Alternatives?

The Android Developers reference says that both the WebView.PictureListener interface and its onNewPicture() method are deprecated.
Fine, but the need to know when WebView renders a picture is still there. Is there an alternative way to accomplishing this?

Ok after careful review of the APIs, it seems this cannot be done without using PictureListener. Obviously the person who deprecated this feature didn't provide an alternative.
I suggest you write a bug report http://code.google.com/p/android/issues and ask people here to star it.
Emmanuel

I submitted this Android issue to track the replacement for the PictureListener and onNewPicture() callback.
http://code.google.com/p/android/issues/detail?id=38646
Please star as necessary.

the closest thing you have is onPageFinished
wv.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});
but it doesn't always trigger after the content is finished being drawn, hence not so much of a replacement. I suggest sticking to onNewPicture even if it is deprecated. after all, it still works.

Until there is an official replacement API for this functionality you can just change the
android:targetSdkVersion
in AndroidManifest.xml to anything <= 13.

Android WebView style background-color:transparent ignored on android 2.2

I'm struggling to create a WebView with transparent background.
webView.setBackgroundColor(0x00FFFFFF);
webView.setBackgroundDrawable(myDrawable);
Then I load a html page with
<body style="background-color:transparent;" ...
The background color of the WebView is transparent but as soon as the page is loaded, it's overwritten by a black background from the html page. This only happens on android 2.2, it works on android 2.1.
So is there something to add in the html page code to make it really transparent ?

This worked for me,
mWebView.setBackgroundColor(Color.TRANSPARENT);

At the bottom of this earlier mentioned issue there is an solution.
It's a combination of 2 solutions.
webView.setBackgroundColor(Color.TRANSPARENT);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
When adding this code to the WebViewer after loading the url, it works (API 11+).
It even works when hardeware acceleration is ON

I had the same issue with 2.2 and also in 2.3. I solved the problem by giving the alpa value in html not in android. I tried many things and what I found out is setBackgroundColor(); color doesnt work with alpha value. webView.setBackgroundColor(Color.argb(128, 0, 0, 0)); will not work.
so here is my solution, worked for me.
String webData = StringHelper.addSlashes("<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " +
"content=\"text/html; charset=utf-8\"> </head><body><div style=\"background-color: rgba(10,10,10,0.5); " +
"padding: 20px; height: 260px; border-radius: 8px;\"> $$$ Content Goes Here ! $$$ </div> </body></html>");
And in Java,
webView = (WebView) findViewById(R.id.webview);
webView.setBackgroundColor(0);
webView.loadData(webData, "text/html", "UTF-8");
And here is the Output screenshot below.

Actually it's a bug and nobody found a workaround so far. An issue has been created. The bug is still here in honeycomb.
Please star it if you think it's important : http://code.google.com/p/android/issues/detail?id=14749

This is how you do it:
First make your project base on 11, but in AndroidManifest set minSdkVersion to 8
android:hardwareAccelerated="false" is unnecessary, and it's incompatible with 8
wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
this.wv.setWebViewClient(new WebViewClient()
{
#Override
public void onPageFinished(WebView view, String url)
{
wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
});
For safety put this in your style:
BODY, HTML {background: transparent}
worked for me on 2.2 and 4

The most important thing was not mentioned.
The html must have a body tag with background-color set to transparent.
So the full solution would be:
HTML
<body style="display: flex; background-color:transparent">some content</body>
Activity
WebView wv = (WebView) findViewById(R.id.webView);
wv.setBackgroundColor(0);
wv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
wv.loadUrl("file:///android_asset/myview.html");

below code works fine Android 3.0+ but when you try this code below android 3.0 then your app forcefully closed.
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
You try below code on your less then API 11.
webview.setBackgroundColor(Color.parseColor("#919191"));
Or
you can also try below code which works on all API fine.
webview.setBackgroundColor(Color.parseColor("#919191"));
if (Build.VERSION.SDK_INT >= 11) {
webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
above code use full for me.

Try
webView.setBackgroundColor(0);

Following code work for me, though i have multiple webviews and scrolling between them is bit sluggish.
v.setBackgroundColor(Color.TRANSPARENT);
Paint p = new Paint();
v.setLayerType(LAYER_TYPE_SOFTWARE, p);

Use this
WebView myWebView = (WebView) findViewById(R.id.my_web);
myWebView.setBackgroundColor(0);

After trying everything given above. I found it doesn't matter either you specify
webView.setBackgroundColor(Color.TRANSPARENT) before or after loadUrl() /loadData().
The thing that matters is you should explicitly declare android:hardwareAccelerated="false" in the manifest.
Tested on IceCream Sandwich

Just use these lines .....
webView.loadDataWithBaseURL(null,"Hello", "text/html", "utf-8", null);
webView.setBackgroundColor(0x00000000);
And remember a point that Always set background color after loading data in webview.

webView.setBackgroundColor(0x00000000);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
this will definitely work..
set background in XML with Editbackground.
Now that background will be shown

This didn't work,
android:background="#android:color/transparent"
Setting the webview background color as worked
webView.setBackgroundColor(0)
Additionally, I set window background drawable as transparent

set the bg after loading the html(from quick tests it seems loading the html resets the bg color.. this is for 2.3).
if you're loading the html from data you already got, just doing a .postDelayed in which you just set the bg(to for example transparent) is enough..

If webview is scrollable:
Add this to the Manifest:
android:hardwareAccelerated="false"
OR
Add the following to WebView in the layout:
android:background="#android:color/transparent"
android:layerType="software"
Add the following to the parents scroll view:
android:layerType="software"

Try
webView.setBackgroundColor(Color.parseColor("#EDEDED"));

I was trying to put a transparent HTML overlay over my GL view but it has always black flickering which covers my GL view. After several days trying to get rid of this flickering I found this workaround which is acceptable for me (but a shame for android).
The problem is that I need hardware acceleration for my nice CSS animations and so webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); is not an option for me.
The trick was to put a second (empty) WebView between my GL view and the HTML overlay. This dummyWebView I told to render in SW mode, and now my HTML overlays renders smooth in HW and no more black flickering.
I don't know if this works on other devices than My Acer Iconia A700, but I hope I could help someone with this.
public class MyActivity extends Activity {
#Override
protected void onCreate(Bundle icicle) {
super.onCreate(icicle);
RelativeLayout layout = new RelativeLayout(getApplication());
setContentView(layout);
MyGlView glView = new MyGlView(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
dummyWebView = new WebView(this);
dummyWebView.setLayoutParams(params);
dummyWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
dummyWebView.loadData("", "text/plain", "utf8");
dummyWebView.setBackgroundColor(0x00000000);
webView = new WebView(this);
webView.setLayoutParams(params);
webView.loadUrl("http://10.0.21.254:5984/ui/index.html");
webView.setBackgroundColor(0x00000000);
layout.addView(glView);
layout.addView(dummyWebView);
layout.addView(webView);
}
}

This worked for me. try setting the background color after the data is loaded. for that setWebViewClient on your webview object like:
webView.setWebViewClient(new WebViewClient(){
#Override
public void onPageFinished(WebView view, String url)
{
super.onPageFinished(view, url);
webView.setBackgroundColor(Color.BLACK);
}
});

Try out:
myWebView.setAlpha(0.2f);

If nothing helps, then most probably you have fixed sized webView, change the width and height to wrap_content or match_parent, it should work. That worked for me when I tried to load a Gif.

You can user BindingAdapter like this:
Java
#BindingAdapter("setBackground")
public static void setBackground(WebView view,#ColorRes int resId) {
view.setBackgroundColor(view.getContext().getResources().getColor(resId));
view.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
XML:
<layout >
<data>
<import type="com.tdk.sekini.R" />
</data>
<WebView
...
app:setBackground="#{R.color.grey_10_transparent}"/>
</layout>
Resources
<color name="grey_10_transparent">#11e6e6e6</color>

myWebView.setAlpha(0);
is the best answer. It works!

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android webview fixed background - android

Related

Android webview can't draw canvas after chrome updated to 76+

java Android - how can I make WebView transparent for android 2.x?

Android:cannot make a selection after WebView search with highlight

PictureListener and onNewPicture() are deprecated - Alternatives?

Android WebView style background-color:transparent ignored on android 2.2

Categories

Resources