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/corecore // 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 thecontentView
.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() {@Overridepublic 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.}@Overridepublic 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/floatwindowfloatwindow // 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.