CSS and JavaScript not working in Android WebView

Question

My MainActivity.java file looks like below:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String myUrl = "file:///android_asset/index.html";
        WebView view = (WebView) this.findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.getSettings().setDomStorageEnabled(true);
        view.getSettings().setSaveFormData(true);
        view.setWebChromeClient(new WebChromeClient());
        view.loadUrl(myUrl);
    }
}

Now, activity_main.xml file contains following codes:

<WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp" />
</android.support.constraint.ConstraintLayout>

And, in the html page index.html, I have been linking CSS and JS files like below:

<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<script src="file:///android_asset/js/popper.min.js"></script>

I am seeing the html content; but, the CSS and JavaScript files are not in action at all. The page looks plain. I am new to Android, I am certainly missing something crucial here.

I'm not sure if WebView can pick up file:///android_asset/* css and js files. You can try using CDN links of both. See getbootstrap.com/docs/3.3/getting-started/#download-cdn and cdnjs.com/libraries/react-popper — adnanyousafch
– adnanyousafch, Commented Oct 20, 2017 at 4:13
Thank you, it worked as I restarted the computer and re-launched Android Studio/emulator. — Sajha Party
– Sajha Party, Commented Oct 20, 2017 at 5:09

Jon Goodwin · Accepted Answer · 2017-10-20 10:59:58Z

2

In the html page index.html, use the path names relative to your html page (not file:///android_asset).

So change this:

<link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
<script src="file:///android_asset/js/popper.min.js"></script>

To this:

<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/popper.min.js"></script>

with directory structure:

+---assets
¦   +---css
¦   +---js

edited Oct 20, 2017 at 10:59

answered Oct 20, 2017 at 6:26

Jon Goodwin

9,1755 gold badges37 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS and JavaScript not working in Android WebView

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related