Android Exoplayer using Kotlin
ExoPlayer View is one of the most used UI components in media streaming applications for displaying video files within android applications. It is similar to that of Video View, but the quality of the video player in Exoplayer compared to video view is better. In this article, we will look at How to use Exoplayer View in android using Kotlin.
Note: If you are looking to implement ExoPlayer View in Android using Java. Check out the following article: ExoPlayer View in Android using Java
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Add dependency to the build.gradle(Module:app)
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
// dependency for exoplayer implementation 'com.google.android.exoplayer:exoplayer:r2.4.0' // for core support in exoplayer. implementation 'com.google.android.exoplayer:exoplayer-core:r2.4.0' // for adding dash support in our exoplayer. implementation 'com.google.android.exoplayer:exoplayer-dash:r2.4.0' // for adding hls support in exoplayer. implementation 'com.google.android.exoplayer:exoplayer-hls:r2.4.0' // for smooth streaming of video in our exoplayer. implementation 'com.google.android.exoplayer:exoplayer-smoothstreaming:r2.4.0' // for generating default ui of exoplayer implementation 'com.google.android.exoplayer:exoplayer-ui:r2.4.0'
After adding this dependency simply sync your project to install them.
Step 3: Add internet permission to your Manifest file
Navigate to the app > manifest folder and write down the following permissions to it.
XML
<!–Internet permission and network access permission–> < uses-permission android:name=”android.permission.INTERNET”/> < uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE”/> |
Step 4: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:id = "@+id/container" android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" tools:context = ".MainActivity" > <!--on below line we are creating a text for heading of our app--> < TextView android:id = "@+id/idTVHeading" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_margin = "8dp" android:gravity = "center" android:padding = "4dp" android:text = "Exo Player View" android:textAlignment = "center" android:textColor = "@color/purple_200" android:textSize = "18sp" android:textStyle = "bold" /> <!--Widget for exoplayer view--> < com.google.android.exoplayer2.ui.SimpleExoPlayerView android:id = "@+id/idExoPlayerVIew" android:layout_width = "match_parent" android:layout_height = "500dp" android:layout_below = "@id/idTVHeading" android:layout_centerInParent = "true" /> </ RelativeLayout > |
Step 5: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
package com.gtappdevelopers.kotlingfgproject import android.net.Uri import android.os.Bundle import androidx.appcompat.app.AppCompatActivity import com.google.android.exoplayer2.ExoPlayerFactory import com.google.android.exoplayer2.SimpleExoPlayer import com.google.android.exoplayer2.extractor.DefaultExtractorsFactory import com.google.android.exoplayer2.extractor.ExtractorsFactory import com.google.android.exoplayer2.source.ExtractorMediaSource import com.google.android.exoplayer2.source.MediaSource import com.google.android.exoplayer2.trackselection.AdaptiveTrackSelection import com.google.android.exoplayer2.trackselection.DefaultTrackSelector import com.google.android.exoplayer2.trackselection.TrackSelector import com.google.android.exoplayer2.ui.SimpleExoPlayerView import com.google.android.exoplayer2.upstream.BandwidthMeter import com.google.android.exoplayer2.upstream.DefaultBandwidthMeter import com.google.android.exoplayer2.upstream.DefaultHttpDataSourceFactory class MainActivity : AppCompatActivity() { // on below line we are creating a variable // for our exo player view . lateinit var exoPlayerView: SimpleExoPlayerView // on below line we are creating a // variable for exo player lateinit var exoPlayer: SimpleExoPlayer // on below line we are creating a string variable for our video url var videoURL = "https://media.w3wiki.net/wp-content/uploads/20201217163353/Screenrecorder-2020-12-17-16-32-03-350.mp4" override fun onCreate(savedInstanceState: Bundle?) { super .onCreate(savedInstanceState) setContentView(R.layout.activity_main) // on below line we are initializing our all variables. exoPlayerView = findViewById(R.id.idExoPlayerVIew) try { // bandwidthmeter is used for // getting default bandwidth val bandwidthMeter: BandwidthMeter = DefaultBandwidthMeter() // track selector is used to navigate between // video using a default seekbar. val trackSelector: TrackSelector = DefaultTrackSelector(AdaptiveTrackSelection.Factory(bandwidthMeter)) // we are adding our track selector to exoplayer. exoPlayer = ExoPlayerFactory.newSimpleInstance( this , trackSelector) // we are parsing a video url // and parsing its video uri. val videoURI: Uri = Uri.parse(videoURL) // we are creating a variable for datasource factory // and setting its user agent as 'exoplayer_view' val dataSourceFactory: DefaultHttpDataSourceFactory = DefaultHttpDataSourceFactory( "Exoplayer_video" ) // we are creating a variable for extractor factory // and setting it to default extractor factory. val extractorsFactory: ExtractorsFactory = DefaultExtractorsFactory(); // we are creating a media source with above variables // and passing our event handler as null, val mediaSourse: MediaSource = ExtractorMediaSource(videoURI, dataSourceFactory, extractorsFactory, null , null ) // inside our exoplayer view // we are setting our player exoPlayerView.player = exoPlayer // we are preparing our exoplayer // with media source. exoPlayer.prepare(mediaSourse) // we are setting our exoplayer // when it is ready. exoPlayer.playWhenReady = true } catch (e: Exception) { // on below line we // are handling exception e.printStackTrace() } } } |
Now run your application to see the output of it.
Output:
Contact Us