inject CSS to a site with webview in android
You can't inject CSS directly however you can use Javascript to manipulate page dom.
public class MainActivity extends ActionBarActivity {
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
webView = new WebView(this);
setContentView(webView);
// Enable Javascript
webView.getSettings().setJavaScriptEnabled(true);
// Add a WebViewClient
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
// Inject CSS when page is done loading
injectCSS();
super.onPageFinished(view, url);
}
});
// Load a webpage
webView.loadUrl("https://www.google.com");
}
// Inject CSS method: read style.css from assets folder
// Append stylesheet to document head
private void injectCSS() {
try {
InputStream inputStream = getAssets().open("style.css");
byte[] buffer = new byte[inputStream.available()];
inputStream.read(buffer);
inputStream.close();
String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
webView.loadUrl("javascript:(function() {" +
"var parent = document.getElementsByTagName('head').item(0);" +
"var style = document.createElement('style');" +
"style.type = 'text/css';" +
// Tell the browser to BASE64-decode the string into your script !!!
"style.innerHTML = window.atob('" + encoded + "');" +
"parent.appendChild(style)" +
"})()");
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Android, How can I apply CSS into WebView?
You are applying changes to the webview as an object. What you need to do is create a css file and use that in whatever pages your webview is pointing to.
Rendering HTML in a WebView with custom CSS
You could use WebView.loadDataWithBaseURL
htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />" + htmlData;
// lets assume we have /assets/style.css file
webView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
And only after that WebView will be able to find and use css-files from the assets directory.
ps And, yes, if you load your html-file form the assets folder, you don't need to specify a base url.
Android - How to inject custom css into external webpage in webview
String html = ... // load manually
// insert the style to <head>
webview.loadData(html, "text/html", null);
How to render css file from url in to the webview in android
I have faced such type of problem, May be helpful for you,
webView=(WebView) findViewById(R.id.webView1);
webView.getSettings().setJavaScriptEnabled(true);
StringBuilder sb = new StringBuilder();
sb.append("<HTML><HEAD><LINK href=\"http://test.com/css/test.css\" type=\"text/css\" rel=\"stylesheet\"/></HEAD><body>");
sb.append(attributes.toString());
sb.append("</body></HTML>");
webView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
Hopefully, it works.
related Links:
and github plugin: https://github.com/NightWhistler/HtmlSpanner
Android WebView renders blank/white, view doesn't update on css changes or HTML changes, animations are choppy
Related Topics
Upload Photo to Facebook with Facebook Android Sdk in Android
Backup and Restore SQLite Database to Sdcard
Android Canvas: Draw Transparent Circle on Image
How to Check the Internet Connection in Android
How to Use Single Textwatcher for Multiple Edittexts
Single Selection in Recyclerview
Passing Data Between Activities in Android
How to Write Character & in Android Strings.Xml
How to Play an Android Notification Sound
Error "Could Not Get Batchedbridge, Make Sure Your Bundle Is Packaged Properly" on Start of App
How to Write Vertically in a Textview in Android
Cursor Size Limit in Android SQLitedatabase
Android Studio - Android Emulator Wifi Connected with No Internet
How to Set Emoji by Unicode in a Textview
Display Fragment Viewpager Within a Fragment
Android Mediaplayer Stop and Play