'trying to align a view vertically to the edit text inside the inputlayout [see image] the helper text shifts the alignment

just look how the OTP button seems to not be aligned properly. how do I fix that?

issue image

I'm using material UI's outlined textfeild which also has a helper text. That adds to the height of the input layout. hence, this issue. I want the OTP button to be aligned perfectly besides the text field. is there a way to do that other than making the helper text into a textview? I also don't want to use margin on the button to align it because that can cause unexpected changes in different screen sizes. Here's the code -

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 
    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:layout_margin="@dimen/login_card_spacing"
    app:cardBackgroundColor="#eeeeee"
    app:cardCornerRadius="@dimen/login_card_spacing">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/sign_up_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/login_card_spacing"
            android:text="SIGN UP"
            android:textSize="@dimen/huge_text_size"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/user_name_edit_text"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/login_card_spacing"
            android:hint="User Name"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/sign_up_label">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/user_password_edit_text"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/login_card_spacing"
            android:hint="Set New User Password"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/user_name_edit_text">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/user_phone_number_edit_text"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/login_card_spacing"
            android:hint="Phone Number"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/user_password_edit_text">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/user_otp_edit_text"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/login_card_spacing"
            android:layout_marginEnd="@dimen/login_card_spacing"
            android:hint="OTP Generated"
            app:helperText="Check Message Box For The Entered Phone Number"
            app:layout_constraintLeft_toLeftOf="@id/user_name_edit_text"
            app:layout_constraintRight_toLeftOf="@id/otp_generator"
            app:layout_constraintTop_toBottomOf="@id/user_phone_number_edit_text">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.textfield.TextInputLayout>
        
        <Button
            android:id="@+id/otp_generator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="otp"
            app:layout_constraintBottom_toBottomOf="@id/user_otp_edit_text"
            app:layout_constraintRight_toRightOf="@id/user_name_edit_text"
            app:layout_constraintTop_toTopOf="@id/user_otp_edit_text" />

        <Button
            android:id="@+id/cancel_login"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginVertical="@dimen/login_card_spacing"
            android:layout_marginEnd="@dimen/login_card_spacing"
            android:text="cancel"
            style="?attr/materialButtonOutlinedStyle"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="@id/user_name_edit_text"
            app:layout_constraintRight_toLeftOf="@id/register_login"
            app:layout_constraintTop_toBottomOf="@id/user_otp_edit_text" />

        <Button
            android:id="@+id/register_login"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/login_card_spacing"
            android:text="register"
            app:layout_constraintBottom_toBottomOf="@id/cancel_login"
            app:layout_constraintLeft_toRightOf="@id/cancel_login"
            app:layout_constraintRight_toRightOf="@id/user_name_edit_text"
            app:layout_constraintTop_toTopOf="@id/cancel_login" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source