Android: How to make RelativeLayout elements the same size and full width

Question

I'm using relativelayout to remove the "bold" bar between the constraintlayout (where the stars are), but I can't position these views so that they take up the whole screen and are the same size. If there are other options on how to get rid of the greasy streak, that would be great.

But I will not refuse in the search for a solution to the size of the elements

My code:

<?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"
>

<RelativeLayout
    android:id="@+id/relative_layout_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    >

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/first_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:background="@drawable/rate_registration_background_unselected_view_shape_first"
        >

        <ImageView
            android:id="@+id/first_star"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/rate_registration_star_svg"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/second_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="-2dp"
        android:layout_toEndOf="@+id/first_item"
        android:background="@drawable/rate_registration_background_unselected_view_shape_middle"
        >

        <ImageView
            android:id="@+id/second_star"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/rate_registration_star_svg"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/third_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="-2dp"
        android:layout_toEndOf="@+id/second_item"
        android:background="@drawable/rate_registration_background_unselected_view_shape_middle"
        >

        <ImageView
            android:id="@+id/third_star"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/rate_registration_star_svg"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/fourth_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="-2dp"
        android:layout_toEndOf="@+id/third_item"
        android:background="@drawable/rate_registration_background_unselected_view_shape_middle"
        >

        <ImageView
            android:id="@+id/fourth_star"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/rate_registration_star_svg"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/fifth_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="-2dp"
        android:layout_toEndOf="@+id/fourth_item"
        android:background="@drawable/rate_registration_background_unselected_view_shape_last"
        >

        <ImageView
            android:id="@+id/fifth_star"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/rate_registration_star_svg"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

When you're already using `ConstraintLayout` which is meant for creating a flat layout structure, then why nest it with `RelativeLayout`? Why not just one `ConstraintLayout` as root and all the `ImageViews`? — Lalit Fauzdar, Mar 18 '22 at 18:41

score 0 · Answer 1 · answered Mar 18 '22 at 18:30

You may use android:layout_weight for each of your element if you know exact number of cells. Here an example

Linear Layout and weight in Android

Otherwise I recommend to use this great library which has a lot of flexible examples

https://github.com/google/flexbox-layout

Android: How to make RelativeLayout elements the same size and full width

1 Answers1