title: Android TV Replacing ImageCardView with SimpleExoPlayerView
body: <p>I am developing and Android TV App. What I want to achieve is when user focus on a Card, the stream video start to play on the ImageCardView Area, replacing the Image with SimpleExoPlayerView. The code I worked so far only be able to play the sound of the stream but no video could be played. Here is my Presenter Class. I guess the problem is that I dont know how to make the SimpleExoPlayerView to replace the ImageCardView</p>
  <pre><code> override fun onCreateViewHolder(parent: ViewGroup): Presenter.ViewHolder {
      Log.d(TAG, &quot;onCreateViewHolder&quot;)
      mContext = parent.context
      sDefaultBackgroundColor = ContextCompat.getColor(mContext, R.color.default_background)
      sSelectedBackgroundColor = ContextCompat.getColor(
          mContext,
          R.color.selected_background
      )
      mDefaultCardImage = ContextCompat.getDrawable(mContext, R.drawable.banner)
  
      var player: SimpleExoPlayer
      var playerView: SimpleExoPlayerView
      var dataSourceFactory: DefaultDataSourceFactory
      var hlsMediaSourceFactory: HlsMediaSource.Factory
      var ProgressiveMediaSourceFactory : ProgressiveMediaSource.Factory
      var bandwithMeter = DefaultBandwidthMeter()
      var videoTrackSelectionFactory = AdaptiveTrackSelection.Factory(bandwithMeter)
      var trackSelector = DefaultTrackSelector(videoTrackSelectionFactory)
  
      player = ExoPlayerFactory.newSimpleInstance(mContext, trackSelector)
  
      val inflater = LayoutInflater.from(mContext)
      var container:ViewGroup?=parent
  
      var videoview: View = inflater.inflate(
      R.layout.exoplayer, container,
      false
      )
  
      var cardView = object : ImageCardView(mContext) {
          override fun setSelected(selected: Boolean) {
              updateCardBackgroundColor(this, selected)
              super.setSelected(selected)
          }
      }
      cardView.isFocusable = true
      cardView.isFocusableInTouchMode = true
      cardView.setOnFocusChangeListener { view, isFocused -&gt;
  
          if (isFocused) {
              player.playWhenReady = true
              playerView =videoview.findViewById(R.id.player_view)
              playerView.requestFocus()
              playerView.player = player
              playerView.hideController()
              dataSourceFactory = DefaultDataSourceFactory(mContext, &quot;exoplayer&quot;, bandwithMeter)
              hlsMediaSourceFactory = HlsMediaSource.Factory(
                  dataSourceFactory
              )
              ProgressiveMediaSourceFactory = ProgressiveMediaSource.Factory(
                  dataSourceFactory
              )
              val mediaUri = Uri.parse(&quot;http://www.somethingstreaming.m3u8&quot;)
              val mediaSource = hlsMediaSourceFactory.createMediaSource(mediaUri)
              player.prepare(mediaSource)
  
          } else {
                  player.release()
          }
      }
  
      updateCardBackgroundColor(cardView, false)
  
  
      return Presenter.ViewHolder(cardView)
  }
  
  override fun onBindViewHolder(viewHolder: Presenter.ViewHolder, item: Any) {
      val movie = item as Movie
      val cardView = viewHolder.view as ImageCardView
  
      Log.d(TAG, &quot;onBindViewHolder&quot;)
      if (movie.cardImageUrl != null) {
          cardView.titleText = movie.title
          cardView.contentText = movie.description
  
  
  
          cardView.setMainImageDimensions(CARD_WIDTH, CARD_HEIGHT)
  
          Glide.with(viewHolder.view.context)
              .load(movie.cardImageUrl)
              .centerCrop()
              .error(mDefaultCardImage)
              .into(cardView.mainImageView)
  
      }
  
  
  }
  
  override fun onUnbindViewHolder(viewHolder: Presenter.ViewHolder) {
      Log.d(TAG, &quot;onUnbindViewHolder&quot;)
      val cardView = viewHolder.view as ImageCardView
      // Remove references to images so that the garbage collector can free up memory
      cardView.badgeImage = null
      cardView.mainImage = null
  }
  
  private fun updateCardBackgroundColor(view: ImageCardView, selected: Boolean) {
      val color = if (selected) sSelectedBackgroundColor else sDefaultBackgroundColor
      // Both background colors should be set because the view's background is temporarily visible
      // during animations.
      view.setBackgroundColor(color)
      view.setInfoAreaBackgroundColor(color)
  }
  
  companion object {
      private val TAG = &quot;CardPresenter&quot;
      private val CARD_WIDTH = 285
      private val CARD_HEIGHT = 130
  }
  }
  </code></pre>
  <p>and this is my exoplayer.xml</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;RelativeLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      android:layout_width=&quot;match_parent&quot;
      android:layout_height=&quot;match_parent&quot;&gt;
  &lt;com.google.android.exoplayer2.ui.SimpleExoPlayerView
          android:id=&quot;@+id/player_view&quot;
          android:layout_width=&quot;match_parent&quot;
          android:layout_height=&quot;wrap_content&quot;
  
          android:clickable=&quot;true&quot;
  
          android:focusable=&quot;true&quot;/&gt;
  </code></pre>
  
  <p>My CardPresenter Class is modified from
  <a href="https://github.com/android/tv-samples/blob/main/ClassicsKotlin/app/src/main/java/com/android/tv/classics/presenters/TvMediaMetadataPresenter.kt" rel="nofollow noreferrer">https://github.com/android/tv-samples/blob/main/ClassicsKotlin/app/src/main/java/com/android/tv/classics/presenters/TvMediaMetadataPresenter.kt</a></p>