Android layout spacing between elements

user_8024296 0
Viewed 209

I have the following xml layout:

enter image description here

Result I have at the moment:

enter image description here

Result I want to have:

enter image description here

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>
android-custom-view android-layout android-linearlayout android xml
3 Answers

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

user_32379460

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

user_162791950

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>
user_107529440
Related