# Classroom and Proctor SDK (/en/realtime-media/flexible-classroom/build/customize-the-ui-and-plugins/customize-classroom)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

## 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:

![Data exchange process in Agora Classroom SDK](https://web-cdn.agora.io/docs-files/1651746402754)

### The structure of classrooms and UI components

The structure of classrooms is as follows:

![Flexible Classroom structure](https://web-cdn.agora.io/docs-files/1651746955542)

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:

![Flexible Classroom UI component structure](https://web-cdn.agora.io/docs-files/1651749419432)

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](https://github.com/AgoraIO-Community/CloudClass-Android) on GitHub. Refer to the following steps:

1. Download the source:

   1. Clone the repositories:

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

   2. Update to the supported version of Flexible Classroom:

      ```bash
      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](/en/realtime-media/flexible-classroom/build/integrate-the-sdks/integrate-flexible-classroom) 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:

   ```kotlin
   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')
   }
   ```

<CalloutContainer type="info">
  <CalloutDescription>
    In `AgoraClassSDK`, we have already made reference to `AgoraEduUIKit`.
  </CalloutDescription>
</CalloutContainer>

<CalloutContainer type="info">
  <CalloutDescription>
    Note that the version in the build.gradle file must be the same with the version of the GitHub source code.
  </CalloutDescription>
</CalloutContainer>

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

![Android UI components in the com.agora.edu.component directory](https://web-cdn.agora.io/docs-files/1650365793677)

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

   ![AgoraEduHeadComponent in activity\_agora\_class\_small.xml](https://web-cdn.agora.io/docs-files/1651749152493)

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.

   ![agora\_edu\_head\_component.xml navigation bar settings](https://web-cdn.agora.io/docs-files/1650438755866)

   ![Small Classroom navigation bar after Android UI customization](https://web-cdn.agora.io/docs-files/1651749267518)

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

```kotlin
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`:

   ```kotlin
   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`:

   ```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`:

   ```kotlin
   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()
           }
       }
   }
   ```

    
  
      
  
      
  
      
  


## Platform-specific versions
- [Android](/en/realtime-media/flexible-classroom/build/customize-the-ui-and-plugins/customize-classroom/android.md)
- [iOS](/en/realtime-media/flexible-classroom/build/customize-the-ui-and-plugins/customize-classroom/ios.md)
- [Web](/en/realtime-media/flexible-classroom/build/customize-the-ui-and-plugins/customize-classroom/web.md)
- [Electron](/en/realtime-media/flexible-classroom/build/customize-the-ui-and-plugins/customize-classroom/electron.md)