이 페이지는 현재 영어로만 제공되며 한국어 버전은 곧 제공될 예정입니다. 기다려 주셔서 감사드립니다.
Float Window

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.
﻿
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.