Android SDK Customization

Custom CSS and JavaScript files

If you want to use custom CSS or JavaScript files you can add the cssPaths and jsPaths properties to your layout.

When a relative path is used, it will be relative to the assets folder.

XML Configuration:

<com.theoplayer.android.api.THEOplayerView
    android:id="@+id/theo_player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
app:defaultCss="true" app:cssPaths="path/to/style1.css,path/to/style2.css"
app:jsPaths="path/to/script1.js,path/to/script2.js" />

 

Java Configuration:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
.chromeless(false)
.defaultCss(true)
.cssPaths("path/to/style1.css,path/to/style2.css")
.jsPaths("path/to/script1.js,path/to/script2.js")
.build();
THEOplayerView tpv = new THEOplayerView(this, playerConfig);

 

Custom CSS and the Chromeless flag

With the chromeless flag you can choose to use the chromeless version of the player which does not contain the THEOplayer UI. This allows you to write your own custom UI.

The THEOplayer css is not loaded when chromeless is enabled.

When chromeless is false, the THEOplayer UI is used. In that case the default style can still be disabled by setting the defaultCss flag to false.

 

Communication between a custom JavaScript file and the THEOplayer Android SDK (≥ 1.3.0)

You can send messages from within a custom JavaScript file to the Android SDK.

1. Register a message listener in your Android app:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
.jsPaths("path/to/script.js")
.build();
THEOplayerView tpv = new THEOplayerView(this, playerConfig);
tpv.addJavaScriptMessageListener("messagetype", new MessageListener() {
@Override public void handleMessage(String message) {
System.out.println("Received message from JavaScript: " + message);
}
});

 

2. Send a message in your custom JavaScript file (script.js):

To send a message the theoplayerAndroid.sendMessage object should be used. The theoplayerAndroid object is provided in the global scope by the THEOplayer Android SDK.

/* this example sends a message every 10 seconds */
setInterval(function() {
theoplayerAndroid.sendMessage('messagetype', 'message');
}, 10000)