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)

Custom FullScreen Activity

If you want to customize the behavior and/or look of the full screen activity, you can do this by using a custom full screen activity class. The steps to do this are given below.

1. Extend the FullScreenActivity class

To do this, you first need to make a class that extends FullScreenActivity, for exampe:

public class CustomFullScreenActivity extends FullScreenActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        View overLay = this.getLayoutInflater().inflate(R.layout.fullscreen_overlay, null);
        this.addContentView(overLay, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    }

    public void onPauseButtonClick(View view) {
        getTHEOplayerView().getPlayer().pause();
    }
}

Of which they layout xml could be like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:orientation="vertical"
tools:context=".mainactivity.CustomFullScreenActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onPauseButtonClick"
android:text="pause" />
</FrameLayout>

2. Set your custom FullScreenActivity class for a THEOplayerView

This class could then be set for a certain THEOplayerView object (tpv) like this:

tpv.getFullScreenManager().setFullscreenActivity(CustomFullScreenActivity.class);