{"id":6063,"date":"2022-02-25T21:53:39","date_gmt":"2022-02-25T13:53:39","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=6063"},"modified":"2025-04-05T02:23:28","modified_gmt":"2025-04-04T18:23:28","slug":"android-video-ui-kit","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video\/solutions\/video-ui-kit\/android-video-ui-kit\/","title":{"rendered":"Android Video UIKit"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>Android Video UIKit helps you develop a Video UI quickly without having to read through vast Android SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for your native App.<\/p><\/blockquote>\n\n\n\n<p class=\"has-text-align-center\"><\/p><div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link no-border-radius\" href=\"\/developer\/wp-content\/uploads\/ui-kit-sdk\/android\/Enx_UIKit_Android-2.1.3.aar.zip\">Download Android UIKit v2.1.3<\/a><br>Released: September 9, 2024<\/div><p><\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4>Table of Contents<\/h4>\n\n\n\n<ul><li><a href=\"#overview\">Overview<\/a><\/li><li><a href=\"#whats-new\">What&#8217;s New<\/a><ul><li><a href=\"#v2-1-1\">v2.1.1<\/a> <\/li><li><a href=\"#whats-new-v1-2-2\">v1.2.2<\/a> <\/li><li><a href=\"#whats-new-v1-2\">v1.2<\/a> <\/li><\/ul><\/li><li><a href=\"#how-to-use\">How to use<\/a><\/li><li><a href=\"#implementation\">Implementation<\/a><\/li><li><a href=\"#features\">Features<\/a><\/li><\/ul>\n\n\n\n<a name=\"overview\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Overview<\/h2>\n\n\n\n<p>Android Video UIKit simplifies the integration of video capabilities into your Android native app. This powerful framework for video application development on Android devices, including phones and tablets, offers extensive customization options to meet various requirements.<\/p>\n\n\n\n<p>You code less, only 3 lines of Code does all the magic of getting a video communication done. Thus, using UIKit helps you get a seamless Video UI with all Device Support in almost 99% reduced effort and time.<\/p>\n\n\n\n<p>UIKit freamwork is a 100% native layout and devices specific layout. It has auto adjustment of UI based on device and its orientation.<\/p>\n\n\n\n<a name=\"whats-new\"><\/a>\n\n\n\n<a name=\"whats-new-v1-2-2\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>What&#8217;s new?<\/h2>\n\n\n\n<p>This section provides information about new features and improvements to existing features shipped in the Android UI kit releases.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a name=\"whats-new-v2-1-1\"><\/a>\n\n\n\n<h3>What&#8217;s New in Android UI Kit v2.1.1?<\/h3>\n\n\n\n<p>The Android UI Kit v2.1.1 introduces additional configuration option like Joining Button name, Default Camera to initiate, Showing Camera Preview before joining, joining with Camera or Microphone muted, joining with RTMP Streaming endpoints etc.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a name=\"whats-new-v1-2-2\"><\/a>\n\n\n\n<h3>What&#8217;s New in Android UIKit v1.2.2?<\/h3>\n\n\n\n<p>Android UIKit v1.2.2 comes with a confirmation screen before joining the room. In this screen, user chooses if he wants to go ahead with a Video Call or with a Audio-Only call.  For Video Call, use chooses if he wishes to enter with Microphone or Camera muted.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a name=\"whats-new-v1-2\"><\/a>\n\n\n\n<h3>What&#8217;s New in Android UIKit v1.2?<\/h3>\n\n\n\n<ul><li><strong>Works with Low Code<\/strong>: Android UI Kit now works with your Low Code settings configured using Visual Builder through Portal. <code>EnxVideoView()<\/code> is modified to accept extra key for Low Code URL. <\/li><li><strong>File Share<\/strong>: Users can now share files among everyone or private with other specific users in-session.<\/li><li><strong>Annotation<\/strong>: User can now annotate on stream and remote users can view annotated streams live.<\/li><li><strong>Participant List<\/strong>: Configuration options for Participant List. <\/li><li><strong>Screen Share<\/strong>: Users can now start screen share and view shared screens by others.<\/li><li><strong>Canvas Streaming<\/strong>: Canvas Object Streaming features is also available now. <\/li><\/ul>\n\n\n\n<a name=\"how-to-use\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>How to use Android Video UIKit?<\/h2>\n\n\n\n<p>Follow these steps:<\/p>\n\n\n\n<ul><li><strong>Step#1:<\/strong> Download latest Android SDK <a href=\"\/developer\/video-api\/client-api\/android-toolkit\/\">(Android Archive Library<\/a>)<\/li><li><strong>Step#2:<\/strong> Download latest Android UIKit (<a href=\"\/developer\/wp-content\/uploads\/ui-kit-sdk\/android\/Enx_UIKit_Android-2.1.3.aar.zip\">Android Archive Library<\/a><a href=\"\/developer\/video-api\/client-api\/android-toolkit\/\">)<\/a><\/li><li><strong>Step#3:<\/strong> Add downloaded AAR files to the <code>lib <\/code>folder.<\/li><li><strong>Step#4:<\/strong> Go to your Project\u2019s root directory and edit <code>build.gradle<\/code> by placing the following code in the <code>allprojects.repositories<\/code> section:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">allprojects{ \nrepositories { \n\t\tflatDir { \n\t\t\tdirs 'libs' \n\t\t} \n\t} \n}<\/pre>\n\n\n\n<ul><li><strong>Step#5:<\/strong> Go to your application level <code>build.gradle<\/code> file and add the following code in the dependencies section:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: []) \nimplementation('io.socket:socket.io-client:1.0.1') { \n\texclude group: 'org.json', module: 'json' \n} \nimplementation 'org.webrtc:google-webrtc:1.0.32006' \n<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Define Device Permissions<\/h3>\n\n\n\n<p>Define permissions in <code>AndroidMainfest.xml<\/code> as shown below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;uses-permission android:name=\"android.permission.CAMERA\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.RECORD_AUDIO\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.INTERNET\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.BLUETOOTH\" android:maxSdkVersion=\"30\"\/&gt; \n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_ADMIN\" android:maxSdkVersion=\"30\"\/&gt; \n&lt;uses-permission android:name=\"android.permission.WAKE_LOCK\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_SCAN\"android:usesPermissionFlags=\"neverForLocation\"\/&gt; \n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_ADVERTISE\" \/&gt; \n&lt;uses-permission android:name=\"android.permission.BLUETOOTH_CONNECT\" \/&gt; <\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a name=\"implementation\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Implementation<\/h2>\n\n\n\n<h3>Prerequisite<\/h3>\n\n\n\n<p>To use the Enx_UIKit_Android Framework user must have the following:<\/p>\n\n\n\n<ul><li><a href=\"\/developer\/video-api\/server-api\/rooms-route\/#create-token\">A valid Token<\/a> to join the <a href=\"\/developer\/video-api\/server-api\/rooms-route\/#create-room\">room<\/a>.<\/li><li>Camera Permission<\/li><li>Mic Permission<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3> Code a little<\/h3>\n\n\n\n<ul><li><strong>Step#1: <\/strong>Go to your Activity and import the packages shown below:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">import com.enablex.enxuikit_android.observer.EnxVideoStateObserver \nimport com.enablex.enxuikit_android.view.EnxVideoView <\/pre>\n\n\n\n<ul><li><strong>Step#2:<\/strong> Initialize the <code>EnxVideoView <\/code>class and then add the reference of <code>EnxVideoView <\/code>to your layout as shown below:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ You need to get Token to get connected\n\/\/ Refer:https:\/\/api.smartflomeet.ttns.in\/\/developer\/video-api\/server-api\/rooms-route\/#create-token\n\n\/\/ Initialize EnxVideoView\nenxVideoView = EnxVideoView(this,token,this, \"Low Code Embed URL\")\n\/\/ Low Code Embed URL is optional, in case you want to import settings.\n\n\/\/ Set Layout Parameters\nval rlp = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT)\n\n\/\/ Add VideoView to your Layout\nthis.addContentView(enxVideoView, rlp) <\/pre>\n\n\n\n<ul><li><strong>Step#3:<\/strong> Handle Orientation<\/li><\/ul>\n\n\n\n<p>To handle Orientation please follow below 2 steps:<\/p>\n\n\n\n<ul><li>Add the property given below to your activity inside AndroidMainfest.xml file:<\/li><\/ul>\n\n\n\n<p><code>android:configChanges=\"orientation|screenSize|keyboardHidden\"<\/code><\/p>\n\n\n\n<ul><li>Overide <code>onConfigurationchanged <\/code>function and call below function<\/li><\/ul>\n\n\n\n<p><code>enxVideoView?.configurationChanged(newConfig)<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">override fun onConfigurationChanged(newConfig: Configuration) { \n    super.onConfigurationChanged(newConfig) \n    enxVideoView?.configurationChanged(newConfig) \n} <\/pre>\n\n\n\n<ul><li><strong>Step#4:<\/strong> Handle Back Button<\/li><\/ul>\n\n\n\n<p>To handle the back button please follow step:<\/p>\n\n\n\n<ul><li>Overide onBackPressed function and call below function &nbsp;&nbsp;&nbsp;<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">override fun onBackPressed() {\n    enxVideoView?.backPressed() \n}<\/pre>\n\n\n\n<ul><li><strong>Step#5:<\/strong> Customize Bottom Bar<\/li><\/ul>\n\n\n\n<p>You can design the Bottom Bar according to you needs and you can set the desired sequence by passing a list of <code>EnxButton <\/code>to <code>configureBottomOptionList <\/code>function. While creating your own button use the <code>setImage <\/code>function and pass two images (first image for normal state and second image for selected state) except the disconnect button as it takes a single parameter for the image. For more detail, please refer to below code snippet:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">val setting = EnxSetting.getInstance(this) \n\n\/\/ Enumerated values to use for BottomOption are\n\/\/ AUDIO, VIDEO, SWITCH_CAMERA, SWITCH_AUDIO, GROUP_CHAT, DISCONNECT \n\nval audioButton = EnxButton(this,EnxSetting.BottomOption.AUDIO.tag) \naudioButton.setImage(R.drawable.audio_on,R.drawable.audio_off) \n\nval chatButton = EnxButton(this,EnxSetting.BottomOption.GROUP_CHAT.tag) \nchatButton.setImage(R.drawable.group_chat,R.drawable.group_chat_noti) \n\nval disconnectButton = EnxButton(this,EnxSetting.BottomOption.DISCONNECT.tag) \ndisconnectButton.setImage(R.drawable.end_call_new) \n \nsetting.configureBottomOptionList(listOf&lt;EnxButton&gt;(videoButton, cameraSwitch, chatButton, audioButton, disconnectButton)) <\/pre>\n\n\n\n<ul><li><strong>Steps#6<\/strong> Customize Top Bar<\/li><\/ul>\n\n\n\n<p>You can design the Top Bar according to your needs and they can set the desired sequence by passing a list of <code>EnxButton <\/code>to <code>configureTopOptionList <\/code>function. For example, while creating your own button for REQUEST_FLOOR use the setImage function and pass two images (first image for normal state and second image for selected state). But for USER_LIST and MENU <code>setImage <\/code>function takes a single parameter. For details, please follow the below code snippet:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">val setting = EnxSetting.getInstance(this)\n\n\/\/ Enumerated values to use for TopOption are\n\/\/ USER_LIST, MENU, REQUEST_FLOOR \n\nval userList = EnxButton(this,EnxSetting.TopOption.USER_LIST.tag) \nuserList.setImage(R.drawable.participant_icon) \n\nval webinarButton = EnxButton(this,EnxSetting.TopOption.REQUEST_FLOOR.tag) \nwebinarButton?.setImage(R.drawable.notification_icon, R.drawable.notification_icon_selected) \n\nval menu = EnxButton(this,EnxSetting.TopOption.MENU.tag) \nmenu.setImage(R.drawable.ic_more_vert)  \n\n \nsetting.configureTopOptionList(listOf&lt;EnxButton&gt;(menu,userList, webinarButton)) <\/pre>\n\n\n\n<ul><li><strong>Steps#7<\/strong> Set Background Color of Bottom Bar<\/li><\/ul>\n\n\n\n<p>You can update the background color of Bottom Bar by passing resource id of the color to <code>updateBottomOptionView <\/code>function.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">val setting = EnxSetting.getInstance(this) \nsetting.updateBottomOptionView(R.color.white) <\/pre>\n\n\n\n<ul><li><strong>Steps#8<\/strong> Set Background Color of Top Bar<\/li><\/ul>\n\n\n\n<p>You can update the background color of Top Bar by passing resource id of the color to <code>updateTopOptionView <\/code>function.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">val setting = EnxSetting.getInstance(this) \nsetting.updateTopOptionView(R.color.white) <\/pre>\n\n\n\n<ul><li><strong>Steps#9<\/strong> Customize Participant List Options<\/li><\/ul>\n\n\n\n<p>You can add additional action against each participant in the participant list.  <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">val setting = EnxSetting.getInstance(this) \n\nval audioButton = EnxButton(this,EnxSetting.PartcipantList.AUDIO.tag) \naudioButton.setImage(R.drawable.audio_on,R.drawable.audio_off) \n \nval videoButton = EnxButton(this,EnxSetting.PartcipantList.VIDEO.tag) \nvideoButton.setImage(R.drawable.video_on,R.drawable.video_off) \n \nval chatButton = EnxButton(this,EnxSetting.PartcipantList.CHAT.tag) \nchatButton.setImage(R.drawable.chat_icon) \n \nval dissButton = EnxButton(this,EnxSetting.PartcipantList.DISCONNECT.tag) \ndissButton.setImage(R.drawable.end_call_new) \n\n setting.configureParticipantList(listOf&lt;EnxButton&gt;(audioButton,videoButton,chatButton, dissButton)) \n\n\/\/ Following Enumerated data may also be used to creation action buttons\n\/\/ in Participatn list, viz. AUDIO, VIDEO, CHAT, DISCONNECT <\/pre>\n\n\n\n<ul><li><strong>Steps#10<\/strong> Handle Disconnection and Correction Error<\/li><\/ul>\n\n\n\n<p>Here you need to create an instance of <code>EnxVideoView <\/code>class which is the subclass of <code>RelativeLayout<\/code>.&nbsp;You also need to pass a reference of Activity, a valid Token<strong>, <\/strong>and Observer to receive callback.&nbsp;<\/p>\n\n\n\n<p>There are 2 callbacks for you to clear instance or for any other UI\/UX implementation. You need to override these functions below:<\/p>\n\n\n\n<ul><li><em>For Disconnection<\/em>: You get notified when the user gets disconnected from the Video Room. The JSON you receive shows reason for disconnection.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">override fun disconnect(jsonObject: JSONObject?) <\/pre>\n\n\n\n<ul><li><em>For Connection Error<\/em>: You get notified if the user doesn&#8217;t get connected to the Video Room. The JSON you receive shows related error.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">override fun connectError(jsonObject: JSONObject?) <\/pre>\n\n\n\n<a name=\"features\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Features<\/h2>\n\n\n\n<p><strong>Features for group mode<\/strong><\/p>\n\n\n\n<ul><li><strong>For Participants and Moderators<\/strong><ul><li>Mute Self-Audio<\/li><li>Mute Self-Video<\/li><li>Switch Camera<\/li><li>Switch Audio Device<\/li><li>Group and Private Chat<\/li><li>Participant List<\/li><li>Switch Layout<\/li><li>Disconnect Call<\/li><li>Raise Hand to Join the Floor (only for webinar mode)<\/li><\/ul><\/li><li><strong>For Moderators only<\/strong><ul><li>Record Session<\/li><li>Mute Room<\/li><li>Mute Participant-Audio<\/li><li>Mute Participant-Video<\/li><li>Drop Participant from room<\/li><li>Allow\/deny Participant&#8217;s Raised Hand Request (only for webinar mode)<\/li><li>Revoke Allowed Raised Hand Request (only for webinar mode)<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Android Video UIKit helps you develop a Video UI quickly without having to read through vast Android SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for your native App. Download Android UIKit v2.1.3Released: September 9, 2024 Table of Contents Overview What&#8217;s New v2.1.1 v1.2.2 v1.2 How to use Implementation Features Overview Android Video UIKit simplifies&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":6062,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"Android Video UIKit helps you develop a Video UI quickly without having to read through vast Android SDK Documentation and handling all complexities that comes along the development process. It provides easy way to get started with a Video UI for your native App. Download Android UIKit v2.1.3Released: September 9, 2024 Table of Contents Overview&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6063"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=6063"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6063\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6062"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=6063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}