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:
To clone the repository, run the following command:
git clone https://github.com/AgoraIO-Community/CloudClass-Android.git
To switch the branch, run the following command. Remember to replace {VERSION} with a specified version number:
git checkout release/apaas/{VERSION}
For example, if you want to switch to the branch of v2.1.0, just run the following command:
git checkout release/apaas/2.1.0
Agora recommends switching the branch of the latest release. The following image shows how to see the latest release branch in the GitHub repository:
In later steps, you edit the code in the following two folders:
/AgoraClassSDK
: Implements classroom pages./AgoraEduUIKit
: All UI components used in Flexible Classroom.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 AgoraEduUIKit
and AgoraClassSDK
modules. You need to make the following changes in the build.gradle
file:
dependencies {
// ...
implementation "io.github.agoraio-community:hyphenate:{Version}"
implementation "io.github.agoraio-community:AgoraEduCore:{Version}"
// implementation "io.github.agoraio-community:AgoraEduUIKit:{Version}"
// implementation "io.github.agoraio-community:AgoraClassSDK:{Version}"
implementation project(path: ':AgoraClassSDK')
}
AgoraClassSDK
, we have already made reference to AgoraEduUIKit
.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:
Find AgoraClassSmallActivity
under the io.agora.classroom.ui
directory in the AgoraClassSDK
module.
Find AgoraEduHeadComponent
in activity_agora_class_small.xml
corresponding to AgoraClassSmallActivity
. Activity
and .xml
are bound through viewbinding
.
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.
interface IAgoraUIProvider {
/**
* Get data from EduCore
*/
fun getAgoraEduCore(): AgoraEduCore?
/**
* Customized data of the UI component
*/
fun getUIDataProvider(): UIDataProvider?
}
The following example shows how to add a component named as AgoraEduMyComponent
in One-to-one Classroom:
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
}
}
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" />
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()
}
}
}