Ways to incorporate CSS padding into a website displayed in a webView

I have been trying to figure out a way to apply padding-bottom (Custom CSS) to a webpage fetched from RemoteConfig (URL provided). Unfortunately, I do not have direct access to the webpage's source files for editing.

Below is the code snippet in question:

public class PlayoffsFragment extends BaseFragment {
    private WebView webView;

    public static PlayoffsFragment newInstance(Bundle args) {
        PlayoffsFragment fragment = new PlayoffsFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,@Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {
        rootView =  inflater.inflate(R.layout.fragment_playoffs, container, false);
        setActionBar();
        setViews();
        setViewContents();
        return rootView; 
    }

    @Override
    public void onPrepareOptionsMenu(Menu menu) {
        super.onPrepareOptionsMenu(menu);
        hideCalendarMenuItem(); 
    }

    @Override
    protected void setActionBar() {
        showActionBar();
        setContentMarginOff();
        changeToolbarBackground(R.color.transparent);
        changeToolbarIconsColor(ContextCompat.getColor(getContext(), R.color.white)); 
    }

    @Override
    protected void setViews() {
        webView = rootView.findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setDatabaseEnabled(true);
        webView.getSettings().setMinimumFontSize(1);
        webView.getSettings().setMinimumLogicalFontSize(1);
    }

    @Override
    protected void setViewContents() {
        webView.loadUrl(BuildConfig.WEB_URL);
    }

}

Answer №1

Success! I was able to accomplish the task at hand. In case anyone is looking to replicate this, here is the revised code that I used:

@Override
protected void configureViews() {
    webView.setWebViewClient(new WebViewClient());
    webView.setWebChromeClient(new WebChromeClient());
    WebSettings webSettings = webView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setDomStorageEnabled(true);
    webSettings.setDatabaseEnabled(true);
    webSettings.setMinimumFontSize(1);
    webSettings.setMinimumLogicalFontSize(1);
    
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView view, String url){
            applyCSS();  
            super.onPageFinished(view, url);
        }
    });
}

@Override
protected void populateView() {
    webView.loadUrl(url);
}

private void applyCSS() {
    try {
        InputStream inputStream = getContext().getAssets().open("styles.css");
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();
        String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);

        webView.loadUrl("javascript:(function() {" +
                "var head = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                "style.innerHTML = window.atob('" + encoded + "');" +
               "head.appendChild(style);" +
                "})()");
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Additionally, ensure that you have created a file named styles.css in the Assets folder.

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

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

Hi there! I'm new to css and tried following a tutorial with some tweaks. However, when adding a drop down menu using lists, it ended up going sideways instead of downward. Can anyone help me out? I also would like to have a collapsible menu implemen ...

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

I've successfully implemented a code snippet that allows image cropping using PHP, jQuery, and Ajax with the Croppie plugin. Currently, I'm facing an issue while trying to include additional input values along with the image upload process. I ...

Improving the layout and size of text within input fields

How can we adjust the input text positioning to the right so it's not directly against the edge? Is there a way to move 'searching' 5px to the right? ...

Experience the thrill of Morphia MongoDB: You have already defined the Filter type

Upon attempting to start a Play Java application with Morphia for MongoDB, I encounter the following stack trace due to the recompilation of the Filter type that is already compiled: An unexpected Internal Server Error (500) occurred while making a requ ...

The grid expands to cover the entire width of the browser

Hello everyone, I am a newbie when it comes to JavaScript and CSS. I am in need of a code, whether it be JavaScript or CSS, that will allow me to stretch out a grid layout measuring 5 x 2 along with pictures to completely cover the width of the browser wi ...

My button is overflowing its container in Bootstrap 5, how can I fix this issue?

I've been experiencing an issue with the button in my code. It keeps extending outside of the parent div container, regardless of the screen size. <header class="header"> <div class="hero text-white pt-7"> <div ...

Sending a GET call to a .json endpoint in Java and retrieving the data it contains

I have found this unique URL which returns data in JSON format. My goal is to send a GET request to fetch the "data" portion of the object for visualization purposes. The challenge I face is deciding whether to utilize HttpURLConnection, URL,URLConnectio ...

The issue of border-radius and shadow box inconsistency

I'm trying to style a div with the following properties: .example { margin: 200px; width: 200px; height: 200px; border-radius: 20px; box-shadow: white 0px 0px 0pt 8pt, #033354 0px 0px 0pt 11pt; } <div class="example"> </div> ...

Navigating and scrolling through a Selenium ScrollTable to find the desired target element

I am currently using Selenium WebDriver alongside Java and ChromeDriver for my automation tasks. The challenge I'm facing is when I try to click on a cell within the table displayed below. Due to the table overflowing and having a scrollbar, there is ...

Selenium and Java are throwing a WebDriverException with an unknown error. The loading status cannot be determined due to a timeout, specifically Timed out receiving message from renderer after

For my web automation Java project, I have been utilizing Selenium along with chromedriver v2.20 executable. The process involves initializing "ChromeDriverService" and using it to create ChromeDriver with the following syntax: "new ChromeDriver(service, c ...

Dynamically Interacting Fragments in Android

My activity consists of only 2 buttons and a FrameLayout: <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:id="@+id/linearLayout"> <Button ...

Stop HTML elements from shifting position when content is modified using JavaScript

'use strict'; const countdown = () => { // create function to calculate time until launch in Days/Hours/Minutes/Seconds // time difference const countDate = new Date('May 25, 2024 00:00:00').getTime(); const now = new Date( ...

Obtaining ag-grid table values with Selenium Java without the need to scroll through the entire table

Currently, I am utilizing Selenium in Java to extract values from an ag-grid table that dynamically loads data when scrolling either vertically or horizontally. We are currently implementing JavaScriptExecutor to scroll the table and retrieve the values. ...

Tips for making a table have the same width as its child td elements and enabling the table to exceed the width of the viewport

I am facing a challenge with a table that has dynamically changing rows and columns. <table> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td> ...

Step-by-step guide to creating a border around text with a number included in between the lines

Is there a way to replicate the appearance of the image shown below using CSS, Bootstrap, or other client-side methods? ...

I am unable to populate MongoDB references using Node.js

I need to display the user's location details on the screen. For example: name: "Andy" surname : "Carol" City : "Istanbul" Town : "Kadıkoy" When the getuser function is called, I want to show the City and Town name. This is the implementation: U ...

Is there a method to declare a Java generic type variable that is limited to extending any of several classes?

Let's consider two classes: public class X { public void method() { } } public class Y { public void method() { } } I want to create a generic static function that can execute the method when given an instance of either X or Y. This ...

What is the method for customizing the hover color in a mantine.ui menu?

I've been attempting to modify the menu color when hovering over it, but unfortunately, it's not working. Could anyone provide guidance on how to change the hover color in mantine.ui menu? ...

When using the @OneToMany annotation, it is possible to return an empty list if there are zero to many elements present (

I have a foreign key that points recursively to the same entity, but it cannot be nullable. Person entity: @OneToMany(fetch = FetchType.LAZY) @JoinColumn(name = "personId", referencedColumnName = "managerId", updatable = false, insertable = false, nullab ...