App crashing while using JavaScript on Android Studio

Question

I'm creating an app for my project, I took this html, css and javascript online but when I use this html file in WebView it runs but as soon a we tap button for signin or signup the app starts to crash.

At first I thought it was problem for my device but then I tried several devices and use clean code. But so far the problem remains to be unsolved.

Here's my MainActivity.java


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        String myLogin = "file:///android_asset/index.html";
        WebView view = (WebView) findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.addJavascriptInterface(new WebViewInterface(),"JavascriptInterface");
        view.loadUrl(myLogin);
    }


    public class WebViewInterface{
         @JavascriptInterface

        public void toast(){

         Toast.makeText(MainActivity.this,"Interface is working!!!",Toast.LENGTH_LONG).show();
         }


    }

}

Here's my HTML code:-

<!DOCTYPE html>
<html lang="en" >
<head>
      <meta charset="UTF-8">
      <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'>
    <link rel="stylesheet" href="./style.css">
    </head>
    <body>
    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form action="1">
                <h1>Create Account</h1>

                <span><br>Use your Email for Registration</span>
                <input type="text" placeholder="Name" id="up_name" />
                <input type="email" placeholder="Email" id="up_email"/>
                <input type="password" placeholder="Password" id="up_password"/>
                <button id="signUpBtn">Sign Up</button>
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="2">
                <h1>Sign in</h1>
                <span><br>Use your Email Account to Login</span>
                <input type="email" placeholder="Email" id="in_email"/>
                <input type="password" placeholder="Password" id="in_password"/>
                <button id="signInBtn">Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To keep connected with us please login with your personal info</p>
                <button class="ghost" id="signIn">Sign In</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Hello, Friend!</h1>
                    <p>Enter your personal details and start journey with us</p>
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>
                </div>
        </div>
    </div>
    <script  src="./script.js"></script>

    </body>
</html>

Here's my JavaScript file:-



const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');


var sign_in = document.getElementById("signInBtn");
var sign_up = document.getElementById("signUpBtn");
//


signUpButton.addEventListener('click', () => {
    container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
    container.classList.remove("right-panel-active");
});


sign_in.onclick = function(){
    var in_Email = document.getElementById("in_email").value;
    var in_Pass = document.getElementById("in_password").value;

    JavascriptInterface.toast();
}

sign_up.onclick = function(){
    var up_Name = document.getElementById("up_name").value;
    var up_Email = document.getElementById("up_email").value;
    var up_Pass = document.getElementById("up_password").value;

    JavascriptInterface.toast();
}

CSS file if needed


@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');

* {
    box-sizing: border-box;
}

body {
    background: #f6f5f7;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    margin: 0px;
}

h1 {
    font-weight: bold;
    margin: 0;
}

h2 {
    text-align: center;
}

p {
    font-size: 14px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: 0.5px;
    margin: 20px 0 30px;
}

span {
    font-size: 12px;
}

a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
}

button {
    border-radius: 20px;
    border: 1px solid #FF4B2B;
    background-color: #FF4B2B;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
}

button:active {
    transform: scale(0.95);
}

button:focus {
    outline: none;
}

button.ghost {
    background-color: transparent;
    border-color: #FFFFFF;
}

form {
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    text-align: center;
}

input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
}

.container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 
            0 10px 10px rgba(0,0,0,0.22);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all 0.6s ease-in-out;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.container.right-panel-active .sign-in-container {
    transform: translateX(100%);
}

.sign-up-container {
    left: 0;
    width: 50%;
    opacity: 0;
    z-index: 1;
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.6s;
}

@keyframes show {
    0%, 49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%, 100% {
        opacity: 1;
        z-index: 5;
    }
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container.right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay {
    background: #FF416C;
    background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    color: #FFFFFF;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.overlay-panel {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left {
    transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
    transform: translateX(0);
}

.overlay-right {
    right: 0;
    transform: translateX(0);
}

.container.right-panel-active .overlay-right {
    transform: translateX(20%);
}

.social-container {
    margin: 20px 0;
}

.social-container a {
    border: 1px solid #DDDDDD;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

LOGCAT File


    --------- beginning of crash
2019-09-05 14:48:49.724 16830-16830/com.example.ekka4sept E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.ekka4sept, PID: 16830
    android.os.FileUriExposedException: file:///android_asset/2? exposed beyond app through Intent.getData()
        at android.os.StrictMode.onFileUriExposed(StrictMode.java:1978)
        at android.net.Uri.checkFileUriExposed(Uri.java:2371)
        at android.content.Intent.prepareToLeaveProcess(Intent.java:10260)
        at android.content.Intent.prepareToLeaveProcess(Intent.java:10213)
        at android.app.Instrumentation.execStartActivity(Instrumentation.java:1854)
        at android.app.Activity.startActivityForResult(Activity.java:4599)
        at androidx.fragment.app.FragmentActivity.startActivityForResult(FragmentActivity.java:767)
        at android.app.Activity.startActivityForResult(Activity.java:4557)
        at androidx.fragment.app.FragmentActivity.startActivityForResult(FragmentActivity.java:754)
        at android.app.Activity.startActivity(Activity.java:4918)
        at android.app.Activity.startActivity(Activity.java:4886)
        at android.content.ContextWrapper.startActivity(ContextWrapper.java:379)
        at aJw.startActivity(PG:22)
        at aHi.a(PG:34)
        at org.chromium.android_webview.AwContentsClientBridge.shouldOverrideUrlLoading(PG:161)
        at android.os.MessageQueue.nativePollOnce(Native Method)
        at android.os.MessageQueue.next(MessageQueue.java:326)
        at android.os.Looper.loop(Looper.java:160)
        at android.app.ActivityThread.main(ActivityThread.java:6898)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:537)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
2019-09-05 14:48:49.730 16830-16830/com.example.ekka4sept W/OPDiagnose: getService:OPDiagnoseService NULL
2019-09-05 14:48:49.737 16830-17711/com.example.ekka4sept D/OSTracker: OS Event: crash
2019-09-05 14:48:49.740 16830-16830/com.example.ekka4sept W/RenderThread: type=1400 audit(0.0:1174180): avc: denied { read } for name="u:object_r:vendor_default_prop:s0" dev="tmpfs" ino=15867 scontext=u:r:untrusted_app:s0:c63,c257,c512,c768 tcontext=u:object_r:vendor_default_prop:s0 tclass=file permissive=0
2019-09-05 14:48:49.749 16830-16976/com.example.ekka4sept E/libc: Access denied finding property "vendor.debug.egl.changepixelformat"
2019-09-05 14:48:49.760 16830-16830/com.example.ekka4sept W/RenderThread: type=1400 audit(0.0:1174181): avc: denied { read } for name="u:object_r:vendor_default_prop:s0" dev="tmpfs" ino=15867 scontext=u:r:untrusted_app:s0:c63,c257,c512,c768 tcontext=u:object_r:vendor_default_prop:s0 tclass=file permissive=0
2019-09-05 14:48:49.771 16830-16976/com.example.ekka4sept E/libc: Access denied finding property "vendor.debug.egl.swapinterval"
2019-09-05 14:48:49.770 16830-16830/com.example.ekka4sept W/RenderThread: type=1400 audit(0.0:1174182): avc: denied { read } for name="u:object_r:vendor_default_prop:s0" dev="tmpfs" ino=15867 scontext=u:r:untrusted_app:s0:c63,c257,c512,c768 tcontext=u:object_r:vendor_default_prop:s0 tclass=file permissive=0
2019-09-05 14:48:49.783 16830-16976/com.example.ekka4sept E/libc: Access denied finding property "vendor.debug.egl.swapinterval"
2019-09-05 14:48:49.793 16830-16830/com.example.ekka4sept I/Process: Sending signal. PID: 16830 SIG: 9

Please Help we with it and thanks for your support!!

Your question is alread answered here: https://stackoverflow.com/q/38200282 — Rahul Khurana, Sep 05 '19 at 09:24
Hey the solution you gave works but the problem which occurs is it flashes a webpage load failure before the new activity opens for a sec. If you could help me with this, it would be great! — Shrey Gupta, Sep 05 '19 at 09:59
got it here https://imagizer.imageshack.com/img921/5056/VdKMyP.gif — Shrey Gupta, Sep 05 '19 at 10:40
sign_in.onclick = function(){ var in_Email = document.getElementById("in_email").value; var in_Pass = document.getElementById("in_password").value; JavascriptInterface.toast(); } .public void toast(){ Toast.makeText(MainActivity.this,"Interface is working!!!",Toast.LENGTH_LONG).show(); } — Shrey Gupta, Sep 05 '19 at 11:15
sorry my bad that was the old code. public void toast(){ Intent intent = new Intent(MainActivity.this, checkkk.class); startActivity(intent); finish(); — Shrey Gupta, Sep 05 '19 at 11:30
Are you sure this is the only code inside onClick method? I think you're logging in user via some Javascript code which is redirecting user to the problem page — Rahul Khurana, Sep 05 '19 at 14:05

score 0 · Answer 1 · answered Sep 05 '19 at 09:30

0

Try to use instead to load the file like this String myLogin = "file:///android_asset/index.html"; use the android FileProvider. it seems that is the problem.

https://developer.android.com/reference/android/support/v4/content/FileProvider

answered Sep 05 '19 at 09:30

Dimitris KOutsos

13
5

Hey Dimitris, can you help me with setting up FileProvider as I am an newbie towards android and I aint able to understand how to use it – Shrey Gupta Sep 05 '19 at 10:12
https://www.journaldev.com/23219/android-capture-image-camera-gallery-using-fileprovider[link]. Follow that turorial and replace the path element with yours in the provider_paths.xml file. – Dimitris KOutsos Sep 05 '19 at 12:59

App crashing while using JavaScript on Android Studio

1 Answers1