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.

This section tells you about the components that manage data and the user interface in Flexible Classroom.

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

To customize the classroom UI, follow these steps:

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.

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.

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:

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.

   

   

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

}

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

   }