Android Crosswalk Project: How to use css?

Question

I created a new project for testing Crosswalk Project.
I'm trying to load some content with css file but the css doesn't work at all. Code from MainActivityFragment:

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import org.xwalk.core.XWalkPreferences;
import org.xwalk.core.XWalkSettings;
import org.xwalk.core.XWalkView;

/**
 * A placeholder fragment containing a simple view.
 */
public class MainActivityFragment extends Fragment {

    private XWalkView xWalkWebView;

    private View mContentView;

    private static final String page = "
" +
            "            
" +
            "
" +
            "                
" +
            "
" +
            "                
" +
            "
" +
            "            
" +
            "
" +
            "            
" +
            "
" +
            "                
" +
            "Harum aut nostrum
" +
            "
" +
            "
" +
            "Saepe aut non numquam
" +
            "Sed aliquid
" +
            "Quo rerum quia veniam dolore
" +
            "Doloribus dolores
" +
            "Excepturi adipisci ad enim consequatur
" +
            "Enim qui autem iure aut deserunt
" +
            "Minima natus ratione rerum officia
" +
            "Non sed et eveniet aut
" +
            "
" +
            "
" +
            "Facere id nemo. Quasi dolorem est et. Modi aperiam est magni. Necessitatibus non labore ut qui atque Aliquam modi dolores nulla odit. Placeat vel vel quia nisi distinctio. Dolores porro autem rerum ex. Consequuntur quia quia Quod voluptas dolorem accusamus nemo. Tempora nostrum iste qui vel Non esse aut aut ut ducimus. sit est sed ad. unde quibusdam in tempore et eum recusandae. Molestiae omnis harum consequatur officia. adipisci iure libero voluptatem necessitatibus est.
" +
            "
" +
            "Minus corrupti explicabo amet aut suscipit. Porro rerum corrupti a
" +
            "
" +
            "
" +
            "
" +
            "            
" +
            "        ";

    public MainActivityFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        mContentView = inflater.inflate(R.layout.fragment_main, container, false);

        xWalkWebView = (XWalkView) mContentView.findViewById(R.id.xwalkWebView);

        xWalkWebView.setInitialScale(1);

        XWalkSettings settings = xWalkWebView.getSettings();

        if(settings != null) {

//            settings.setBuiltInZoomControls(true);

//            settings.setSupportZoom(true);

            settings.setDefaultFontSize(20);

//            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
//
//                settings.setDisplayZoomControls(false);
//
//            }

        }

//        xWalkWebView.load("https://crosswalk-project.org", null);

        xWalkWebView.load(null, page);

        // turn on debugging
        XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);

        return mContentView;
    }

    @Override
    public void onPause() {
        super.onPause();
        if (xWalkWebView != null) {
            xWalkWebView.pauseTimers();
            xWalkWebView.onHide();
        }
    }

    @Override
    public void onResume() {
        super.onResume();
        if (xWalkWebView != null) {
            xWalkWebView.resumeTimers();
            xWalkWebView.onShow();
        }
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (xWalkWebView != null) {
            xWalkWebView.onDestroy();
        }
    }

}

And here is my css file:

@font-face { 
    font-family: 'thesansarabic'; 
    /* src: url('DejaVuSans.ttf'); This doesn't work */
    /* src: url('fonts/DejaVuSans.ttf'); Neither is this */
    src: url('file:///android_asset/fonts/thesansarabic-plain.otf'); /* but this does */
}

body {
    font-size: small;
    font-family: 'thesansarabic';

    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding-top: 48px;
    padding-right: 10px;
    padding-bottom: 48px;
    padding-left: 10px;

    box-sizing: border-box;

    /*direction: ltr;*/
}

img {

    max-width: 100%;
    width: auto;
    height: auto;

}

/*iframe, video {

    max-width: 100%;

}*/

/* Portrait */
@media screen
  and (orientation: portrait) {

    iframe, video {

        max-width: 100%;
        max-height 40%;
        height: 250px;

    }

}

/* Landscape */
@media screen
  and (orientation: landscape) {

    iframe, video {

        max-width: 60%;
        max-height 30%;
        height: 200px;

    }

}

Note: This code works on default android webview.

Here is how i'm Embedding the Crosswalk Project:

repositories {
    maven {
        url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:23.2.1'
    compile 'org.xwalk:xwalk_core_library:17.46.448.10'
}

Jacky Young · Accepted Answer

our developers have resolved your problem, you can just add file:///android_asset/ like XWalkView.load("file:///android_asset/", content); to make css work and No need to add any full-path in your css file. src: url('fonts/DejaVuSans.ttf'); also will work. About your second question of crosswalk samples on android, You can find most android embedding apis' usecases on embeddingapi or embeddingapi-async. They are two ways of using crosswalk(sync & async).

Android Crosswalk Project: How to use css?

Answers (2)

Related Questions