Show a site in application with local CSS (using Android Studio)

Question

I have a site that is designed for showing in mobile. So I have decided to work with Android Studio.

I want to show my html file, live from server, but having local css and js files in application. In other word, I just want to load html from host and change its style with css that exist in application. I am using web view.

What should I do? Using iframe or something else? Please help me. Please provide a correct code for me.

My MainAtivity.java file:

package com.example.z5070.myapplication;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;


public class MainActivity extends ActionBarActivity {

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

        String url = "http://www.example.com";

        WebView view = (WebView) this.findViewById(R.id.webView);

        view.loadUrl(url);


    }








    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

My activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
 />

Take a look here: inject CSS to a site with webview in android: https://stackoverflow.com/questions/30018540/inject-css-to-a-site-with-webview-in-android — Benjamin Ronneling, Jan 15 '18 at 09:42

score 0 · Answer 1 · answered Apr 13 '15 at 18:29

Is the same in Android Studio or eclipse.... the easy way is use this line in your html file.

 <link type="text/css" rel="stylesheet" href="style.css">

Remember collocate in the same path the HTML file, CSS File or JS file, to do "easy way". But you can create a specific folder for each type file ig you need.

*Use asset folder for files.

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

You basically have to inject your CSS via webView.loadDataWithBaseURL(). Be sure to place your .css file in your assets folder and reference it relatively.

You can check THIS answer for more details!

edited May 23 '17 at 12:21

Community

1
1

answered Apr 13 '15 at 18:49

Vesko

3,750
2
23
29

I have placed my `.css` in assets folder. but I want to affect this `.css` in a live site like this site. for example I want to change fonts of this site with `.css` that t exist in my `assets` folder. – sinaamiri Apr 13 '15 at 19:00
I think your only chance here is to download the html contents of this website (don't display it yet), then inject your .css and then display it in the webView. In other words - get the raw response of a HttpConnection, save it all in a String(Builder), edit this string to insert your css and then load the result with webView.loadData(). Ugly solution, but the task you want to accomplish is a bit "hacky" anyways :) – Vesko Apr 13 '15 at 19:12

Show a site in application with local CSS (using Android Studio)

2 Answers2