Docs Overview/
Floating Window (TUILiveKit)/

Floating Window (TUILiveKit)

Description of the Feature

The Floating Window feature allows hosts and viewers to enter Small Window Mode without exiting the live streaming room. The small window floats on the screen and can be freely dragged to a suitable position. The Floating Window can display the live broadcast screen. In Floating Window Mode, the app can switch to other scenarios or the background, and clicking the Floating Window can also restore the normal full-screen live streaming interface.




Use Instructions

Overview

The principle of the Floating Window is to add a custom view on the WindowManager as the content of the Floating Window. In Android 6.0 and above, it is necessary to request Floating Window permission.

Quick Integration

Core code of the Floating Window feature:
// File location: Android/tuilivekit/src/main/java/com/trtc/uikit/livekit/component/floatwindow/core
core                              // Implementation catalog of the Floating Window core feature
  ├── impl                        // Specific implementation of the Floating Window 
  ├── FloatWindow.java            // External interface of the Floating Window feature 
  └── FloatWindowObserver.java    // Listener of the Floating Window
If you are not using Android/tuilivekit, you can copy this directory to your project for use.
Sample code for quick implementation of a floating window:
// contentView is the view you want to display on the floating window. Please replace it with your own view.
// The status, events, and business logic on contentView are your responsibility. FloatWindow only displays the contentView.
TextView contentView = new TextView(this);
contentView.setBackgroundColor(0xE022262E);
contentView.setTextColor(Color.YELLOW);
contentView.setGravity(Gravity.CENTER);
contentView.setText("This is a float window");

FloatWindow floatWindow = FloatWindow.getInstance();
floatWindow.setView(contentView);
floatWindow.show();
The effect picture of the sample floating window is as follows:



Request Floating Window Permission:
First, register the android.permission.SYSTEM_ALERT_WINDOW permission in AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
</manifest>
Then dynamically request permission:
FloatWindow floatWindow = FloatWindow.getInstance();
if (floatWindow.hasPermission()) {
    floatWindow.setView(contentView);
    floatWindow.show()
} else {
    floatWindow.requestPermission();
}
Note:
In Android 6.0 and above, you need to request Floating Window Permission. You can also implement the logic to request Floating Window Permission yourself, as long as you call the show method of FloatWindow after obtaining the Floating Window Permission.
Listen for Floating Window Events:
FloatWindow floatWindow = FloatWindow.getInstance();
floatWindow.setObserver(new FloatWindowObserver() {
    @Override
    public void onClickWindow() {
        // Notification of clicking the Floating Window received,
        // you usually need to implement the business logic here: switch to normal full-screen mode and close the Floating Window.
    }

    @Override
    public void onMove(int x, int y) {
        // Notification of Floating Window movement received
    }
});
Customize Floating Window Settings:
FloatWindow floatWindow = FloatWindow.getInstance();
floatWindow.setSize(width, height);
floatWindow.setLocation(x, y);
floatWindow.setMarginToEdge(margin);

Mode Switch

Usually, the Floating Window mode and Normal mode need to switch between each other. The steps are as follows:
Switch from Normal mode to Floating Window mode
Switch from Floating Window mode to Normal mode
Request Floating Window Permission (if permission is granted, no application is needed);
Create Content View and set it for the Floating Window;
Exit Activity, but retain relevant data and status of the business.
Pop up the Floating Window.
Listen for Floating Window Events;
Upon receiving the onClickWindow notification, close the Floating Window, then return to the original Activity and restore the relevant business data and status.
Note:
The Floating Window feature only requires you to provide a Content View and has no association with your business logic.
The process of mode switching requires saving/restoring related business data and status. This feature depends on your code architecture and specific business, so you need to implement it yourself.
In the live streaming scenario, during the mode switching process, you need to use the same LiveCoreView object to display the live content in both modes. This not only allows sharing the view but also sharing live streaming data and status.



As shown in the figure, the normal mode is the LiveActivity scene, and the floating window mode is the LiveFloatWindow scene. During the mode transition, the same LiveCoreView object can be used to ensure the live broadcast proceeds smoothly. Since the LiveCoreView needs to be used in the LiveFloatWindow after being destroyed in the LiveActivity, the context used when creating the LiveCoreView is the ApplicationContext rather than an Activity.
LiveCoreView liveCoreView = new LiveCoreView(context.getApplicationContext());

Reference Implementation

Android/tuilivekit live streaming scenario has a default implementation of the floating window feature for your reference:
// File location: Android/tuilivekit/src/main/java/com/trtc/uikit/livekit/component/floatwindow

floatwindow                           // Implementation catalog of the floating window feature
  ├── service                         // LiveKit floating window business-related directory
  │      └── FloatWindowManager.java  // Responsible for implementing the switching between floating window mode and normal mode
  ├── store                           // LiveKit floating window status-related directory
  │      └── FloatWindowStore.java
  └── view                            // LiveKit floating window view-related directory
        ├── VideoFloatView.java       // Content view of the floating window in the live streaming scenario
        └── VoiceFloatView.java       // Content view of the floating window in the voice chat scenario. Voice chat does not support floating window yet.