Customize the classroom UI
This page explains the way UI components work in Flexible Classroom, and how to update this UI to match your branding.
Introduction to classrooms and UI components
This section tells you about the components that manage data and the user interface in Flexible Classroom.
Data exchange process
In the Agora Classroom SDK, the code of the user interfaces is separated from the code of core business logic. The Classroom SDK contains two libraries, AgoraEduUI and AgoraEduCore. These two libraries connect with each other through Agora Edu Context. Supposing that we want to implement a button for turning on or off the camera, you can call the
openLocalDevice method of
AgoraEduUI, and listen to the event which indicates the device state change thrown by
IMediaHandler. The data flow is as follows:
The structure of classrooms and UI components
The structure of classrooms is as follows:
The UI of each classroom type is defined in the corresponding
.xml file and contains multiple independent UI components. The structure of UI components is as follows:
Developers can combine UI components as they wish to implement a custom classroom type, and can also customize UI components or modify the existing UI components of Flexible Classroom.
Customize the classroom UI
To customize the classroom UI, follow these steps:
1. Get the source code of Flexible Classroom
If you want to customize the classroom UI based on the default UI of Flexible Classroom, you need to integrate Flexible Classroom by downloading the source code on GitHub. Refer to the following steps:
Download the source:
Clone the repositories:
- Update to the supported version of Flexible Classroom:
In later steps, you edit the code in the following two folders:
/AgoraClassSDK: Implements the classroom page.
/AgoraEduUIKit: All UI components used in Flexible Classroom.
2. Import the library of UI components
To import the library of UI components, refer to the following steps:
Integrate Flexible Classroom into your own project through Maven.
Pay special attention to the references of the
AgoraClassSDKmodules. You need to make the following changes in the
AgoraClassSDK, we have already made reference to
3. Edit the existing UI components
All UI components are in the
com.agora.edu.component directory, you are free to edit the code and change the UI.
The following example shows how to change the height, title, and background color of the top navigation bar in Small Classroom:
io.agora.classroom.uidirectory in the
.xmlare bound through
AgoraEduHeadComponent. In this file, you can directly change the height, title, and background color of the navigation bar.
4. Add a UI component
To add a UI component, you must extend
AbsAgoraEduComponent and call
UI components can obtain the data of the EduCore layer through the
The following example shows how to add a component named as
AgoraEduMyComponent in One-to-one Classroom:
AgoraEduMyComponentthat you defined in
Initialize the UI component in