title: Use only ExoPlayer's controller for playing audio in Android without the black preview
body: <p>I want to play a list of audio files in android. As you might know, when you have video files, using the <code>com.google.android.exoplayer2.ui.PlayerView</code> does make sense because you can see the content of the video on the screen while you have the controller for play/pause etc. on the bottom.
  But with audio files, you have a black screen if you let play the audio files.
  What I need is to use only the controller without the black screen.</p>
  <p>Is there a way to do that ?</p>
  <p>1st <strong>EDIT</strong>:
  In the documentation, I came across <code>PlaybackControlView</code> and <code>PlayerControlView</code>. Can I use them for my situation ? If yes, which one to use ?</p>
  <p>2nd <strong>EDIT</strong>: Here are my results after 1 day of research. I used <code>PlaybackControlView</code> in my layout like this:</p>
  <pre><code>&lt;com.google.android.exoplayer2.ui.PlaybackControlView
        android:id=&quot;@+id/play_back_control_view&quot;
        android:layout_width=&quot;0dp&quot;        &lt;--- I use ConstraintLayout, so this is okay
        android:layout_height=&quot;wrap_content&quot;
        android:background=&quot;@color/black&quot;
        android:alpha=&quot;0.15&quot;
        app:layout_constraintStart_toStartOf=&quot;parent&quot;
        app:layout_constraintTop_toTopOf=&quot;parent&quot;
        app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
        app:controller_layout_id=&quot;@layout/custom_playback_control_view&quot; /&gt;
  </code></pre>
  <p>As you might see from the layout above, I use a custom layout for this called <code>custom_playback_control_view.xml</code>. Here is the my custom layout content:</p>
  <pre><code>&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
      xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
      android:layout_width=&quot;match_parent&quot;
      android:layout_height=&quot;wrap_content&quot;
      android:background=&quot;@color/black&quot;
      xmlns:tools=&quot;http://schemas.android.com/tools&quot;&gt;
  
      &lt;ImageButton
          android:id=&quot;@id/exo_play&quot;
          style=&quot;@style/ExoMediaButton.Play&quot;
          app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
          app:layout_constraintStart_toStartOf=&quot;parent&quot;
          app:layout_constraintTop_toTopOf=&quot;parent&quot;
          tools:ignore=&quot;ContentDescription&quot;/&gt;
  
      &lt;ImageButton android:id=&quot;@id/exo_pause&quot;
          style=&quot;@style/ExoMediaButton.Pause&quot;
  
          app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
          app:layout_constraintStart_toStartOf=&quot;parent&quot;
          app:layout_constraintTop_toTopOf=&quot;parent&quot;
          tools:ignore=&quot;ContentDescription&quot;/&gt;
  
      &lt;View
          android:id=&quot;@id/exo_progress_placeholder&quot;
          android:layout_width=&quot;0dp&quot;
          android:layout_weight=&quot;1&quot;
          android:layout_height=&quot;26dp&quot;
  
          app:layout_constraintEnd_toStartOf=&quot;@id/exo_duration&quot;
          app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
          app:layout_constraintTop_toTopOf=&quot;parent&quot;
          app:layout_constraintStart_toEndOf=&quot;@id/exo_play&quot;/&gt;
  
      &lt;TextView
          android:id=&quot;@id/exo_duration&quot;
          android:layout_width=&quot;wrap_content&quot;
          android:layout_height=&quot;wrap_content&quot;
          android:includeFontPadding=&quot;false&quot;
          android:paddingLeft=&quot;4dp&quot;
          android:paddingRight=&quot;4dp&quot;
          android:textColor=&quot;#FFBEBEBE&quot;
          android:textSize=&quot;14sp&quot;
          android:textStyle=&quot;bold&quot;
          app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
          app:layout_constraintEnd_toEndOf=&quot;parent&quot;
        app:layout_constraintStart_toEndOf=&quot;@id/exo_progress_placeholder&quot;
          app:layout_constraintTop_toTopOf=&quot;parent&quot; /&gt;
  
  &lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;
  </code></pre>
  <p>Last but not least, I attached the <code>ExoPlayer</code> to the <code>PlaybackControlView</code> like this in my Fragment:</p>
  <pre><code>myAudioPlayer = ExoPlayerFactory.newSimpleInstance(context)
  binding.playBackControlView.player = myAudioPlayer
  </code></pre>