Hello i have this html from webservices and i load it into web view ,, its working good ,, now i need to add my font to this , and make its gravity right !
BodyNot = "<html> <head> <style> body { background-color: clear !important; } p,div,span,li { color:black; font-size:17px !important;background-color: clear !important;} embed, iframe, object, video {height: 160px; width: 355.0px;} img { height: 160px; width: 355.0px; } </style> </head> <body><p>" +
BodyNot +
"</p>" +
"</div></p></body> </html>";
serviceWebView.loadData(BodyNot, "text/html; charset=utf-8", "UTF-8");
serviceWebView.getSettings().setBuiltInZoomControls(true);
serviceWebView.getSettings().setDisplayZoomControls(false);
I'm a little bit guessing but I think that changing <p> to <p align="right"> will do the job.
Related
Placing my project in a folder the main root directory, I have created a simple hello world project. The Html file when loaded into chrome works great, however, loading files in the main project folder or subfolders give a net::ERR_FILE_NOT_FOUND
I would like to have video autoplay in the background with a basic overlay & buttons (already set to go & works on desktop).
Tried moving the file locations to the main folder & renamed the directories to not have spaces.
Also tried using file:/// instead of opening through a file explorer in chrome.
Using Android v10 on Pixel 2XL
<body>
<div id="mainCont">
<spread class="header">Main Test</spread><br>
<button> Layout 1</button>
</div>
<div>
<video playsinline autoplay muted loop id="bgVideo">
<source src="Link/VerticalTest.mp4" type="video/mp4">
</video>
</div>
</body>
<style>
#font-face {
font-family: Lato;
src: url(/FontRef/ProximaNova-Bold.otf) format('opentype'),
url(/FontRef/ProximaNova-Light.otf) format('opentype'),
url(/FontRef/ProximaNova-Reg.otf) format('opentype'),
url(/FontRef/ProximaNova-It.otf) format('opentype'),
url(/FontRef/ProximaNova-Sbold.otf) format('opentype'),
}
body{
text-align: center;
font-family: ProximaNova-Reg, sans-serif;
}
#bgVideo {
z-index:-1;
position: fixed;
right: 0;
top: 0;
width: 100%;
}
#mainCont{
padding: 5em;
z-index:10000;
positoin: absolute;
top:50%;
transform: translateY(100%);
}
a{
color:white;
text-decoration: none;
}
button{
padding:10px;
margin:2em;
color: #494949 !important;
text-transform: uppercase;
text-decoration: none;
background: none;
border: 1px solid white !important;
display: inline-block;
transition: all 0.4s ease 0s
}
button:hover{
color: #ffffff !important;
background: #f6b93b;
border-color: #f6b93b !important;
transition: all 0.4s ease 0s;
}
.header{
font-family: ProximaNova-Sbold, sans-serif;
font-size: calc(2.87em - 1vw);
color:white;
font-weight:400;
text-transform:uppercase;
letter-spacing:.6em;
margin-top:calc(6em - 1vw);
}
Using the remote debugger in chrome on my android device, net::ERR_FILE_NOT_FOUND is the only issue that I receive for the video file. No such error for the fonts which are being applied for some reason?
I've always placed my files in the android 'assets' folder. Then, you can do something like this for the HTML:
webView.loadUrl("file:///android_asset/L1.html");
Or if you are referencing image or movie files, I've used something like this:
#SuppressLint({ "SetJavaScriptEnabled", "DefaultLocale" })
private void displayDetail()
{
webView.getSettings().setJavaScriptEnabled(true);
String imageName = animalName.toLowerCase();
imageName = imageName.replaceAll(" ", "_");
imageName = imageName.replaceAll("-", "_");
imageName = imageName.replaceAll("\\(", "");
imageName = imageName.replaceAll("\\)", "");
imageName = imageName + ".jpg";
String html = "<html><body style='font-size: 18px; font-family: \"arial\";'><center><img alt='Embedded Image' src='" + imageName + "'/></center><br><div style='position: relative; margin-left: 10px; margin-right:10px;'>" + breedDetails + "</div></body></html>";
String mime = "text/html";
String encoding = "utf-8";
webView.loadDataWithBaseURL("file:///android_asset/", html, mime, encoding, null);
}
Also ensure you have permission to read from external storage.
I have an app which takes data from a database and then displays it as a list of articles. The data is taken and put in a recyclerView with web views in it.
One specific article has this html:
<div style="position: absolute; height: 100%; background: url('https://www.softray.it/wp-content/uploads/2015/10/home-test-6.2.png') no-repeat;">
<div style="height: 100%; width: 50%; margin-left: auto; margin-right: auto;display: table-cell; vertical-align: middle; text-align: center;">
<h1 style="padding: 10px; text-align: center; font-family: 'Open Sans', sans-serif; color: #ffffff;">SOFTRAY TECHNOLOGY</h1>
<p style="padding-left: 5px; text-align: center; color: #ffffff; font-family: 'Open Sans', sans-serif;">La potenza del mobile re-inventa le applicazioni business e un nuovo stile di IT</p>
</div>
</div>
*Sorry for the messy html I just don't have a decent editing tool on the database.
The problem here is that my background image doesn't display and even the second div doesn't center vertically the way it should.
I tried to attach html and body tags to my data before displaying it but still no background image loads.
holder.webView.loadData("<html style='height:100%;'><body style='height:100%;margin:0;padding:0;'>" + s + "</body></html>", "text/html", "utf-8");
I know I probably have to give an element a fixed height but I want to adapt to any screen. Any tips?
EDIT:i just need to get the height in pixels of the webview content so I can set that in the html tag.
Problem with this is that I need to know this dimension before I load my data.
Try saving the html code as example.html file in the assets folder and then load the web view using :
webView.loadUrl("file:///android_asset/example.html");
The web view shall use match_parent as width and height to cover 100% of its parent layout.
Edit:
On getting the data from server, you can implement this method:
private void saveHtmlFile(String htmlStr) {
String path = "/data/data/" + getApplicationContext().getPackageName() + "/files/";
String fileName = "example";
fileName = fileName + ".html";
File file = new File(path, fileName);
try {
FileOutputStream out = new FileOutputStream(file);
byte[] data = htmlStr.getBytes();
out.write(data);
out.close();
webView.getSettings().setJavaScriptEnabled(true);
webView.loadUrl("file:///data/data/" + getApplicationContext().getPackageName() + "/files/example.html");
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
Kindly check this link once:
https://stackoverflow.com/a/15617341/6388699
I have this WebView and I get the HTML from server.
String Body = "<html> <head> <style> body { background-color: clear !important; } p,div,span,li { color:black; font-size:17px !important;background-color: clear !important;} embed, iframe, object, video {height: 160px; width: 355.0px;} img { height: 160px; width: 355.0px; } </style> </head> <body><p>" +
BodyDetails +
"</p>" +
"</div></p></body> </html>";
Log.d("currentContent != null", Body);
CustomTextViewDetail.getSettings().setJavaScriptEnabled(true);
CustomTextViewDetail.loadData("", "text/html; charset=utf-8", "UTF-8");
CustomTextViewDetail.loadData(Body, "text/html; charset=utf-8", "UTF-8");
CustomTextViewDetail.getSettings().setBuiltInZoomControls(true);
CustomTextViewDetail.getSettings().setDisplayZoomControls(false);
My issue is that when I change the HTML content, web view still shows the last content not load the new content!
How to refresh or solve this issue?
Call myWebView.reload() after you change the data.
I have an email body and it has html,css tags and I am trying to retrieve only the body text in Android.
I used;
String.valueOf(Html.fromHtml(body);
and that gave me the text with css tags. What should I do for retrieve only the text?
Result is holding in a String
Normally (when I first receive body );
<html>
<head>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 10pt;
font-family:Tahoma
}
--></style></head>
<body class='hmmessage'><div dir='ltr'>
TEXTONE<div>TEXTTWO</div> </div></body>
</html>
After String.valueOf(Html.fromHtml(body);
<!-- .hmmessage P { margin:0px; padding:0px } body.hmmessage { font-size: 10pt; font-family:Tahoma } -->
TEXTONE
TEXTTWO
I just want to receive TEXTONE and TEXTTWO
fromHtml() supports only common HTML tags. HTML comments are not considered as tags, and are ignored. List of the tags, supported by fromHtml() can be found here.
Following code should fix your problem:
s = String.valueOf(Html.fromHtml(body);
s = s.replaceAll("(?s)<!--.*?-->", "");
I have a html code which I saved in home.txt file and placed it raw folder. Now I want to display the same in a WebView. I used the following code for it.
homeWebview = (WebView) findViewById(R.id.homeWebview);
InputStream fileStream = getResources().openRawResource(R.raw.home);
int fileLen = fileStream.available();
// Read the entire resource into a local byte buffer.
byte[] fileBuffer = new byte[fileLen];
fileStream.read(fileBuffer);
fileStream.close();
displayText = new String(fileBuffer);
//Display content.
homeWebview.loadData(displayText, "text/html", "utf-8");
It is working fine. Now I have to display some Chinese characters in the html. I added the Chinese character in home.txt. Here it is the html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Language</title>
<style type="text/css">
body {font-family: HelveticaExt-normal, Helvetica, Arial, sans-serif;margin:0;font-size:20px;color:#000000;}
.mainWrapper {margin:0;}
p {margin: 10px;}
p.bodytext {margin: 0 10px 20px;}
.headerText { background:#eeeeee; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e0e0e0));border-top: 2px solid #000000;padding-bottom:7px;}
.headerText p {margin: 10px 10px 0 10px;}
a {color:#324f85;text-decoration:underline;}
.headerbar {border-top:2px solid #000000;border-bottom:2px solid #000000;height:34px;font-family:HelveticaExt-bold, Helvetica, Sans-serif;color:#fff;font-size:18px;padding-left:10px;line-height:34px;margin:0;
background:-webkit-gradient(linear, left top, left bottom, from(#494e4f), to(#787a7c));
}
.navigationList {list-style-type:none;padding:0;margin:0;}
.navigationList li {height:60px;border-bottom:2px solid #e0e0e0;background-position:10px center;background-repeat:no-repeat;padding-left:60px;line-height:28px;
}
</style>
</head>
<body>
<div class="mainWrapper">
<div class="headerText">
<p欢迎您到泰国语言主持人！www.test.com 欲了解更多信息！</p>
</div>
</div>
</body>
Now it is displaying the common characters well, but all the Chinese char is showing as unknown char. What is the prob in my code?
use webView.loadDataWithBaseURL (null, text, "text/html", "utf-8", null);
The home.txt file was not in UTF-8 encoded, I open it in notepad++ and change the encoding. Now it is showing properly.
I think problem in this line:
displayText = new String(fileBuffer);
You should change to
displayText = new String(fileBuffer, "UTF-8");