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 customizable

To 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.
  • PlayerView controls 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())                
        }
    }
)