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
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.
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.
I am working on a reader and I have an issue with latest generation of android devices which comes with high resolution. The pictures on webViews are showing very small, while on older devices their size seemed acceptable. I cannot manipulate the content of the HTML files, I can only manipulate the webView's settings and the .css file linked to the webView.
Initially when I open the book the image shows very small, but when I manipulate the image it gets over magnified and becomes trimmed in both sides.
img
{
max-width: 100%;
width:auto;
height: auto;
}
I also tried:
img
{
min-width: 100%;
height: auto;
}
This is the webView settings:
testWV = (WebView) findViewById(R.id.mywebview1);
testWV.setDelegate(this);
testWV.setVerticalScrollBarEnabled(false);
testWV.setHorizontalScrollBarEnabled(false);
testWV.getSettings().setDefaultZoom(ZoomDensity.FAR);
Okay, try this, you may remove the head tag if you wish, the style is the important part
String content = "Your Content"; // I assume your content is a string
testWV = (WebView) findViewById(R.id.mywebview1);
testWV.setDelegate(this);
testWV.setVerticalScrollBarEnabled(false);
testWV.setHorizontalScrollBarEnabled(false);
testWV.getSettings().setDefaultZoom(ZoomDensity.FAR);
String head = "<head><meta name='viewport' content='target-densityDpi=device-dpi'/></head>";
String style = "<style> " +
"img { height:auto !important; width:100% !important; } " +
"</style>";
testWV.loadDataWithBaseURL("", head + style + content, "text/html", "UTF-8", "");
I have a requirement where by I need to convert a complex HTML file that has CSS styles into a PDF file in an Android app. I tried using IText library for Android but it is not able to interpret the CSS styles and some of the tags. I have searched a lot, and haven't been able to find a library that meets my requirement.
Is there any other library for converting HTML file to PDF in Android?
Below is my html file c5.html
<div id=divCont style="left:0px;top:0px;width:auto;height:569px;">
##
<div id="draggable_Name" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:210px;margin-top:45px;width:252px;height:27px;"> #Name-Data#</div>
##
<div id="draggable_Age_Gender" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:210px;margin-top:82px;width:252px;height:27px;"> #AgeGender-Data#</div>
##
<div id="draggable_Diagnosis" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:210px;margin-top:151px;width:252px;height:52px;line-height:0.5cm;"> #Diagnosis-Data#</div>
##
<div id="draggable_Note" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:17px;margin-top:120px;width:102px;height:252px;line-height:0.7cm;">#Note-Data#</div>
##
<div id="draggable_Rx_Text" class="ui-widget-content" style="border: 0px solid black;padding-bottom:15px;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:245px;margin-top:249px;width:277px;height:252px;line-height:0.7cm;">#Prescription-Data#</div>
##
<div id="draggable_Additional_Information" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:210px;margin-top:517px;width:277px;height:52px;line-height:0.7cm;">#AdditionalInformation-Data#</div>
##
<div id="draggable_Date" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:1px;margin-top:5px;width:122px;height:27px;">#Date-Data#</div>
##
<div id="draggable_Signature" class="ui-widget-content" style="border: 0px solid black;padding-bottom:5px;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:10px;margin-top:574px;width:122px;height:27px;">#Signature-Data#</div>
##
<div id="draggable_DrName" class="ui-widget-content" style="border: 0px solid black;padding-bottom:5px;position:absolute;font-family:Arial;font-size:10pt;font-weight:normal;margin-left:12px;margin-top:645px;width:150px;height:25px;">#DrName-Data#</div>
##
<div id="draggable_MedDocket_Id" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:9pt;font-weight:normal;margin-left:210px;margin-top:2px;width:252px;height:32px;">#MedDocketID-Data#</div>
##
<div id="draggable_doctor_RegistrationNo" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:9pt;font-weight:normal;margin-left:8px;margin-top:507px;width:172px;height:27px;">#doctor_RegistrationNo-Data#</div>
##
<div id="draggable_Patient_Address" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:9pt;font-weight:normal;margin-left:1px;margin-top:63px;width:202px;height:52px;">#Patient_Address-Data#</div>
##
<div id="draggable_Weight" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:9pt;font-weight:normal;margin-left:210px;margin-top:114px;width:72px;height:32px;">#Weight-Data#</div>
##
<div id="draggable_Prescription_SerialNo" class="ui-widget-content" style="border: 0px solid black;position:absolute;font-family:Arial;font-size:9pt;font-weight:normal;margin-left:1px;margin-top:32px;width:122px;height:27px;">#SerialNo-Data#</div>
##
</div>
Below is the code I used to convert my html to pdf file.
private void createPDF(File pdfFile) {
// create a new document
Document document = new Document(PageSize.A4);
try {
FileOutputStream fos = new FileOutputStream(pdfFile);
PdfWriter pdfWriter = PdfWriter.getInstance(document, fos);
document.open();
File htmlFile = new File(docDir, "c5.html");
FileInputStream fis = new FileInputStream(htmlFile);
String html = convertStreamToString(fis);
InputStream stream = new ByteArrayInputStream(html.getBytes("UTF-8"));
// get the XMLWorkerHelper Instance
XMLWorkerHelper worker = XMLWorkerHelper.getInstance();
// convert to Pdf
worker.parseXHtml(pdfWriter, document, stream);
// close the document
document.close();
// close the writer
pdfWriter.close();
Intent intent = new Intent(Intent.ACTION_VIEW);
Uri uri = Uri.fromFile(pdfFile);
intent.setDataAndType(uri, "application/pdf");
intent.setFlags(Intent.FLAG_ACTIVITY_NO_HISTORY);
startActivity(intent);
} catch (DocumentException e) {
e.printStackTrace();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
public String convertStreamToString(InputStream is) throws IOException {
BufferedReader reader = new BufferedReader(new InputStreamReader(is));
StringBuilder sb = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) {
sb.append(line).append("\n");
}
reader.close();
return sb.toString();
}
check out Class jsPDF, the newest version is v1.81 (2015-12-20
http://www.fpdf.org/en/download.php
we are working on developing plugin for k9-email client for android os... i want to get the name value pairs back in the decodedd format from the posted form..
when i open the mail after clicking "show original" on gmail then following is displayed...like..
input name=3D"DefaultZDM" value=3D"https://voltage-pp-0000.july.co=
m/zdr" type=3D"hidden">
input name=3D"ZFRDesignatedRecipient" value=3D"daphnebarretto#gmai=
l.com" type=3D"hidden">
div style=3D"width: 1px; max-width: 1px; min-height: 1px; max-heig=
ht: 1px; overflow: hidden; padding: 5px;">
pre style=3D"width: 1px; max-width: 1px; min-height: 1px; max-=
height: 1px; overflow: hidden; padding: 5px;"> =20
-----BEGIN VOLTAGE SECURE BLOCK V2-----
pt7tH1g22PVBtplPHn6zQgtRS2LFWbVavN5ZMOWs+S/x5OiPmWNy+Na8Xek9ICpE
3cm5xa5dIYvgYiYLbk8C0CuTd6koONPGs2IH2IQhm32phDpafXoa/1n3xOcfuuSB
v79H3sWZtW7EKy2hblpKi+0Y9KOZvpaL7nSd6tz9EVrA7XBa9nM1fvpBWvOsWIkA
VeYgMgjMFpLOVsastOqj3eJW7Jp+u4cm5n8PWAI4T9YuETtP/waOvYF8TAMI8Vey
3y09ZmJ2BS9VLhPKMJHSod6cYeSbD1gRwPoVp+AybnKz+BeBzd2DjBHS+sbd7/Va
Gn1beoCwfdPAteYxWcFShb6Sznw7whlZDyDnwtCwqrcHOpHIYkzXp4N5/4qzUzof
/QyBRY35rSciihyKqdo=3D
-----END VOLTAGE SECURE BLOCK V2-----
</pre>
</div>
</font>
</td></tr>
</tbody></table>
=20
</div>
</div>
from the above, input tags, i want to get the
DefaultZDM="https://voltage-pp-0000.july.com/zdr" and
ZFRDesignatedRecipient="daphnebarretto#gmail.com"
thank you..
One idea would be to use a regular expression to find your matches. Below is an example of how to use a regular expression to break a string at 160 characters, but you could easily modify it with:
Pattern p = Pattern.compile("DefaultZDM\" value=3D\"(.*)\"|ZFRDesignatedRecipient\" value=3D\"(.*)\""
I'm certain I do NOT have that pattern correct, but it's a start. That would match your desired value pairs and you could assign them to variables in your code.
protected ArrayList<String> splitMsg(SmsMessage smsMessage) {
ArrayList<String> smt;
Pattern p = Pattern.compile(".{1,160}");
Matcher regexMatcher = p.matcher(smsMessage.getMsgBody());
smt = new ArrayList<String>();
while (regexMatcher.find()) {
smt.add(regexMatcher.group());
}
return smt;
}