Wednesday, 29 August 2018

How to show and Modified progress bar on Exo-Player in android

Example of Exoplayer ,with ProgressBar on top of the video when any error will come. Following are the steps:-
1. Open Android Studio and create a new project and open layout main_activity.xml and write following code:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"    
xmlns:app="http://schemas.android.com/apk/res-auto"    
xmlns:tools="http://schemas.android.com/tools"    
android:layout_width="match_parent"    
android:layout_height="match_parent"    
tools:context=".MainActivity">

    <TextView        
android:id="@+id/tvWatchVideo"        
android:layout_width="wrap_content"        
android:layout_height="wrap_content"        
android:text="Watch Video"        
app:layout_constraintBottom_toBottomOf="parent"        
app:layout_constraintLeft_toLeftOf="parent"        
app:layout_constraintRight_toRightOf="parent"        
app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>


2. Open MainActivity.java and write following code:-
public class MainActivity extends AppCompatActivity {
    private TextView tvWatchVideo;   
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tvWatchVideo = (TextView)findViewById(R.id.tvWatchVideo);
        tvWatchVideo.setOnClickListener(new View.OnClickListener() { 
public void onClick(View view) {
                startActivity(new Intent(MainActivity.this,VideoPlayActivity.class));
            }
        });
    }
}

3. Open app gradle and add exo player library like following:-
dependencies {
    // exo player   
 implementation 'com.google.android.exoplayer:exoplayer:2.7.0'
}
4. Create a separate class  with any name i am giving VideoPlayActivity.java code will be following:-
public class VideoPlayActivity extends AppCompatActivity {
    String videoURL = "http://blueappsoftware.in/layout_design_android_blog.mp4";
    private SimpleExoPlayerView simpleExoPlayerView;
    private SimpleExoPlayer exoPlayer;
    private ProgressBar progressBar;
    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.videoplay_activity);
        exoPlayerControl();
    }

    private void exoPlayerControl() {
        simpleExoPlayerView = (SimpleExoPlayerView)findViewById(R.id.exoPlayerview);
        progressBar = (ProgressBar) findViewById(R.id.progress_bar);
        try {
            BandwidthMeter bandwidthMeter = new DefaultBandwidthMeter();
            TrackSelector trackSelector = new DefaultTrackSelector(new AdaptiveTrackSelection.Factory(bandwidthMeter));
            exoPlayer = ExoPlayerFactory.newSimpleInstance(this, trackSelector);
            Uri videoUrl = Uri.parse(videoURL);
            DefaultHttpDataSourceFactory defaultHttpDataSource = new DefaultHttpDataSourceFactory("exoplayer");
            ExtractorsFactory factory = new DefaultExtractorsFactory();
            MediaSource mediaSource = new ExtractorMediaSource(videoUrl,defaultHttpDataSource,factory,null,null);
            simpleExoPlayerView.setPlayer(exoPlayer);
            exoPlayer.prepare(mediaSource);
            exoPlayer.setPlayWhenReady(true);

        }catch (Exception e){
            e.printStackTrace();
        }

        exoPlayer.addListener(new ExoPlayer.EventListener() {
             public void onTimelineChanged(Timeline timeline, Object manifest, int reason) {

            }

            
public void onTracksChanged(TrackGroupArray trackGroups, TrackSelectionArray trackSelections) {

            }
         
public void onLoadingChanged(boolean isLoading) {

            }          
public void onPlayerStateChanged(boolean playWhenReady, int playbackState) {
                if (playbackState == ExoPlayer.STATE_BUFFERING){
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.INVISIBLE);
                }

            }          
public void onRepeatModeChanged(int repeatMode) {

            }
           
public void onShuffleModeEnabledChanged(boolean shuffleModeEnabled) {

            }          
public void onPlayerError(ExoPlaybackException error) {
                progressBar.setVisibility(View.VISIBLE);
                exoPlayer.stop();
                exoPlayer.setPlayWhenReady(true);

            }          
public void onPositionDiscontinuity(int reason) {

            }          
public void onPlaybackParametersChanged(PlaybackParameters playbackParameters) {

            }
  
public void onSeekProcessed() {

            }
        });

    }
}
5. videoplay_activity.xml will be looks like following:--
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"    
android:layout_width="match_parent"   
android:layout_height="match_parent">
    <com.google.android.exoplayer2.ui.SimpleExoPlayerView        
android:layout_width="match_parent"        
android:id="@+id/exoPlayerview"        
android:layout_height="match_parent">
    </com.google.android.exoplayer2.ui.SimpleExoPlayerView>
    <ProgressBar        
android:id="@+id/progress_bar"        
android:layout_width="48dp"        
android:layout_height="48dp"        
android:layout_centerInParent="true"        
android:visibility="visible"       
android:layout_gravity="center"/>

</RelativeLayout>
6. Output wil be:-


To customise the video control we have to add two xml with the same name in our layout folder like following:-

app - res - layout here add the file .
1. exo_playback_control_view.xml
Code will be like:-
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2016 The Android Open Source Project    
 Licensed under the Apache License, Version 2.0 (the "License");    
 you may not use this file except in compliance with the License.    
 You may obtain a copy of the License at         
 http://www.apache.org/licenses/LICENSE-2.0    
 Unless required by applicable law or agreed to in writing, software    
 distributed under the License is distributed on an "AS IS" BASIS,     
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.    
 See the License for the specific language governing permissions and     
limitations under the License.-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
android:layout_width="match_parent"   
 android:layout_height="wrap_content"    
android:layout_gravity="bottom"   
android:layoutDirection="ltr"    
android:background="#CC000000"   
 android:orientation="vertical">

    <LinearLayout       
 android:layout_width="match_parent"      
 android:layout_height="wrap_content"      
 android:gravity="center"       
 android:paddingTop="4dp"       
 android:orientation="horizontal">

        <ImageButton android:id="@id/exo_prev"           
 style="@style/ExoMediaButton.Previous"/>

        <ImageButton android:id="@id/exo_rew"           
 style="@style/ExoMediaButton.Rewind"/>

        <ImageButton android:id="@id/exo_shuffle"          
  style="@style/ExoMediaButton.Shuffle"/>

        <ImageButton android:id="@id/exo_repeat_toggle"           
 style="@style/ExoMediaButton"/>

        <ImageButton android:id="@id/exo_play"           
 style="@style/ExoMediaButton.Play"/>

        <ImageButton android:id="@id/exo_pause"            
style="@style/ExoMediaButton.Pause"/>

        <ImageButton android:id="@id/exo_ffwd"           
 style="@style/ExoMediaButton.FastForward"/>

        <ImageButton android:id="@id/exo_next"          
  style="@style/ExoMediaButton.Next"/>

    </LinearLayout>

    <LinearLayout       
 android:layout_width="match_parent"     
   android:layout_height="wrap_content"       
 android:layout_marginTop="4dp"       
 android:gravity="center_vertical"       
 android:orientation="horizontal">

        <TextView android:id="@id/exo_position"           
 android:layout_width="wrap_content"           
 android:layout_height="wrap_content"           
 android:textSize="14sp"            
android:textStyle="bold"           
 android:paddingLeft="4dp"           
 android:paddingRight="4dp"          
  android:includeFontPadding="false"           
 android:textColor="#FFBEBEBE"/>

        <com.google.android.exoplayer2.ui.DefaultTimeBar           
 android:id="@id/exo_progress"          
  android:layout_width="0dp"           
 android:layout_weight="1"           
 android:layout_height="26dp"/>

        <TextView android:id="@id/exo_duration"          
  android:layout_width="wrap_content"            
android:layout_height="wrap_content"           
 android:textSize="14sp"           
 android:textStyle="bold"           
 android:paddingLeft="4dp"           
 android:paddingRight="4dp"           
 android:includeFontPadding="false"           
 android:textColor="#FFBEBEBE"/>

    </LinearLayout>

</LinearLayout>

2. exo_simple_player_view.xml
Code will be like:-
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2016 The Android Open Source Project     
Licensed under the Apache License, Version 2.0 (the "License");     
you may not use this file except in compliance with the License.     
You may obtain a copy of the License at         
 http://www.apache.org/licenses/LICENSE-2.0     
Unless required by applicable law or agreed to in writing, software     
distributed under the License is distributed on an "AS IS" BASIS,    
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     
See the License for the specific language governing permissions and     
limitations under the License.-->
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<com.google.android.exoplayer2.ui.AspectRatioFrameLayout        
android:id="@id/exo_content_frame"        
android:layout_width="match_parent"        
android:layout_height="match_parent"        
android:layout_gravity="center">
  <!-- Video surface will be inserted as the first child of the content frame. -->
 <View            
android:id="@id/exo_shutter"            
android:layout_width="match_parent"            
android:layout_height="match_parent"            
android:background="@android:color/black" />

 <ImageView            
android:layout_width="match_parent"            
android:layout_height="match_parent"            
android:scaleType="fitXY" />

 <com.google.android.exoplayer2.ui.SubtitleView            
android:id="@id/exo_subtitles"          
  android:layout_width="match_parent"          
  android:layout_height="match_parent" />

    <ProgressBar         
   android:id="@+id/exo_buffering"         
   android:layout_width="wrap_content"          
  android:layout_height="wrap_content"           
 android:layout_gravity="center"           
 android:indeterminate="true" />

        <TextView           
 android:id="@+id/exo_error_message"          
  android:layout_width="match_parent"           
 android:layout_height="match_parent"          
  android:layout_gravity="center"           
 android:gravity="center"           
 android:padding="16dp" />

    </com.google.android.exoplayer2.ui.AspectRatioFrameLayout>

    <FrameLayout        
android:id="@id/exo_overlay"        
android:layout_width="match_parent"        
android:layout_height="match_parent" />

    <View      
  android:id="@id/exo_controller_placeholder"       
 android:layout_width="match_parent"       
 android:layout_height="match_parent" />

</merge>


No comments:

Post a Comment