How to scale multiple views in a layout to fit the layout's size?

Question

I'm making an app, and I want it to look like this (I had originally designed this layout in LinearLayout, to test on my own phone)

However, now that I want it to look nice on other devices, I can't figure out how to scale the EditTexts to be of equal size and fill up their parent view. I've tried setting equal weights for them, but the second EditText always overtakes the first one, and looks like this (ignore the "random number" text wrapping):

Here's my layout:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/ConstraintLayout"
    android:gravity="center_horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:text="random number"
        android:textColor="@color/accent"
        android:textSize="52sp"
        android:layout_marginTop="48dp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/eachText"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:text="tap anywhere on the screen for a new number"
        android:textColor="@color/accent_muted"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/outputText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:text=""
        android:textColor="@color/accent"
        android:textSize="54sp"
        android:textStyle="bold"
        app:layout_constraintTop_toBottomOf="@+id/eachText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/linearLayout"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="32dp"
        android:layout_marginLeft="32dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@+id/outputText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <EditText
            android:id="@+id/from"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:background="@drawable/edittext_rightflat"
            android:fontFamily="@font/nunito_bold"
            android:textSize="24dp"
            android:hint="1"
            android:inputType="numberDecimal"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintHorizontal_weight="1"/>

        <EditText
            android:id="@+id/to"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:gravity="center_vertical"
            android:background="@drawable/edittext_leftflat"
            android:fontFamily="@font/nunito_bold"
            android:textSize="24dp"
            android:hint="100"
            android:inputType="numberDecimal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_weight="0"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="allow repeated results"
        android:fontFamily="@font/nunito_semibold"
        android:gravity="center"
        android:textColor="@color/accent_muted"
        android:textSize="24sp"
        android:textStyle="bold"
        android:button="@null"
        android:drawableRight="?android:attr/listChoiceIndicatorMultiple"
        android:checked="false"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Change your width to 0dp so your horizontal weight constraint is respected and constraint your layouts to each other (chain).

Your inner constraint layout would look like this

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="32dp"
    android:layout_marginLeft="32dp"
    android:orientation="horizontal"
    app:layout_constraintTop_toBottomOf="@+id/outputText"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

    <EditText
        android:id="@+id/from"
        android:layout_width="0dp"  <-- this is now 0dp
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:background="@drawable/edittext_rightflat"
        android:fontFamily="@font/nunito_bold"
        android:textSize="24dp"
        android:hint="1"
        android:inputType="numberDecimal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/to"  <-- add this
        app:layout_constraintHorizontal_weight="1"/>

    <EditText
        android:id="@+id/to"
        android:layout_width="0dp"  <-- this should be 0 dp
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:gravity="center_vertical"
        android:background="@drawable/edittext_leftflat"
        android:fontFamily="@font/nunito_bold"
        android:textSize="24dp"
        android:hint="100"
        android:inputType="numberDecimal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/from"  <-- add this constraint
        app:layout_constraintHorizontal_weight="1"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

The above is closest to your current implementation and does what you want.

Few things I want to call out that you might want to consider.

• You can just use an inner linear layout to position your text views instead of using an inner constraint layout.
• You can use a guideline for positioning your edit texts and flatten your hierarchy.