I saw that there are numerous threads raised on this topic but none of them seems to solve my issue.
I have an EditText inside of InputLayout and it shows blank until focused.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_marginTop="20dp"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:hint="Name"/>
Android version 12
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Name"
app:hintTextColor="#color/black"
app:boxStrokeColor="#color/black"
android:layout_marginTop="20dp"
app:boxStrokeWidth="2dp"
android:textColorHint="#color/black"
>
<EditText
android:id="#+id/etInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
/>
</com.google.android.material.textfield.TextInputLayout>
Related
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>
I have an inputText field(TextInputLayout's EditText) of fixed height.
I want to align hint text to top left of the view.
Problem: hint text is always displayed at center_verticle but I want to display it at top left corner.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/aboutWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="About Sponsor">
<EditText
android:id="#+id/et_about_sponsor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="250dp"
android:textAlignment="viewStart"
android:layout_centerHorizontal="true"
android:gravity="start|top"
android:imeOptions="actionDone"
android:inputType="textMultiLine|textCapSentences"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/font_medium" />
</com.google.android.material.textfield.TextInputLayout>
As per this github issue you need to set android:minLines to at least 2 along with android:gravity="top".
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txtInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Hint">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
**android:minLines="2"**
/>
</com.google.android.material.textfield.TextInputLayout>
You can use:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="About Sponsor">
<com.google.android.material.textfield.TextInputEditText
android:minHeight="250dp"
android:textAlignment="viewStart"
android:layout_centerHorizontal="true"
android:gravity="start|top"
android:imeOptions="actionDone"
android:inputType="textMultiLine|textCapSentences"
.../>
</com.google.android.material.textfield.TextInputLayout>
Try to add style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" style to the TextInputLayout
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/aboutWrapper"
android:layout_width="match_parent"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_height="wrap_content"
android:hint="About Sponsor">
<EditText
android:id="#+id/et_about_sponsor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="250dp"
android:textAlignment="viewStart"
android:layout_centerHorizontal="true"
android:gravity="start|top"
android:imeOptions="actionDone"
android:inputType="textMultiLine|textCapSentences"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/font_medium" />
</com.google.android.material.textfield.TextInputLayout>
You can use
<EditText
android:id="#+id/editTextTextPersonName5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:ems="10"
android:hint="Message"
android:gravity="left|top"
android:inputType="textAutoComplete"
android:textAlignment="textStart" />
Here gravity attribute will help in aligning the text to whichever you want.
You can Refer Here
I'm using TextInputEditTexts as text entry, and when I select them, the hint moves up as it should, but is covered by the outline of the box. Does anyone know why that would be happening?
Photo:
Code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/title_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/grey"
android:theme="#style/OutlinedEditText"
app:boxStrokeColor="#color/blue"
app:hintTextColor="#color/blue"
app:layout_constraintTop_toBottomOf="#id/cover_art">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:hint="#string/title"
android:inputType="textCapWords" />
</com.google.android.material.textfield.TextInputLayout>
Remove in the TextInputEditText
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
In this way you are adding a margin between the main container (TextInputLayout) and the EditText
Use:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/title_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:hint="...."
...
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:inputType="textCapWords" />
</com.google.android.material.textfield.TextInputLayout>
You are placing android:hint="#string/title" attribute in com.google.android.material.textfield.TextInputEditText.
The android:hint="#string/title" should be placed in com.google.android.material.textfield.TextInputLayout
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/title_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/grey"
android:theme="#style/OutlinedEditText"
app:boxStrokeColor="#color/blue"
app:hintTextColor="#color/blue"
android:hint="#string/title"
app:layout_constraintTop_toBottomOf="#id/cover_art">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:inputType="textCapWords" />
</com.google.android.material.textfield.TextInputLayout>
I want to have a button that should be sticky at the bottom when Keyboard is open.
Linear layout with a long-form that contains multiple edittext in the vertical orientation.
Button is at the bottom and outside of scrollview
Manifest has a adjustsize property
So when I click any of the edit text, the Button comes up on the top of the Keyboard.
I have even tried android:fitsToSystemWindow=true but nothing works
I want something like that where the button does not come up on the keyboard and button should be sticky at the bottom too. How can I achieve that ?
Here is my XML file
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" tools:context=".items.ui.AddEditItemFragment">
<ScrollView android:id="#+id/sv_add_edit_item" android:layout_width="match_parent"
android:layout_height="0dp" app:layout_constraintBottom_toTopOf="#+id/btn_save"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/itemNameInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/white"
android:padding="#dimen/default_margin_padding" app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText" app:hintTextAppearance="#style/HintText">
<com.google.android.material.textfield.TextInputEditText
style="#style/editTextInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:inputType="textCapWords"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/itemNameInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/white"
android:padding="#dimen/default_margin_padding" app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText" app:hintTextAppearance="#style/HintText">
<com.google.android.material.textfield.TextInputEditText
style="#style/editTextInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:inputType="textCapWords"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/itemNameInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/white"
android:padding="#dimen/default_margin_padding" app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText" app:hintTextAppearance="#style/HintText">
<com.google.android.material.textfield.TextInputEditText
style="#style/editTextInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:inputType="textCapWords"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/itemNameInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/white"
android:padding="#dimen/default_margin_padding" app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText" app:hintTextAppearance="#style/HintText">
<com.google.android.material.textfield.TextInputEditText
style="#style/editTextInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:inputType="textCapWords"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/itemNameInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/white"
android:padding="#dimen/default_margin_padding" app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText" app:hintTextAppearance="#style/HintText">
<com.google.android.material.textfield.TextInputEditText
style="#style/editTextInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:inputType="textCapWords"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/itemNameInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/white"
android:padding="#dimen/default_margin_padding" app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText" app:hintTextAppearance="#style/HintText">
<com.google.android.material.textfield.TextInputEditText
style="#style/editTextInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:inputType="textCapWords"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/itemNameInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/white"
android:padding="#dimen/default_margin_padding" app:errorEnabled="true"
app:errorTextAppearance="#style/ErrorText" app:hintTextAppearance="#style/HintText">
<com.google.android.material.textfield.TextInputEditText
style="#style/editTextInputLayout" android:layout_width="match_parent"
android:layout_height="wrap_content" android:inputType="textCapWords"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</ScrollView>
<Button android:id="#+id/btn_save" style="#style/buttonThemeColor"
android:layout_width="match_parent" android:text="#string/save"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>```
Any help will be appreciated
One way can be to add global listener to detect whether keyboard is showing or not. And then hide/show your button accordingly.
You can take help from my this answer for the same.
In your menifest file use adjustPan for windowSoftInputMode rather then adjustResize
<activity android:name=".youractivity"
android:windowSoftInputMode="adjustPan" />
I want to set a background drawable for my TextInputLayout , this is my code :
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_repass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
app:hintEnabled="false"
android:layoutDirection="rtl"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/repass"
style="#style/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_repass"
android:drawableRight="#drawable/ic_https_grey600_18dp"
android:inputType="textPassword"
android:nextFocusDown="#+id/email" />
</android.support.design.widget.TextInputLayout>
the problem is, the icon is not appearing, the reason is that of passwordToggleEnabled when I remove it, it shows the drawable
how to show both PasswordToggle Drawable and background drawable?
Use
android:drawableStart="#drawable/ic_launcher_round"
instead of
android:drawableRight="#drawable/ic_launcher_round"
Try this
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_repass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layoutDirection="rtl"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/repass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_launcher_round"
android:hint="nilu"
android:imeOptions="actionNext"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
NOTE : android:drawableStart="#drawable/ic_launcher_round" is working because of android:layoutDirection="rtl"
OUTPUT
try this
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/rl_main"
android:padding="#dimen/margin_30dp"
android:background="#color/white_color">
<ImageView
android:id="#+id/img_email"
android:layout_width="#dimen/margin_25dp"
android:layout_height="#dimen/margin_25dp"
android:src="#drawable/message"
android:layout_marginTop="#dimen/margin_15dp"
android:layout_alignParentLeft="true"
/>
<!--Email-->
<android.support.design.widget.TextInputLayout
android:id="#+id/til_email_login_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:hint="#string/email"
android:textColorHint="#color/gray">
<com.xxx.app.customeview.CustomFontEditText
android:id="#+id/et_email_login_activity"
style="#style/edit_text_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:text="" />
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
for password tongle off use app:passwordToggleEnabled="false"
You have to add this line only
android:drawableStart="#drawable/ic_action_rupee"
Use this code It will working for me.
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_repass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/repass"
style="#style/edittexts"
android:drawableStart="#drawable/ic_action_rupee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_repass"
android:inputType="textPassword"
android:nextFocusDown="#+id/email"
android:drawableLeft="#drawable/ic_action_rupee" />
</android.support.design.widget.TextInputLayout>