Android layout spacing between elements

Question

I have the following xml layout:

Result I have at the moment:

Result I want to have:

I have to make sure to put the currentTime and endTime on the left and instead the screenRotationButton on the right.

With the FocusAwareSeekBar below, as seen in the image.

How do you advise me to get around?

Edit:

<LinearLayout
                android:id="@+id/bottomControls"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:gravity="center"
                android:minHeight="40dp"
                android:orientation="horizontal"
                android:paddingLeft="@dimen/player_main_controls_padding"
                android:paddingRight="@dimen/player_main_controls_padding">

                <TextView
                    android:id="@+id/playbackCurrentTime"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:minHeight="30dp"
                    android:text="-:--:--"
                    android:textColor="@android:color/white"
                    tools:ignore="HardcodedText"
                    tools:text="1:06:29" />

                <TextView
                    android:id="@+id/separated"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:paddingLeft="4dp"
                    android:paddingRight="4dp"
                    android:minHeight="30dp"
                    android:text="/"
                    android:textColor="@android:color/white"
                    tools:ignore="HardcodedText"
                    tools:text="/" />

                <TextView
                    android:id="@+id/playbackEndTime"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="-:--:--"
                    android:textColor="@android:color/white"
                    tools:ignore="HardcodedText"
                    tools:text="1:23:49" />

                <org.schabi.newpipe.views.FocusAwareSeekBar
                    android:id="@+id/playbackSeekBar"
                    style="@style/Widget.AppCompat.SeekBar"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="2dp"
                    android:layout_weight="1"
                    tools:progress="25"
                    tools:secondaryProgress="50" />

                <TextView
                    android:id="@+id/playbackLiveSync"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:background="?attr/selectableItemBackground"
                    android:gravity="center"
                    android:paddingLeft="4dp"
                    android:paddingRight="4dp"
                    android:text="@string/duration_live"
                    android:textAllCaps="true"
                    android:textColor="@android:color/white"
                    android:visibility="gone"
                    tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />

                <androidx.appcompat.widget.AppCompatImageButton
                    android:id="@+id/screenRotationButton"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginStart="4dp"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:focusable="true"
                    android:padding="@dimen/player_main_buttons_padding"
                    android:scaleType="fitCenter"
                    android:visibility="gone"
                    app:srcCompat="@drawable/ic_fullscreen"
                    app:tint="@color/white"
                    tools:ignore="ContentDescription,RtlHardcoded"
                    tools:visibility="visible" />
            </LinearLayout>

anatoli · Answer 1 · 2021-08-13T15:14:38.957

You can reach it with ConstraintLayout

   <androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/bottomControls"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:minHeight="40dp"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/player_main_controls_padding"
    android:paddingRight="@dimen/player_main_controls_padding">

    <TextView
        android:id="@+id/playbackCurrentTime"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/separated"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:text="1:06:29" />

    <TextView
        android:id="@+id/separated"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="/"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/playbackEndTime"
        app:layout_constraintStart_toEndOf="@+id/playbackCurrentTime"
        tools:ignore="HardcodedText"
        tools:text="/" />

    <TextView
        android:id="@+id/playbackEndTime"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintStart_toEndOf="@+id/separated"
        app:layout_constraintEnd_toStartOf="@+id/playbackLiveSync"
        tools:ignore="HardcodedText"
        tools:text="1:23:49" />

    <org.schabi.newpipe.views.FocusAwareSeekBar
        android:id="@+id/playbackSeekBar"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/screenRotationButton"
        android:layout_gravity="center"
        android:layout_marginTop="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/playbackCurrentTime"
        android:layout_weight="1"
        tools:progress="25"
        tools:secondaryProgress="50" />

    <TextView
        android:id="@+id/playbackLiveSync"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="@string/duration_live"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/screenRotationButton"
        app:layout_constraintStart_toEndOf="@+id/playbackEndTime"
        tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/screenRotationButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="4dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:padding="@dimen/player_main_buttons_padding"
        android:scaleType="fitCenter"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/playbackLiveSync"
        app:srcCompat="@drawable/ic_fullscreen"
        app:tint="@color/white"
        tools:ignore="ContentDescription,RtlHardcoded"
        tools:visibility="visible" />

</androidx.constraintlayout.widget.ConstraintLayout>

with android:layout_width="0dp" on playbackEndTime you tell the component to take whole empty space, that view have. So everything defined after playbackEndTime will be placed on right side

I tried as you said, but it was giving me problems with playbackEndTime which was centrally placed. I edited the post, with more information also cleaning the code, could you give me a hand? — Paul, Aug 13 '21 at 14:48
This is the result I got from your code: https://i.stack.imgur.com/L9fQU.png — Paul, Aug 13 '21 at 15:25

score 0 · Answer 2 · answered Aug 13 '21 at 14:09

As you can read here

android:gravity sets the gravity of the contents (i.e. its subviews) of the View it's used on.

android:layout_gravity sets the gravity of the View or Layout relative to its parent.

With the android:gravity="center" on the LinearLayout you handle the gravity of all the elements inside, so get rid of it.

Instead, set the android:layout_gravity, to the elements inside, start for left and end for right.

For another approach check also ConstraintLayout

I edited the post, adding more information. By fixing the code better. I can ask you to review the matter if possible. — Paul, Aug 13 '21 at 14:50

score 0 · Answer 3 · answered Aug 16 '21 at 05:49

Modifying @anatoli's answer, you can try the code below to achieve your desired result. I created a chain between 3 textViews for the duration so that they stick together always. Also, there is another textView that I don't understand the usage of so for the time being I have not included it in the chain and defaulted the fullscreen button to stick on the right always.

Also, I think the fullScreen button should have a height and width of 24dp as it will look a bit more like the desired screenshot posted.

<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/bottomControls"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:gravity="center"
    android:minHeight="40dp"
    android:orientation="horizontal"
    android:paddingLeft="@dimen/player_main_controls_padding"
    android:paddingRight="@dimen/player_main_controls_padding">

    <TextView
        android:id="@+id/playbackCurrentTime"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/separated"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="HardcodedText"
        tools:text="1:06:29" />

    <TextView
        android:id="@+id/separated"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="/"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/playbackEndTime"
        app:layout_constraintStart_toEndOf="@+id/playbackCurrentTime"
        tools:ignore="HardcodedText"
        tools:text="/" />

    <TextView
        android:id="@+id/playbackEndTime"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:minHeight="30dp"
        android:text="-:--:--"
        android:textColor="@android:color/white"
        app:layout_constraintStart_toEndOf="@+id/separated"
        tools:ignore="HardcodedText"
        tools:text="1:23:49" />

    <org.schabi.newpipe.views.FocusAwareSeekBar
        android:id="@+id/playbackSeekBar"
        style="@style/Widget.AppCompat.SeekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="2dp"
        app:layout_constraintTop_toBottomOf="@+id/playbackCurrentTime"
        tools:progress="25"
        tools:secondaryProgress="50" />

    <TextView
        android:id="@+id/playbackLiveSync"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground"
        android:gravity="center"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="@string/duration_live"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@+id/screenRotationButton"
        app:layout_constraintStart_toEndOf="@+id/playbackEndTime"
        tools:ignore="HardcodedText,RtlHardcoded,RtlSymmetry" />

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/screenRotationButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginStart="4dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:padding="@dimen/player_main_buttons_padding"
        android:scaleType="fitCenter"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="@id/playbackCurrentTime"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/playbackCurrentTime"
        app:srcCompat="@drawable/ic_fullscreen"
        app:tint="@color/white"
        tools:ignore="ContentDescription,RtlHardcoded"
        tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>

Android layout spacing between elements

3 Answers3