UI Kit quickstart

Agora UI Kit makes it easy to add Interactive Live Streaming to your app in minutes. UI Kit is an Open Source project that includes best practices for business logic, as well as a pre-built video UI. Every piece is customizable, so the developer has full control over how the video call looks and feels.

This page outlines the minimum code you need to integrate high-quality, low-latency Interactive Live Streaming functionality into your app with a customizable UI.

UI Kit simplifies the implementation of Interactive Live Streaming by handling common calling logic such as remote user status, and displaying it in a pre-built customizable UI. UI Kit contains the following components:

To use UI Kit, you implement the following steps in your app:

1. Create an instance of the viewer

   Declare and initialize an instance of the UI Kit viewer.

2. Join a channel

   When you execute the join command, your app joins the channel, publishes the local audio and video streams to Agora SD-RTN™, and handles audio and video for anyone else who joins the call in a default UI.

   Yes, you read that right. After initializing a viewer instance, you can create or join a channel with just one line of code.

To follow this procedure you must have:

• Android Studio 4.1 or higher.
• Android SDK API Level 24 or higher.
• A mobile device that runs Android 4.1 or higher.

• An Agora account and project.

• A computer with Internet access.

  Ensure that no firewall is blocking your network communication.

To integrate Interactive Live Streaming into your app using UI Kit, do the following:

1. In Android Studio, create a new Phone and Tablet Android project with an Empty Activity using Java. Set Minimum SDK to API 24.

   After creating the project, Android Studio automatically starts gradle sync. Ensure that the sync succeeds before you continue.

2. Integrate UI Kit into your project:

   In Gradle Scripts/settings.gradle (Project Settings), reference the jitpack repository by adding the following line to the repositories section inside dependencyResolutionManagement:

   
   

   _4

   repositories {

   _4

   ...

   _4

   maven { setUrl("https://jitpack.io") }

   _4

   }

   
   

3. In Gradle Scripts/build.gradle (Module: <projectname>), add the UI Kit dependency. The dependencies section should look like the following:

   
   

   _5

   dependencies {

   _5

   ...

   _5

   implementation 'com.github.agoraio-community:videouikit-android:final:<version>'

   _5

   ...

   _5

   }

   
   

   Find the Latest version of the UI Kit and replace <version> with the one you want to use. For example: 4.0.1.

4. Sync Gradle and import the UI Kit.

5. Add permissions for network and device access.

   In /app/Manifests/AndroidManifest.xml, add the following permissions after </application>:

   
   

   _12

   <uses-permission android:name="android.permission.READ_PHONE_STATE"/>

   _12

   <uses-permission android:name="android.permission.INTERNET" />

   _12

   <uses-permission android:name="android.permission.RECORD_AUDIO" />

   _12

   <uses-permission android:name="android.permission.CAMERA" />

   _12

   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

   _12

   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

   _12

   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

   _12

   _12

   <!-- The Agora SDK requires Bluetooth permissions in case users are using Bluetooth devices. -->

   _12

   <uses-permission android:name="android.permission.BLUETOOTH" />

   _12

   <!-- For Android 12 and above devices, the following permission is also required. -->

   _12

   <uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

   
   

When a user opens the app, you initialize UI Kit. When the user taps a button, the app joins or leaves a channel. When another user joins the same channel, their video and audio is rendered in the app. This simple workflow enables you to concentrate on implementing Agora features and not UX bells and whistles.

To integrate real-time video with a ready-made user interface into your app using UI Kit:

In /app/java/com.example.<projectname>/MainActivity, add the provided code sample after import android.os.Bundle;:

In /app/java/com.example.<projectname>/MainActivity, add the provided code sample after AppCompatActivity:

In /app/java/com.example.<projectname>/MainActivity, add the provided code sample after the variable declarations:

In /app/java/com.example.<projectname>/MainActivity, update onCreate to run initializeAndJoinChannel() when the app starts. The updated code should like the provided code sample:

MainActivity

_8

import android.view.View;

_8

import android.view.ViewGroup;

_8

import android.widget.Button;

_8

import android.widget.FrameLayout;

_8

import android.util.Log;

_8

_8

import io.agora.rtc2.Constants;

_8

import io.agora.agorauikit_android.*;

To ensure that you have implemented Interactive Live Streaming in your app:

1. Generate a temporary token in Agora Console

2. In your browser, navigate to the Agora web demo and update App ID, Channel, and Token with the values for your temporary token, then click Join.

3. In Android Studio, in app/java/com.example.<projectname>/MainActivity, update appId, channelName and token with the values for your temporary token.

4. Connect a physical Android device to your development device.

5. In Android Studio, click Run app. A moment later you see the project installed on your device.

6. If this is the first time you run the project, grant microphone and camera access to your app, then press the button to join a channel.

This section contains information that completes the information in this page, or points you to documentation that explains other aspects to this product.

• Now you have created an app with UI Kit, see how to Customize your app.

• See the Open Source UI Kit projects on GitHub here.

• Downloads shows you how to install Video SDK manually.

• To ensure communication security in a test or production environment, use a token server to generate token is recommended to ensure communication security, see Implement the authentication workflow.