How to Show Teacher in Full Screen Mode Using Agora Classroom SDK

• The content is a blog article that explains how to show the teacher’s video in full screen mode using Agora Classroom SDK, a set of libraries and tools for creating online classrooms with Agora’s real-time communication platform.

If you are developing an online teaching video app using Agora Classroom SDK, you might encounter a problem where the teacher’s video is shown in a small thumbnail instead of a full screen mode. This can be frustrating for both the teacher and the students, as they cannot see each other clearly and interact effectively. In this article, I will show you how to solve this problem and make the teacher’s video occupy the entire screen on the student’s app.

What is Agora Classroom SDK?

Agora Classroom SDK is a set of libraries and tools that enable you to create flexible and interactive online classrooms with Agora’s real-time communication platform. You can use Agora Classroom SDK to integrate features such as video, audio, chat, whiteboard, courseware, and screen sharing into your app. Agora Classroom SDK supports various classroom types, such as one-to-one, small class, and lecture hall. You can also customize the classroom UI and logic according to your needs.

Problem

The problem is that when you launch the student app using Agora Classroom SDK, the teacher’s video is displayed in a small thumbnail on the top of the screen, just like the other students’ videos. This is not ideal, as you want the teacher’s video to be the main focus of the screen and occupy the entire space.

Solution

The solution is to modify the code of the AgoraClassSmallActivity class, which is responsible for handling the logic and UI of the small class type. Specifically, you need to change the way the AgoraEduHeadComponent class is initialized and configured. This class is responsible for displaying the video streams of all users in a grid layout. By default, it assigns equal weight to all users, which results in equal-sized thumbnails. However, you can override this behavior and assign different weights to different users based on their roles.

Here are the steps to implement the solution:

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.
4. Change the layout_width and layout_height attributes of RecyclerView from match_parent to wrap_content.
5. Change the layout_gravity attribute of RecyclerView from center to start.
6. Open AgoraEduHeadComponent.kt corresponding to AgoraEduHeadComponent.
7. Find the initRecyclerView method and modify it as follows:

private fun initRecyclerView() {
    val layoutManager = GridLayoutManager(context, 2)
    layoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
        override fun getSpanSize(position: Int): Int {
            // Get the user role at the given position
            val role = adapter?.getItem(position)?.role
            // If the user role is teacher, return 2 (occupy two columns)
            // Otherwise, return 1 (occupy one column)
            return if (role == EduUserRole.TEACHER) 2 else 1
        }
    }
    recyclerView.layoutManager = layoutManager
    recyclerView.adapter = adapter
}

8. Save and run your app.

Result

The result is that when you launch the student app using Agora Classroom SDK, the teacher’s video is displayed in full screen mode on the bottom of the screen, while the other students’ videos are displayed in small thumbnails on the top of the screen. This way, you can see the teacher clearly and interact with them effectively. Here is a screenshot of how it looks like:

Frequently Asked Questions (FAQs)

Here are some frequently asked questions related to this topic:

Question: How can I change the number of columns in the grid layout?

Answer: You can change the number of columns in the grid layout by modifying the first parameter of GridLayoutManager in initRecyclerView method. For example, if you want three columns instead of two, change it from 2 to 3.

Question: How can I change the order of users in the grid layout?

Answer: You can change the order of users in the grid layout by modifying the logic of adapter?.getItem(position) in getSpanSize method. For example, if you want to show students before teacher instead of after, change it from adapter?.getItem(position) to adapter?.getItem(adapter.itemCount – position – 1).

Question: How can I show only one user in full screen mode at a time?

Answer: You can show only one user in full screen mode at a time by adding a click listener to each item view in the adapter and calling adapter.notifyDataSetChanged() when the item is clicked. This will trigger the getSpanSize method to recalculate the span size for each user based on their selection status.

Disclaimer: The solution may not work for all scenarios and may require further customization. Please use it at your own risk and test it thoroughly before deploying it to production. Agora Classroom SDK is a product of Agora, Inc. and is not affiliated with this blog or its author. For more information and support, please visit the official Agora website or contact their customer service.