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

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

## Introduction to classrooms and UI components [#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 [#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-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 [#customize-the-classroom-ui]

    To customize the classroom UI, follow these steps:

    ### 1. Get the source code of Flexible Classroom [#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:

    2. Clone the repositories:

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

    1. 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 [#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 [#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 [#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 [#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 [#example-1]

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