align three rows of controls Android-CodePudding

I've made custom controls for a third party video player. I'm having trouble aligning some of the elements. I'd like my controls to align like this, with the seekbar taking up most of the width of the parent and the seekbar time & cc buttons aligned just above the seekbar at the start and end of the seekbar:

other player controls

This is what my player currently looks like, with the seekbar time & cc button at the top: my player controls

Here's my code:

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    android:background="@color/jw_surface_transparent_black"
    android:clickable="true">

    <RelativeLayout
        android:id="@ id/loading_panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:visibility="gone">

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/jw_transparent"
            android:indeterminate="true"
            android:indeterminateDrawable="@drawable/ic_jw_buffer" />
    </RelativeLayout>


    <LinearLayout
        android:id="@ id/center_controls"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <ImageButton
            android:id="@ id/rewind_button"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/jw_transparent"
            android:src="@drawable/rw_15_btn"
            android:visibility="invisible" />

        <ImageButton
            android:id="@ id/play_and_pause_button"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/jw_transparent"
            android:src="@drawable/ic_jw_play" />

        <ImageButton
            android:id="@ id/fast_forward_button"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_gravity="center"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:background="@color/jw_transparent"
            android:src="@drawable/ff_15_btn"
            android:visibility="invisible" />

    </LinearLayout>

    <RelativeLayout
        android:id="@ id/mid_bottom_controls"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/seek"
        android:layout_alignEnd="@id/seek"
        android:gravity="bottom">


        <androidx.appcompat.widget.AppCompatTextView
            android:id="@ id/seekbar_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:text="@string/seekbar_text"
            android:textColor="@color/white"
            android:visibility="invisible" />


        <ImageButton
            android:id="@ id/cc_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:background="@color/jw_transparent"
            android:src="@drawable/ic_jw_captions_selector"
            android:visibility="invisible"
            app:tint="@color/white" />


    </RelativeLayout>

    <LinearLayout
        android:id="@ id/seek"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="@dimen/player_margin"
        android:layout_marginEnd="@dimen/player_margin"
        android:layout_marginBottom="@dimen/player_margin_bottom"
        android:orientation="horizontal">

        <SeekBar
            android:id="@ id/seek_bar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/player_margin_bottom"
            android:layout_weight="1"
            android:background="@color/jw_transparent"
            android:paddingTop="7dp"
            android:progressBackgroundTint="@color/white"
            android:thumb="@drawable/custom_thumb"
            android:visibility="invisible" />

    </LinearLayout>

</RelativeLayout>

How can I get the seekbar text & cc button to be just above the seekbar? Thank you in advance.

UPDATE After changing my mid_bottom_controls to:

<RelativeLayout
 android:id="@ id/mid_bottom_controls"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignStart="@id/seek"
 android:layout_alignTop="@id/seek"
 android:layout_alignEnd="@id/seek"
 android:gravity="bottom">

My player looks like this: my player controls 2

When I try to add a bottom margin to the bottom of it the mid_bottom_controls disappear altogether. I'm also not sure why the seekbar text & cc button aren't aligning with each other.

CodePudding user response：

At first I should say that this complex layout could be implemented by ConstraintLayout so easier and faster than this approach with nested layouts. But any way this is not the problem, the only thing that you need to do is adding some attribute for your RelativeLayout with id mid_bottom_controls to make it aligned to the top of seekbar. So please update it like below:

<RelativeLayout
  android:id="@ id/mid_bottom_controls"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignStart="@id/seek"
  android:layout_alignEnd="@id/seek"
  android:layout_alignTop="@id/seek"
  android:gravity="bottom">