Out-of-the-box fullscreen implementation (Android)
Built-in fullscreen implementation with minimal setup.
The Android SDK provides an out-of-the-box fullscreen implementation supporting navigation stack using either Android standard FragmentManager, or Android Jetpack Navigation library.
The out-of-the-box fullscreen implementation is not customizableTo implement your own fullscreen, please refer to the custom fullscreen implementation page.
Supported features
The out-of-the-box implementation handles:
- Orientation change: Portrait, reverse portrait, landscape and reverse landscape.
- Native back button support: Fullscreen can be exited when user taps on the device software / physical back button or by tapping on the exit fullscreen button from the player controls.
- Fullscreen will start in landscape mode.
PlayerViewcontrols button fullscreen state change from enter fullscreen icon from/to exit fullscreen icon.
Sample app available:Out-of-the-box fullscreen showcased in the Android SDK sample app.
1. Enable out-of-the-box fullscreen
Set up your Android app so that it can receive requests when the Player wants to go in fullscreen mode.
Handle orientation as a configuration change
In the AndroidManifest.xml file, add the following code to the <activity> tag of the Activity hosting the PlayerView.
android:configChanges="orientation|screenSize"This ensures that the orientation change is handled as a device configuration change, which keeps the Activity instantiated, and only invalidate the Activity layout.
Make sure to re-use the created PlayerView and avoid creating a new PlayerView on a state change: this will optimize the device battery life, bandwidth and memory consumption.
To handle correctly state management refer to: https://developer.android.com/topic/libraries/architecture/saving-states.
Listen to fullscreen trigger
Pass an object implementing PlayerListener.onFullscreenRequested(playerDialogFragment: DialogFragment) method:
Dailymotion.createPlayer(
context = context,
playerId = "MY_PLAYER_ID", // replace by desired player id
videoId = "A_VIDEO_ID", // replace by desired video id
playerSetupListener = object : Dailymotion.PlayerSetupListener {
override fun onPlayerSetupSuccess(player: PlayerView) {
// Add PlayerView to view hierarchy
}
override fun onPlayerSetupFailed(error: PlayerError) {
// PlayerView setup failed
}
},
playerListener = object : PlayerListener {
override fun onFullscreenRequested(playerDialogFragment: DialogFragment) {
// Show fullscreen dialog
}
}
)2. Display fullscreen UI
Now that your Android app is able to receive fullscreen mode requests, we need to configure how your app responds to this tigger and displays the fullscreen UI : playerDialogFragment
Based on your app’s navigation stack, choose one of the following ways to display playerDialogFragment:
Option 1: Using FragmentManager
If your application is using FragmentManager, display playerDialogFragment like a standard Android dialog fragment:
Dailymotion.createPlayer(
context = context,
playerId = "MY_PLAYER_ID", // replace by desired player id
videoId = "A_VIDEO_ID", // replace by desired video id
playerSetupListener = object : Dailymotion.PlayerSetupListener {
override fun onPlayerSetupSuccess(player: PlayerView) {
// Add PlayerView to view hierarchy
}
override fun onPlayerSetupFailed(error: PlayerError) {
// PlayerView setup failed
}
},
playerListener = object : PlayerListener {
override fun onFullscreenRequested(playerDialogFragment: DialogFragment) {
// Show the playerDialogFragment on screen
playerDialogFragment.show([email protected], "dmPlayerFullscreenFragment")
}
}
)Option 2: Using Android Jetpack Navigation
1. Add fullscreen dialog fragment to navigation graph
If your application is using Android Jetpack Navigation library, you need to add the fullscreen dialog fragment to navigation graph before being able to navigate to it:
<dialog
android:id="@+id/FullscreenPlayerWebViewFragment" android:name="com.dailymotion.player.android.sdk.webview.fullscreen.FullscreenPlayerWebViewDialogFragment"
android:label="FullscreenPlayerWebViewFragment"
tools:layout="@layout/dm_sdk_fragment_dialog_fullscreen_player_webview" />Add the navigation action to display the fullscreen dialog fragment inside the hosting fragment. Make sure to insert the correct value of the action id attribute:
<action android:id="action_MainFragment_to_FullscreenPlayerWebViewFragment"
app:destination="@id/FullscreenPlayerWebViewFragment" />The resulting navigation graph file should look like this:
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/nav_graph"
app:startDestination="@id/MainFragment">
<fragment
android:id="@+id/MainFragment"
android:name="com.dailymotion.player.android.jetpackfullscreen.MainFragment"
android:label="@string/fragment_main_label"
tools:layout="@layout/fragment_main">
<!-- Action to Fullscreen dialog fragment -->
<action android:id="@+id/action_MainFragment_to_FullscreenPlayerWebViewFragment"
app:destination="@id/FullscreenPlayerWebViewFragment" />
</fragment>
<!-- Fullscreen dialog fragment -->
<dialog
android:id="@+id/FullscreenPlayerWebViewFragment" android:name="com.dailymotion.player.android.sdk.webview.fullscreen.FullscreenPlayerWebViewDialogFragment"
android:label="FullscreenPlayerWebViewFragment"
tools:layout="@layout/dm_sdk_fragment_dialog_fullscreen_player_webview" />
</navigation>2. Display fullscreen dialog fragment
Use the Jetpack Navigation action to open the fullscreen dialog:
Dailymotion.createPlayer(
context = context,
playerId = "MY_PLAYER_ID", // replace by desired player id
videoId = "A_VIDEO_ID", // replace by desired video id
playerSetupListener = object : Dailymotion.PlayerSetupListener {
override fun onPlayerSetupSuccess(player: PlayerView) {
// Add PlayerView to view hierarchy
}
override fun onPlayerSetupFailed(error: PlayerError) {
// PlayerView setup failed
}
},
playerListener = object : PlayerListener {
override fun onFullscreenRequested(playerDialogFragment: DialogFragment) {
// Show the playerDialogFragment on screen
findNavController()
.navigate(MainFragmentDirections.actionMainFragmentToFullscreenPlayerWebViewFragment())
}
}
)Updated 24 days ago
