How can I properly justify text on a WebView on Android?

How can I properly justify text on a WebView on Android? - android

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 .

Related

how to display a site into android webview without footer and header

i need to display another website into my android webview without it's header and footer
wb.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url)
{
wb.loadUrl("javascript:(function() { " +"document.getElementsByTagName('header')[0].style.display=\"none\"; " + "})()");
}
});
wb.loadUrl(url);
setContentView(wb);

Why not use iframe?
Try something like this -
String iframe = "<iframe scrolling=\"no\" src=\"YOUR URL\"" +
"width=\"400px\" height=\"300\"></iframe>";
webview.getSettings().setJavaScriptEnabled(true); //be sure to enable this or
//page might not load properly
webview.loadDataWithBaseURL("", iframe, "text/html", "UTF-8", "");
//loading iframe
You can customize the iframe code according to your needs. Be sure to add \ before every " in your HTML Code.

how does web view Load Html Content?

I am getting this html content in Response via the variable: String mresult=
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lorem Ipsum</title>
</head>
<body style="width:300px; color: #00000; ">
<p><strong> About us</strong> </p>
<p><strong> Lorem Ipsum</strong> is simply dummy text .</p>
<p><strong> Lorem Ipsum</strong> is simply dummy text </p>
<p><strong> Lorem Ipsum</strong> is simply dummy text </p>
</body></html>
It could not load in webview, I have to try to load it like this:
web.loadDataWithBaseURL(null, mresult, "text/html", "UTF-8", null);
still webview displays a Blank white page.
In the xml file:
<WebView
android:id="#+id/wV"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="10dp"
android:background="#android:color/transparent"
android:cacheColorHint="#00000000" />
In the Activity:
String mresult="Here my given data";
WebView web = (WebView)findViewById(R.id.wV);
web.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
web.loadData(mresult, "text/html; charset=UTF-8", null);

Use this Html_value in this way:
String html_value = "<html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\"><title>Lorem Ipsum</title></head><body style=\"width:300px; color: #00000; \"><p><strong> About us</strong> </p><p><strong> Lorem Ipsum</strong> is simply dummy text .</p><p><strong> Lorem Ipsum</strong> is simply dummy text </p><p><strong> Lorem Ipsum</strong> is simply dummy text </p></body></html>";
this is used into webview then only it will work because your html tag was not properly closed:
WebView browser = (WebView) findViewById(R.id.sample);
browser.getSettings().setJavaScriptEnabled(true);
browser.loadData(html_value, "text/html", "UTF-8");
output:

wb.loadDataWithBaseURL("", result, "text/html", "UTF-8", "");

Try this code for the WebView:
WebView wv = (WebView) findViewById(R.id.webView);
wv.setWebViewClient(new WebViewClient() {
#Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
wv.loadData(mresult, "text/html; charset=UTF-8", null);

don't know y still it not loading in webview but given result is display in TextView in Html format like
TextView txtweb = (TextView) findViewById(R.id.txtweb);
txtweb.setText(Html.fromHtml(mresult));

Use this:
webView.loadDataWithBaseURL("file:///android_asset/", htmlParsing, "text/html", "utf-8", null);
webView.getSettings().setAllowFileAccess(true);
in htmlparsing: just pass urs html code.
It works....

Android: WebView load image in center

I want to load an image at the web view, but it shows all at top_left of the web view. My picture is on the internet not local.
gifView.loadUrl(mImageUrl);
gifView.setWebViewClient(new WebViewClient() {
#Override
public void onPageFinished(WebView view, String url) {
view.getSettings().setLoadsImagesAutomatically(true);
if (mProgressBar != null) {
mProgressBar.setVisibility(View.GONE);
}
}
#Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
if (mProgressBar != null) {
mProgressBar.setVisibility(View.VISIBLE);
}
}
});
Here is my xml:::
<WebView
android:id="#+id/gif_image"
android:background="#null"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
Edit:i used:
String HTML_FORMAT = "<html><body style=\"text-align: center; background-color: null; vertical-align: middle;\"><img src = \"%s\" /></body></html>";
final String html = String.format(HTML_FORMAT, mImageUrl);
gifView.loadDataWithBaseURL("", html, "text/html", "UTF-8", "");
but my image only Horizontal Center，how to center

Try this.
myWebView.loadData("<html><head><style type='text/css'>body{margin:auto auto;text-align:center;} img{width:100%25;} </style></head><body><img src='www.mysite.com/myimg.jpeg'/></body></html>" ,"text/html", "UTF-8");

I did it by using some code and xml :
<WebView android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="251dp"
android:layout_below="#+id/download"
android:layout_marginTop="20dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
and this (for horizental center) :
WebView loading = (WebView)rootView.findViewById(R.id.webview);
loading.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
loading.loadDataWithBaseURL("file:///android_asset/", "<html><center><img src=\"done.png\"></html>", "text/html", "utf-8", "");
Or this for (horizontal & vertical center) :
WebView loading = (WebView)rootView.findViewById(R.id.webview);
loading.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
loading.loadDataWithBaseURL("file:///android_asset/", "<html>\n" +
"<body bgcolor=\"white\">\n" +
" <table width=\"100%\" height=\"100%\">\n" +
" <tr>\n" +
" <td align=\"center\" valign=\"center\">\n" +
" <img src=\"loading.gif\">\n" +
" </td>\n" +
" </tr>\n" +
" </table>\n" +
"</body>", "text/html", "utf-8", "");

Try something like this:
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
String data = "<body><center><img width=\"" + width + "\" src=\"" + url
+ "\" /></center></body></html>";
webview.loadData(data, "text/html", null);

Try this, this will make the content fit to your webview
WebView web = (WebView) findViewById(R.id.gif_image);
web.getSettings().setDefaultZoom(ZoomDensity.FAR);

Do you use Linear layout? So you will require to use the gravity property of the parent linear layout.
A good explanation of gravity in android: http://sandipchitale.blogspot.com/2010/05/linearlayout-gravity-and-layoutgravity.html

The reason is not in the webview, it is the html code.
W3c wants that "text-align" should no longer take effekt on block elements like images.
You can read more at center-image-using-text-align-center
So either you make your image display:inline or you center it in a different way e.g.
.center {
left: 50%;
margin-left: -50%;
}

Android WebView background color

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 = "&#60head&#62&#60style&#62* {margin:0;padding:0;font-size:20; " +
"text-align:justify; color:#FFFFFF;}&#60/style&#62&#60/head&#62";
String titleWithStyle = textTitleStyling + "&#60body&#62&#60h1&#62" + movie.synopsis +
"&#60/h1&#62&#60/body&#62";
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 = "&#60head&#62&#60style&#62body{margin:0;padding:0;font-size:20; " +
"text-align:justify;}&#60/style&#62&#60/head&#62";
String titleWithStyle = textTitleStyling + "&#60body&#62&#60h1&#62" + movie.synopsis +
"&#60/h1&#62&#60/body&#62";
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.

Why Android WebView does not display properly HTML page with Hebrew text when text-align set to "justify"

I want to display local html file on a WebView. (Android 2.3.3)
The HTML contains Hebrew text. I want the text to be justified, so in my css file I do the following:
body
{
text-align: justify; direction: rtl;
}
But for some reason the text end up being messed up:
And this is definitely not "justified" but more aligned to the left.
Any idea how can overcome this problem?
It's working perfectly fine on any other browser than the WebView. (Including WebKit based ones)

This code worked for me:
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings settings = myWebView.getSettings();
settings.setDefaultTextEncodingName("utf-8");
String webtext = "שלום";
String summary = "<html lang=\"he\"><body><p dir=\"rtl\">" + webtext + "</p></body></html>";
myWebView.loadData(summary, "text/html", null);
}

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.

How can I properly justify text on a WebView on Android? - android

Related

how to display a site into android webview without footer and header

how does web view Load Html Content?

Android: WebView load image in center

Android WebView background color

Why Android WebView does not display properly HTML page with Hebrew text when text-align set to "justify"

Categories

Resources