Aligning icons to the top of a Seekbar

Question

I have a Seekbar with a LinearLayout of icons above it. I'm using LinearLayout weightsum and weight to align each one, however they are still not quite aligned.

Is there a way to align them?

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:background="@color/colorWhite"
    android:orientation="vertical">


    <LinearLayout
        android:id="@+id/test_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="5"
        app:layout_constraintEnd_toEndOf="@+id/seekbar"
        app:layout_constraintStart_toStartOf="@+id/seekbar"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />
    </LinearLayout>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="4"
        android:theme="@style/Widget.AppCompat.SeekBar.Discrete"
        android:thumb="@drawable/ic_black_navigation_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/test_layout"
        app:layout_constraintWidth_percent="0.8" />


</androidx.constraintlayout.widget.ConstraintLayout>

Edit:

I am aware that you can use

android:paddingStart="-16dp"
android:paddingEnd="-16dp"

to align them but I rather not prefer to use a set padding, because this causes readjusting the padding when you add another item.

e.g changing icons to 6, need to change weightsum to 6, and also need to set padding to -14dp.

Answer 1

It's hard maintain this with LinearLayout, so I used ConstraintLayout instead, and using the Guidelines to divide the width into 4 equal portions, then you can align the images to these guidelines.. This will be maintainable accross different device widths and screen orientation

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:background="@color/colorWhite"
    android:orientation="vertical">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/test_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="@+id/seekbar"
        app:layout_constraintStart_toStartOf="@+id/seekbar"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/iv0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="4dp"
            android:paddingLeft="4dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.25" />

        <ImageView
            android:layout_width="wrap_content"
            android:paddingStart="16dp"
            android:paddingLeft="16dp"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="@+id/guideline1"
            app:layout_constraintEnd_toEndOf="@id/guideline1"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="@id/guideline2"
            app:layout_constraintStart_toStartOf="@+id/guideline2"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.75" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingEnd="16dp"
            android:paddingRight="16dp"
            app:layout_constraintEnd_toEndOf="@id/guideline3"
            app:layout_constraintStart_toStartOf="@+id/guideline3"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingEnd="4dp"
            android:paddingRight="4dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_black_trashcan_24dp" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:max="4"
        android:theme="@style/Widget.AppCompat.SeekBar.Discrete"
        android:thumb="@drawable/ic_black_navigation_24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/test_layout"
        app:layout_constraintWidth_percent="0.8" />

</androidx.constraintlayout.widget.ConstraintLayout>

Result:

Portrait:

Landscape