Display a vibrant welcome screen on an Android WebView that ensures a visually appealing experience while the content loads for the

When launching an application, the desired behavior is as follows:

  • Display a splash screen while simultaneously loading a URL
  • Upon the firing of a JavaScript interface event on page load, remove the splash screen

Mainactivity.java

myWebView.addJavascriptInterface(new JavaScriptInterface(this, cookieManager),"Android");

JavaScriptInterface.java

@JavascriptInterface
  public void hideOrRemoveSplashScreen() {
  objetcSplashScreen.doRemoveSplashScreen();    
  //...
}

HTML page (for pages loaded within the app, detected by User Agent)

$(function() {
  try{Android.hideOrRemoveSplashScreen()}catch(e){};
});

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/pullfresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
    <WebView
        android:id="@+id/msw_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"></WebView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Is there a way to simultaneously load a simple .png image as a splash screen with the app and then remove it?

Answer №1

It seems like this method is effective, although I'm not completely certain:

  1. Make changes to the activity_main.xml file to create a container that includes both an image and a webview
    <?xml version="1.0" encoding="utf-8"?>
    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/pullfresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
      <ImageView
        android:id="@+id/splashimg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/darkblue"
        android:src="@drawable/splash" />
      <WebView
        android:id="@+id/msw_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"></WebView>
       </LinearLayout>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Next, locate and initialize objects in MainActivity.java

container = findViewById(R.id.container);
splash = findViewById(R.id.splashimg);

Lastly, remove the image during the page loading process within the OnCreate method

myWebView.setWebChromeClient(new MyChrome() {
[...]
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
       if (newProgress == 100){
          container.removeView(splash);
       }
       super.onProgressChanged(view, newProgress);
    }
}

During the initial page load, the removal of the view causes a brief flash of a white background until the page fully loads. This can be resolved by setting

<body style='background-color'>

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

Having issues with the $addToSet method in my MongoDB API implementation

Despite searching through various topics, I couldn't find a solution to my specific problem. In an effort to enhance my JavaScript skills, I embarked on creating a quote generator. I successfully developed the API and frontend components. However, c ...

Firefox fails to render SVG animation

Currently, I'm attempting to incorporate this unique animation into my website: http://codepen.io/dbj/full/epXEyd I've implemented the following JavaScript code in order to achieve the desired effect: var tl = new TimelineLite; tl.staggerFromTo ...

Is there a workaround in TypeScript to add extra details to a route?

Typically, I include some settings in my route. For instance: .when('Products', { templateUrl: 'App/Products.html', settings: { showbuy: true, showex ...

Error: Attempting to access a property 'notesObjectInService' that is undefined on the object

I'm currently facing an issue where my controller is unable to load an object from a service called notesFactory. The console.log(typeof notesFactory) statement returns 'undefined', causing notesObjectInService to trigger an exception. Desp ...

Using React.js to create a modal that includes ExpansionPanelDetails with a Checkbox feature

I am trying to achieve a specific visual effect with my code. Here is an example of the effect I want: https://i.stack.imgur.com/cJIxS.png However, the result I currently get looks like this: https://i.stack.imgur.com/547ND.png In the image provided, y ...

Establishing the controller to set the default order

Would appreciate some assistance with what may appear to be a beginner's question, please? This is the HTML code I'm working with: <!doctype html> <html> <head> <title>Starting Angular</title> </head> < ...

Difficulty occurred when trying to import Polymer components

Currently, I am in the process of learning how to utilize Polymer. I meticulously followed the instructions provided exactly as specified here. However, upon reaching step 3 and adding the import for paper-checkbox, an error presented itself: Error: A c ...

Can a form be submitted to two different pages based on the button name?

I have a form that directs to another page and performs various database operations. <form id="form1" method="post" action="goes_to_page1.php" onsubmit="return checkformvalidation();"> <input type="text" id="field1" name="field1" onblur="checkva ...

Running repetitive tasks in PHP using setInterval function

I've been working on adding a "friend request" feature to my website and I really want the requests to show up instantly without having to reload the page. After doing some research, it seems like using setInterval with Ajax is the way to go. I found ...

Error: Invariant Violation occurred with code 29 while using React Apollo and GraphQL

I encountered an error that says "Invariant Violation: 29." Could someone explain what this error means and if I missed something in my code that triggered it? The error occurred when I was trying to import the LocationSearch component into my index.js. im ...

Divide and conquer- Lighttpd's mod_wstunnel combines separate messages by using UNIX socket communication to the backend server

In my experience with lighttpd's mod_wstunnel, I have encountered a peculiar issue. When I send two messages in quick succession from the backend using a UNIX socket to communicate between lighttpd and the backend, I noticed that lighttpd logs show th ...

Retrieve user information from Auth0 once the user has completed the signup process

I am looking to integrate the ability to create new users on Auth0 through my admin panel. Currently, I am utilizing Auth0 lock for signups, but now I need to store these users in my Database, which requires their email and Auth0 user ID. I am exploring o ...

Challenges with managing VueJS methods and understanding the component lifecycle

I'm facing an issue with my code. The function retrieveTutorials() is not transferring the information to baseDeDatosVias as expected. I've attempted to change the function to a different lifecycle, but it hasn't resolved the problem. The so ...

Suggestions for retaining dynamically modified HTML content post-response

My registration form includes input fields for username, email, and more. I have implemented a script that validates the form upon clicking the submit button, turning labels red when fields are empty. However, the submit button is also configured to send a ...

Using HTML5 data attributes as alternative configuration options in a jQuery plugin can present challenges

I am currently in the process of creating my very first jQuery plugin, and I have encountered a challenge when attempting to extend the plugin to support HTML5 data attributes. The idea is for a user to be able to initialize and adjust settings simply by u ...

What are the essential Angular 2 observables for me to utilize?

I have created a form input for conducting searches. Upon user input into the search bar, I want to trigger calls to two separate APIs simultaneously. Here is my current attempt: myInput: new FormControl(); listOne: Observable<string[]>; listTwo: Ob ...

The animated loader doesn't appear when utilizing the AsyncTask loader inside a fragment to showcase images in a grid view

In my quest to showcase images in a grid view within a fragment, I have encountered an issue. The images are being downloaded during runtime using an async task loader while utilizing a base adapter within the same fragment. Everything seems to be functio ...

Adding the unzip feature is not within my capabilities

I am a novice Japanese web developer. Unfortunately, my English skills are not great. I apologize for any inconvenience. I am interested in utilizing this specific module: https://www.npmjs.com/package/unzip To do so, I executed the following commands ...

What is the process for saving an HTML document with SaveFile.js?

I'm currently implementing a save feature for my website. Utilizing the 'SaveFile.js' module from this link: 'https://github.com/eligrey/FileSaver.js/' Once the user clicks on the save button, the goal is to have the entire documen ...

The TS2769 error occurs when trying to change the react calendar due to no matching overload in the

The calendar functionality in my project was implemented using the response calendar library. Suddenly, I encountered an onChange prop error in the default code. This was working fine before. What steps should I take to resolve this issue? Here is my cod ...