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

