How To Build Online Conference App With Android UIKit

In a virtual, online meeting called an online video conference, two or more people can communicate in real time over an audio and video chat. The culture of remote labor has spread due to the epidemic. Meeting online has become increasingly common in modern society as a result. Did you know that creating your own conferencing application is simple?

Here is a brief guide on how to quickly build an Android online conferencing application.

Introduction to Android Video Conferencing Kit

Android Video Conference Kit is a prebuilt feature-rich component, which enables you to add video conferences to your app in minutes.

Additionally, since the business logic is integrated with the user interface, you can modify UI components to add or remove features.

The logic and user interface of the video conferencing capability are completely handled by the Android Video Conference Kit, as depicted in the picture. Include:

Multi-user audio/video conferences
Adaptive video layouts
Real-time sound waves display
Customizable UI styles
Device management
Extendable top/bottom menu bar
Customizable conference title
Member List
Conference join/leave notifications

You only need to implement business-related logic. For example:

User login registration
Conference List Management
User permission, etc.

Preparation

A ZEGOCLOUD developer account–Sign up
Android Studio 2020.3.1 or later
Devices with Android 5.0 or later
Basic understanding of Android development

Implement online conference

1. Create a project

Open your Android Studio, click New Project- Empty Acticvity, then change the Project Name, package name, project location, language and min SDK if you need。

2. Create a new Empty Activity

create a new Empty Activity called ConferenceActivity, and add a join online conference button in MainActivity to navigate to it.

findViewById(R.id.button).setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this,ConferenceActivity.class);
        startActivity(intent);
    }
});

3. Add jitpack

If your Android Gradle Plugin is 7.1.0 or later: enter your project’s root directory, open the settings.gradle file to add the jitpack to dependencyResolutionManagement -> repositories like this:

dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
    google()
    mavenCentral()
    maven { url 'https://www.jitpack.io' } // <- Add this line.
}
}

If your Android Gradle Plugin is earlier than 7.1.0: enter your project’s root directory, open the build.gradle file to add the jitpack to allprojects -> repositories like this:

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url "https://jitpack.io" }  // <- Add this line.
    }
}

4. Modify app-level

Modify your app-level on build.gradle file.

dependencies {
    ...
    implementation 'com.github.ZEGOCLOUD:zego_uikit_prebuilt_video_conference_android:latest.release'
}

5. Add prebuilt UI to the project.

Go to ZEGOCLOUD Admin Console, get the appID and appSign of your project.
Specify the userID and userName for connecting the Video Conference Kit service.
Create a conferenceID that represents the conference you want to start.
add a method in ConferenceActivity and call it in the ConferenceActivity‘s onCreate method.

public class ConferenceActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_conference);

        addFragment();
    }

    public void addFragment(){
        long appID = yourAppID; // your appID, get from ZEGOCLOUD console
        String appSign = yourAppSign; //your appSign, get from ZEGOCLOUD console

        String userID =  ;  // your userID
        String userName =  ;  // your userName
        String conferenceID =  // conferenceID

        ZegoUIKitPrebuiltVideoConferenceConfig config = new ZegoUIKitPrebuiltVideoConferenceConfig();
        ZegoUIKitPrebuiltVideoConferenceFragment fragment = ZegoUIKitPrebuiltVideoConferenceFragment.newInstance(
            appID,appSign,userID,userName,conferenceID,config);
        getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,fragment).commitNow();
    }
}

6. Assign id for the root view

Modify the auto-created activity_conference.xml file, assign a id fragment_container for the root view:

        <?xml version="1.0" encoding="utf-8"?>
        <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragment_container"    
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        </androidx.constraintlayout.widget.ConstraintLayout>

Custom Prebuilt UI

You can custom prebuilt UI by modifying the ZegoUIKitPrebuiltVideoConferenceConfig :

ZegoUIKitPrebuiltVideoConferenceConfig config = new ZegoUIKitPrebuiltVideoConferenceConfig();
config.turnOnCameraWhenJoining = false;
config.audioVideoViewConfig.useVideoViewAspectFill = true;
config.bottomMenuBarConfig.buttons = Arrays.asList(
    ZegoMenuBarButtonName.TOGGLE_CAMERA_BUTTON,
    ZegoMenuBarButtonName.LEAVE_BUTTON,
    ZegoMenuBarButtonName.CHAT_BUTTON
);
config.topMenuBarConfig.isVisible = false;
config.inRoomNotificationViewConfig.notifyUserLeave = false;
config.memberListConfig.showCameraState = false;

Conclusion

Even though video conferencing is a competitive and rapidly changing market, there is still a lack of highly secured and customizable video conferencing solutions like Zoom. That’s why many businesses consider developing software tailored to their industry and customers.

ZEGOCLOUD Video Conference Kit provides you with a convenient video conference API, allowing you to quickly build your own online conference application.

Take action now, You can download the sample demo source code of this article, or consult us 24h technical support.

Blog Post