Using CSS in Android WebView

I am currently working on creating a book reader for EPUB files, and I would like to display the book pages in a 2-page layout (horizontally) similar to a physical book. To achieve this, I have set up two webviews at runtime and attempted to manage the content within them. For navigating between next and previous pages, I have utilized the following code snippet:

webViewRead.scrollBy(0, 0);
webViewRead.scrollTo(0, postion);

Despite my efforts, it has proven quite challenging to maintain the Table of Contents when switching between pages. Is there a way to accomplish this using a single view and segmenting the content through CSS?

For example:

webkit-column-count: 
moz-column-gap: 
webkit-column-gap:

Would this be a better approach? Additionally, since my HTML pages are already stored in the SDCARD, how can I link a new CSS file to these existing HTML files?

androidcsswebview

Answer №1

To enhance your webview experience, try using the WebView.loadData method instead of loadurl or file.

You can dynamically generate or retrieve data from an HTML file and inject CSS content into it before loading it onto the webview...

This approach allows you to seamlessly incorporate CSS styles into your existing HTML data for a visually appealing display on the webview.

Appreciate your time!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Keep the Bootstrap dropdown menu open when the search bar is in focus

I am working on a customized bootstrap dropdown menu that needs to remain open when the search bar within the Events dropdown is focused. I have managed to make it open and close on hover, but now I need it to stay open under certain conditions. Below is ...

javascriptjquerycsstwitter-bootstrapdrop-down-menu

Bug in Android causing Firebase Database Persistence Issue

For the past 2 weeks, I have been diligently using and testing my Android app. My app heavily relies on the Firebase Realtime Database, with a crucial requirement for it to seamlessly work offline. Upon launching my app, I sync all necessary data for a s ...

androidfirebasefirebase-realtime-database

Troubleshooting challenges arise with Bootstrap's button group spacing issue

I am encountering spacing issues with the markup provided below. <h2>Profitability Report</h2> <form method="post"> <div class="row"> <div class="col-md-12"> <div class="btn-group btn-group-toggle ...

htmlcsstwitter-bootstrapbootstrap-4

The issue of app.css and app.js resources not loading in Laravel 8 with nginx, resulting in a 404 not found error, needs to be

Although this question may appear to be a duplicate, I assure you it is different. I have thoroughly searched through Stack Overflow, Laracast, Reddit, and GitHub for a solution. My setup includes a Laravel application on an Ubuntu VM with Nginx. The pro ...

javascriptcssnginxhttp-status-code-404laravel-8

Issues with assert.h in Android NNG

My first question is: Is NDEBUG already defined by default, causing asserts not to work until I #undef it? And my second question is why do they work, but I receive no logging in DDMS. Is there a specific android assert.h file that I should be using? Or ...

androidc++candroid-ndkassert

CSS animations are only functional when the Developer Tools are activated

I recently implemented a transition to uppercase in CSS, but it seems to only work when I open dev tools in Mozilla and not at all in Chrome. This is my first attempt at using animations in CSS, so any feedback on my code is appreciated. I'm curious ...

csscss-transitions

How can you automatically adjust the height of a div to be 100% of its parent while maintaining top and bottom margins

http://jsfiddle.net/YumHS/ The page showcased in the provided jsfiddle link includes a sidebar within the content div. <section class="cont"> <div class="sidebar"> <ul> <li> ...

csshtmlheightsticky-footer

Record phone calls on Android devices running version 7 and higher

While attempting to incorporate call recording into my app, I encountered a restriction on the permission "CAPTURE_AUDIO_OUTPUT" which is only granted to system apps. This limitation prevents me from recording audio of the other person during calls. I ca ...

androidcallcall-recording

What is the best way to shift all elements to the right side except for 'tindog'?

https://i.sstatic.net/hAUps.png <nav class="navbar navbar-expand-lg navbar-dark "> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="button" data-t ...

htmlcssbootstrap-4navbar

Ways to maximize the viewport height by placing a Sidebar below a Navbar

This outlines the issue at hand: My goal is to extend the sidebar to cover the remaining height of the viewport, ensuring that the footer remains visible at all times, regardless of the varying height of the bootstrap 4 navbar. Is there a solution for ach ...

htmlcsstwitter-bootstrapbootstrap-4

"Looking to move an element across the entire screen on Android? Here's how to do it

While working on animations in React Native, I observed a difference between Android and iOS behavior. Specifically, the transform: [{ translateY: height }] property does not fill the whole screen on Android like it does on iOS. On Android, it only applies ...

androidiosreactjsreact-nativecss-transforms

Steps for accessing the camera within a custom Ionic app

Currently, I am working on a unique custom application built using Ionic and Typescript. I have encountered an issue with opening the camera to capture a picture. While my app successfully opens the native camera for capturing photos, it unfortunately tak ...

androidtypescriptcordovaionic-framework

What is the best way to position a title at the bottom center of each image within my grid gallery?

I'm struggling to find a way to position a title at the bottom of each image in my grid gallery, right in the center of the photo with a light-gray background. I want the text to be fully visible regardless of the image used. Currently, I can only put ...

htmlcsscss-grid

Can Google Glass receive touchpad input through an Android application?

I am currently working on transitioning my Android app to Google Glass. Could someone advise me on how to capture touchpad input programmatically (such as touching the side of the frame with fingers) in my Android/Java code? ...

javaandroidgoogle-glass

"Printed documents fail to display underlined text using Bootstrap styling

Why do the codes show underlines on the webpage but not in the browser's print? This code is from the printOrder.blade.php file: <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="UTF-8&qu ...

cssbootstrap-5

Error in React Native: Evaluating custom module in Android returns 'undefined' instead of an object

I’m currently in the process of learning how to create a react-native module, but I’ve hit a roadblock with this error: https://i.sstatic.net/gLKy5.png Here’s a snippet of my code: Module.java (../android/src/main/java/com/reactlibrary) public clas ...

androidreact-nativenpm

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

jqueryhtmlcssclasshtml-table

Alter the hue on the fly

How can I change the color of a div based on whether it is currently red or green? I attempted the following code, but it doesn't seem to be working as expected. if ($(this).css("background-color")=="rgb(34,187,69)"|| $(this).css("background-color") ...

javascriptjqueryhtmlcss

Rearranging ListView items in Flutter to prioritize selected items at the top

I have been searching for a solution to permanently move selected items to the top of a ListView in flutter. The functionality I am looking for is to press an icon button next to a ListView element and have that element move to the top when a refresh occu ...

androidioslistviewdartflutter

Steps for positioning a div with list items to match the height of its parent container

I've been grappling with this problem for a long time now. Within the parent div "wrapper," there is a child div called "sidebar-wrapper" that contains an ul with li elements. I'm trying to make the height of "sidebar-wrapper" adjust to match t ...

htmlcsstwitter-bootstrap