Skip to main content

  • Core Products

  • Add-Ons

  • Extensions Marketplace

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 MediaContext in 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:

  1. Download the source:

  2. Clone the repositories:


_1
git clone https://github.com/AgoraIO-Community/CloudClass-Android.git

  1. Update to the supported version of Flexible Classroom:

_2
cd CloudClass-iOS
_2
git checkout release/2.8.11

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:

  1. Integrate Flexible Classroom into your own project through Maven.

  2. Pay special attention to the references of the AgoraEduUIKit and AgoraClassSDK modules. You need to make the following changes in the build.gradle file:


    _8
    dependencies {
    _8
    // ...
    _8
    implementation "io.github.agoraio-community:hyphenate:`{VERSION}`"
    _8
    implementation "io.github.agoraio-community:AgoraEduCore:`{VERSION}`"
    _8
    // implementation "io.github.agoraio-community:AgoraEduUIKit:`{VERSION}`"
    _8
    // implementation "io.github.agoraio-community:AgoraClassSDK:`{VERSION}`"
    _8
    implementation project(path: ':AgoraClassSDK')
    _8
    }

In AgoraClassSDK, we have already made reference to AgoraEduUIKit.
Note that the version in the build.gradle file must be the same with the version of the GitHub source code.

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.

Example​

The following example shows how to change the height, title, and background color of the top navigation bar in Small Classroom:

  1. Find AgoraClassSmallActivity under the io.agora.classroom.ui directory in the AgoraClassSDK module.

  2. Find AgoraEduHeadComponent in activity_agora_class_small.xml corresponding to AgoraClassSmallActivity. Activity and .xml are bound through viewbinding.

  3. Open agora_edu_head_component.xml corresponding to 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 initView(agoraUIProvider: IAgoraUIProvider).

UI components can obtain the data of the EduCore layer through the IAgoraUIProvider interface.


_11
interface IAgoraUIProvider {
_11
/**
_11
* Get data from EduCore
_11
*/
_11
fun getAgoraEduCore(): AgoraEduCore?
_11
_11
/**
_11
* Customized data of the UI component
_11
*/
_11
fun getUIDataProvider(): UIDataProvider?
_11
}

Example​

The following example shows how to add a component named as AgoraEduMyComponent in One-to-one Classroom:

  1. Define AgoraEduMyComponent:


    _15
    class AgoraEduMyComponent : AbsAgoraEduComponent {
    _15
    constructor(context: Context) : super(context)
    _15
    constructor(context: Context, attr: AttributeSet) : super(context, attr)
    _15
    constructor(context: Context, attr: AttributeSet, defStyleAttr: Int) : super(context, attr, defStyleAttr)
    _15
    _15
    // TODO: Add your xml
    _15
    private var binding: xxxxBinding = xxxBinding.inflate(LayoutInflater.from(context), this, true)
    _15
    _15
    override fun initView(agoraUIProvider: IAgoraUIProvider) {
    _15
    super.initView(agoraUIProvider)
    _15
    // TODO: Handle the view here
    _15
    // TODO: agoraUIProvider provides classroom capabilities and data required by View. You can define it on your own
    _15
    }
    _15
    _15
    }

  2. Use the AgoraEduMyComponent that you defined in .xml:


    _7
    <xxxx.xxx.xxxx.AgoraEduMyComponent
    _7
    android:id="@+id/agora_class_head"
    _7
    android:layout_width="match_parent"
    _7
    android:layout_height="@dimen/agora_head_h_small"
    _7
    android:gravity="center"
    _7
    app:layout_constraintLeft_toLeftOf="parent"
    _7
    app:layout_constraintTop_toTopOf="parent" />

  3. Initialize the UI component in AgoraClass1V1Activity:


    _35
    class AgoraClass1V1Activity : AgoraEduClassActivity() {
    _35
    private val TAG = "AgoraClass1V1Activity"
    _35
    lateinit var binding: ActivityAgoraClass1v1Binding
    _35
    _35
    override fun onCreate(savedInstanceState: Bundle?) {
    _35
    super.onCreate(savedInstanceState)
    _35
    binding = ActivityAgoraClass1v1Binding.inflate(layoutInflater)
    _35
    setContentView(binding.root)
    _35
    _35
    // Create the classroom object
    _35
    createEduCore(object : EduContextCallback<Unit> {
    _35
    override fun onSuccess(target: Unit?) {
    _35
    // After the classroom resources are loaded
    _35
    joinClassRoom()
    _35
    }
    _35
    _35
    override fun onFailure(error: EduContextError?) {
    _35
    error?.let {
    _35
    ToastManager.showShort(it.msg)
    _35
    }
    _35
    finish()
    _35
    }
    _35
    })
    _35
    }
    _35
    _35
    private fun joinClassRoom() {
    _35
    runOnUiThread {
    _35
    eduCore()?.eduContextPool()?.let { context ->
    _35
    // Initialize the view
    _35
    binding.agoraEduMyComponent.initView(this)
    _35
    }
    _35
    join()
    _35
    }
    _35
    }
    _35
    }