ExoPlayer: remove redundant spaces between playback buttons and timeline row

Question

I have custom ExoPlayer control bar. It takes quite a lot of space and I want to make it a bit narrower.

Here is what I want to remove/narrower (highlighted with red):

As you see I managed to remove some spaces already by playing around with paddingTop, layout_marginTop, layout_height parameters (it used to be even larger).

But it is not enough, it still takes a lot of space.

Question: How to narrower empty areas marked on the picture?

Here is what my custom exo_player_control_view.xml looks like (removed most of the elements for the purpose of simplicity):

<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:background="#CC000000"
    android:layoutDirection="ltr"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">
        <ImageButton
            android:id="@id/exo_play"
            style="@style/ExoMediaButton.Play" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">
        <com.google.android.exoplayer2.ui.DefaultTimeBar
            android:id="@id/exo_progress"
            android:layout_width="0dp"
            android:layout_height="18dp"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

Note: I fully understand that by narrowing those areas I might make the control panel less usable. It is ok. I want at least to have an ability to change them and test how it works.

Answer 1

First thing you should do is define height and width of ImageButton to wrap_content so it can behave properly. The padding above play button is due to lack of height and width

Now the main thing. if you want to remove padding of TimeBar you need to set app:touch_target_height this height increasing the padding between your play button and time bar.This height is the touch area for inner bar, you can use this to increase the user touch area without increasing bar size and this will look like padding. make size 0dp and padding will be gone

well there is one more padding that is image padding..i pulled this play button image from exoPlayer library and i found this image also have some default padding. if you want to remove that padding also then change this image.

this play button image have size in square and as you can see the play button is a triangle, so they added padding to make this image in center and square.

Extra:- you can also define the size of inner bar by using app:bar_height but remember app:bar_height cannot cross app:touch_target_height. even if you define it more then app:touch_target_height you will see no effect. you can increase these size and see more by yourself below is the final result that i got (also edited and removed image padding). the button touching the bar(button background is null time bar background is #9e0c26)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">


<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:background="#CC000000"
    android:layoutDirection="ltr"
    android:orientation="vertical">

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

        <ImageButton
            android:id="@id/exo_play"
            style="@style/ExoMediaButton.Play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

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

        <com.google.android.exoplayer2.ui.DefaultTimeBar
            android:id="@id/exo_progress"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:bar_height="2dp"
            app:touch_target_height="2dp" />
    </LinearLayout>

</LinearLayout>