title: How to place the controls of an Exoplayer outside of the PlayerView
body: <p>I'm using Exoplayer2 to show videos in my application. I need the controls to be visible at all time. I can archive this by setting <code>app:show_timeout="0"</code>. But when the controls are always visible they take up space in the PlayerView.</p>
  
  <p>I would like to show the controls beneath the PlayerView, so that I can always show to whole video.</p>
  
  <p>This is my layout file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;RelativeLayout 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=".MediaPlayerActivity"
      android:theme="@android:style/Theme.NoTitleBar"
      android:contentDescription="hf_hide_help"&gt;
  
      &lt;com.google.android.exoplayer2.ui.PlayerView
          android:id="@+id/playerView"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:use_controller="true"
          app:rewind_increment="0"
          app:fastforward_increment="0"
          app:repeat_toggle_modes="none"
          app:show_timeout="0"
          /&gt;
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>And this is my <code>exo_player_control_view.xml</code>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"&gt;
  
      &lt;LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:gravity="center"
          android:paddingTop="4dp"
          android:orientation="horizontal"&gt;
  
          &lt;ImageButton android:id="@id/exo_play"
              style="@style/ExoMediaButton.Play"/&gt;
  
          &lt;ImageButton android:id="@id/exo_pause"
              style="@style/ExoMediaButton.Pause"/&gt;
  
          &lt;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"/&gt;
  
          &lt;com.google.android.exoplayer2.ui.DefaultTimeBar
              android:id="@id/exo_progress"
              android:layout_width="0dp"
              android:layout_weight="1"
              android:layout_height="26dp"/&gt;
  
          &lt;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"/&gt;
  
      &lt;/LinearLayout&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>This is what it looks like:
  <a href="https://i.stack.imgur.com/fgCpi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fgCpi.png" alt="Player"></a></p>
  
  <p>And this is what it looks like, when I click on the player - the controls hide.
  <a href="https://i.stack.imgur.com/YkI2x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YkI2x.png" alt="Player without controls"></a></p>