Looking for the previous docs site? Visit the legacy docs homepage. (opens in a new tab)
Agora Docs

Classroom and Proctor SDK

Updated

Easily update the look and feel of your classrooms.

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:

git clone https://github.com/AgoraIO-Community/CloudClass-Android.git
  1. Update to the supported version of Flexible Classroom:
cd CloudClass-iOS
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:

    dependencies {
 // ...
 implementation "io.github.agora-apaas:hyphenate:<version>"
 implementation "io.github.agora-apaas:AgoraEduCore:<version>"
 // implementation "io.github.agora-apaas:AgoraEduUIKit:<version>"
 // implementation "io.github.agora-apaas:AgoraClassSDK:<version>"
 implementation project(path: ':AgoraClassSDK')
}

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.

interface IAgoraUIProvider {
    /**
     * Get data from EduCore
     */
    fun getAgoraEduCore(): AgoraEduCore?

    /**
     * Customized data of the UI component
     */
    fun getUIDataProvider(): UIDataProvider?
}

Example

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

  1. Define AgoraEduMyComponent:

    class AgoraEduMyComponent : AbsAgoraEduComponent {
    constructor(context: Context) : super(context)
    constructor(context: Context, attr: AttributeSet) : super(context, attr)
    constructor(context: Context, attr: AttributeSet, defStyleAttr: Int) : super(context, attr, defStyleAttr)

    // TODO: Add your xml
    private var binding: xxxxBinding = xxxBinding.inflate(LayoutInflater.from(context), this, true)

    override fun initView(agoraUIProvider: IAgoraUIProvider) {
    super.initView(agoraUIProvider)
    // TODO: Handle the view here
    // TODO: agoraUIProvider provides classroom capabilities and data required by View. You can define it on your own
    }

}

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

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

  3. Initialize the UI component in AgoraClass1V1Activity:

    class AgoraClass1V1Activity : AgoraEduClassActivity() {
    private val TAG = "AgoraClass1V1Activity"
    lateinit var binding: ActivityAgoraClass1v1Binding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityAgoraClass1v1Binding.inflate(layoutInflater)
        setContentView(binding.root)

        // Create the classroom object
        createEduCore(object : EduContextCallback<Unit> {
            override fun onSuccess(target: Unit?) {
                // After the classroom resources are loaded
                joinClassRoom()
            }

            override fun onFailure(error: EduContextError?) {
                error?.let {
                    ToastManager.showShort(it.msg)
                }
                finish()
            }
        })
    }

    private fun joinClassRoom() {
        runOnUiThread {
            eduCore()?.eduContextPool()?.let { context ->
                // Initialize the view
                binding.agoraEduMyComponent.initView(this)
            }
            join()
        }
    }
}

Contact Us

+1 (408) 879-5885

2804 Mission College Blvd.Santa Clara, CA, USA 95054

AgoraCopyright © 2026 AgoraAll rights reserved