I am adding to my layout a WebView to display justified text. I want to set the background of the WebView to be transparent to appear like a textView. Here's what I did:
WebView synopsis;
synopsis=(WebView)findViewById(R.id.synopsis);
synopsis.setBackgroundColor(0x00000000);
It works on the emulator, but when I run the application on my device it doesn't work: what I get is a white background.
String textTitleStyling = "<head><style>* {margin:0;padding:0;font-size:20; text-align:justify; color:#FFFFFF;}</style></head>";
String titleWithStyle = textTitleStyling + "<body><h1>" + movie.synopsis + "</h1></body>";
synopsis.loadData(textTitleStyling + movie.synopsis, "text/html", "utf-8");
synopsis = (WebView) findViewById(R.id.synopsis);
synopsis.getSettings();
synopsis.setBackgroundColor(0);
Try setting the background like this:
WebView synopsis;
synopsis=(WebView)findViewById(R.id.synopsis);
synopsis.setBackgroundColor(Color.TRANSPARENT);
try below code hope use full for you:-
webview.setBackgroundColor(Color.parseColor("#919191"));
grey code : #919191
You must put this in the XML code :
android:background="#android:color/transparent"
for your web view like this for example :
<WebView
android:id="#+id/MyWebView"
android:layout_width="fill_parent"
android:layout_height="62dp"
android:background="#android:color/transparent"
android:scrollbars="none" />
and after this you must go to Java code and write this before loadUrl :
yourWebView.setBackgroundColor(Color.TRANSPARENT);
This is the only way I could get it to work and not load an initial white background first, if I had dark mode on:
webView.setBackgroundColor(Color.TRANSPARENT);
webView.setVisibility(View.VISIBLE);
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"
/>
What I do is
synopsis.setBackgroundColor(0);
Hope it helps!
Did you load the css in ur webview?
Something like:
synopsis.loadData(textTileStyling, "text/html", "UTF-8");
or
synopsis.loadDataWithBaseURL("", textTileStyling, "text/html", "UTF-8", "");
You can find a few tips here: http://code.google.com/p/android/issues/detail?id=14749 and also here:
Android WebView style background-color:transparent ignored on android 2.2
Your html code sets everything to white
Replace:
String textTitleStyling = "<head><style>* {margin:0;padding:0;font-size:20; " +
"text-align:justify; color:#FFFFFF;}</style></head>";
String titleWithStyle = textTitleStyling + "<body><h1>" + movie.synopsis +
"</h1></body>";
synopsis.loadData(textTitleStyling + movie.synopsis, "text/html", "utf-8");
synopsis = (WebView) findViewById(R.id.synopsis);
synopsis.getSettings();
synopsis.setBackgroundColor(0);
With:
This excludes color from header style and applies the rest of the style only to body element
String textTitleStyling = "<head><style>body{margin:0;padding:0;font-size:20; " +
"text-align:justify;}</style></head>";
String titleWithStyle = textTitleStyling + "<body><h1>" + movie.synopsis +
"</h1></body>";
synopsis.loadData(titleWithStyle, "text/html", "utf-8");
synopsis = (WebView) findViewById(R.id.synopsis);
synopsis.getSettings();
synopsis.setBackgroundColor(0);
EDIT: fixed html
You can also do it -
webview.setBackgroundColor(getContext().getResources().getColor(android.R.color.transparent));
Here android.R.color.transparent is transparent color which is belongs to android fragmework.
Related
I wanted to justify the text of a TextView but I could not find any way to do that on the TextView so I have created a WebView.
The code to set the text on my WebView is the following:
WebView webview = (WebView) view.findViewById(R.id.webview);
webview.loadData(getString(R.string.webview), "text/html; charset=utf-8", "utf-8");
webview.setBackgroundColor(Color.TRANSPARENT);
And it works well, the text is being show justified (because I have created a body tag with style="text-align:justify;).
The problem is that, as I have loaded the text into the WebView, it spends some seconds to charge the text. Therefore, the rest of the layout is being shown before the text have appeared, making a strange visual effect.
I have tried to wait until the WebView is fully loaded (How to listen for a WebView finishing loading a URL?) but the text is never shown. Here is the code that I have by the moment:
webview.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
webview.loadData(getString(R.string.webview), "text/html; charset=utf-8", "utf-8");
webview.setBackgroundColor(Color.TRANSPARENT);
}
});
So, how can I show a justify text at the same time as the rest of the layout?
Thanks in advance!
this is the picture:
this is the code that I used in my project
it doesnt take so much to load
void initVebView(WebView wvContent_Detail, String body) {
String HTML1 = "<html><head><style type=\"text/css\">#font-face {font-family: MyFont;src: url(\"file:///android_asset/%s\")}body {font-family: MyFont;font-size: medium;text-align: justify; line-height: %spx;}</style></head><body dir='rtl'>";
String HTML2 = "</body></html>";
String HTML3 = "<span style=\"font-weight:bold\">%s<br/><br/>%s</span>";
String HTML4 = "<style>img{display: inline;height: auto;max-width: 100%;</style>";
String str = String.format(HTML1, "IRANSansMobile_UltraLight.ttf", 25);
String content = body.replace("text-align:", "");
content = content.replace("font-family:", "");
content = content.replace("line-height:", "");
content = content.replace("dir=", "");
content = content.replace("width=", "width=\"100%;\"");
String myHtmlString = str + content + HTML2;
wvContent_Detail.loadDataWithBaseURL(null, HTML4 + myHtmlString, "text/html", "UTF-8", null);
WebSettings webSettings = wvContent_Detail.getSettings();
webSettings.setDefaultFontSize(20);
webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
}
this is the xml :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="ir.tenthwindow.BaseModule.ui.FragmentVideo">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/webview_product_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" />
</ScrollView>
</FrameLayout>
you can use your font instead.
Hope this helped .
I'm developing an Android application in which I have used an HTML file for help contents. I have used a WebView to display the content and every thing is fine.
The problem is that user can change the theme and font size of the application. How can I propagate these properties to the content of WebView? Exactly how can I change the font size and text color in WebView? Is there a simple way to do that or I should create different HTMLfiles or CSSes? How to handle the size units (dp, sp, ...)?
I will appreciate your help with this situation.
loadUrl("javascript:(document.body.style.backgroundColor ='red');");
loadUrl("javascript:(document.body.style.fontSize ='20pt');");loadUrl("javascript:(document.body.style.color ='yellow');");
On your android application, use following code to load a web page with user chosen font size and color:
WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebChromeClient(new InredisChromeClient(this));
myWebView.setWebViewClient(new InredisWebViewClient(this));
myWebView.clearCache(true);
myWebView.clearHistory();
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
myWebView.loadUrl("http://demo.com/content.html?font-size=12&fontcolor=blue");
On the content.html page, enable JavaScript and use jQuery and its function as below:
function getCssValue(sCSS)
{
var sPageURL = window.location.search.substring(1);
var sValues = sPageURL.split('&');
for (var i = 0; i < sValues.length; i++)
{
var sPair = sValues[i].split('=');
if (sPair[0] == sCSS)
{
return sPair[1];
}
}
}
$(document).ready(function(){
// Set the Font Size from URL
$('html').css('font-size', getCssValue('font-size'));
});
It is best to do theme activities using CSS and Javascript. However if we want to pass on some settings from Android to the WebView dynamically, it is possible and a solution is to use the JavascriptInterface. Here is one way of doing it:
Firstly, we define a class which will be used as a bridge between the Android app and the WebView for JS interactions.
Here WebInterface is an inner class in the Activity and hence it has direct access to myWebView, which is a WebView instance variable.
public class WebInterface {
private Activity activity;
public WebInterface(Activity activiy) {
this.activity = activiy;
}
#JavascriptInterface
public void changeTheme() {
activity.runOnUiThread(new Runnable() {
#Override
public void run() {
// All of the theme settings could go here, the settings passed on by Android
myWebView.loadUrl("javascript:document.body.style.backgroundColor ='red';");
myWebView.loadUrl("javascript:document.body.style.fontSize ='20pt'");
myWebView.loadUrl("javascript:document.body.style.color ='yellow';");
//OR load your data as shown here http://stackoverflow.com/a/7736654/891092
htmlData = "<link rel=\"stylesheet\" type=\"text/css\" href=\"theme.css\" />" + htmlData;
// lets assume we have /assets/theme.css file
myWebView.loadDataWithBaseURL("file:///android_asset/", htmlData, "text/html", "UTF-8", null);
}
});
}
}
Note that it is very important to run your code in UI Thread otherwise it will not work.
Here is how the Activity registers the WebView with the JavascriptInterface:
myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.addJavascriptInterface(jsInterface, "JSInterface");
In the HTML file, which the user is viewing, a button or widget could be made to change theme by calling code in Android through the bridge:
<input type="button" value="Say hello" onClick="doChangeTest()" />
<script type="text/javascript">
function doChangeTest(){
JSInterface.changeTheme(); // this calls the changeTheme in WebInterface
}
</script>
First you need to define a webView and after that use below method.
lightFont is your font that you should store in asset folder.
color is your text color.
font size : you can change font size.(for example 20px or medium and etc).
at the end you need to use seconde method to show html on webView
First Method:
public static String getStyledFont(String html) {
boolean addBodyStart = !html.toLowerCase().contains("<body>");
boolean addBodyEnd = !html.toLowerCase().contains("</body");
return "<style type=\"text/css\">" +
"#font-face {font-family: CustomFont;" +
"src: url(\"file:///android_asset/lightFont.ttf\")}" +
"body {color: #787878;}"+
"body {font-family: CustomFont;font-size: x-small;}</style>" +
(addBodyStart ? "<body>" : "") + html +(addBodyEnd ? "</body>" : "");
}
Second method:
String htmlText = getStyledFont(yourText);
webView.loadDataWithBaseURL("file:///android_asset/",
htmlText ,
"text/html; charset=UTF-8", null, null);
i have a webview which is gets data form the previous page like this
country = "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"><style type=\"text/css\">p{text-align:justify;font-size:125%;}</style></head><body>" + "<p>" + i.getStringExtra("country").toString()+"</p>"+"</body></html>";
when i try to set that to a webview
web.loadData(country, "text/html", "UTF-8");
it shows plain text
when i try the following
web.loadData( URLEncoder.encode(country).replaceAll("\\+", " "), "text/html", Encoding.UTF_8.toString());
it just shows
< and nothing more
Try this:
loadData(country, "text/html; charset=UTF-8", null);
Found in:
Android. WebView and loadData
I am setting String in WebView in Android, but i am getting such characters http://img4.imageshack.us/img4/5200/hkgm.jpg. How to avoid them ? IF i put a log and see then it will be proper but only in WebView it is not working properly
Thanks in advance
Code :
String text = "<html><body style=\"text-align:justify\"> %s </body></Html>";
String summary = rssStr.get(position).getEncodedContent();
Log.d("String", summary);
web.loadData(String.format(text, summary), "text/html", "utf-8");
By setting the Encoding type in the Webview can resolve this issue,
wv.loadDataWithBaseURL(null, data, "text/html", "UTF-8", null);
i want to reaplace + with up.png imagae bt image is not generated on webview..... so give me help.
thanks in advance.
str = str.replaceAll("\\+","<img src=drawable/up.png/ >");
WebView web = (WebView) findViewById(R.id.webview);
String summary = "<html><body><marquee>"+str+"</marquee></body></html>";
web.loadData(summary, "text/html", "utf-8");
I think that your img src location is incorrect. Check out this question. I think the src should be 'file:///android_res/drawable/up.png'.