This is the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<Spinner
android:id="#+id/spinnerFreq"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/start_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextStartFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/start_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/end_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextEndFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/end_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/length_seconds_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextLength"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/length_seconds_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/min_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextMinFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/min_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/max_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextMaxFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/max_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
I tried using a ConstraintLayout before the LinearLayout and the top TextInputLayout was rendered correctly. The ones below it are exactly the same, so I am not sure why they aren't working.
It's an issue with the TextInputLayout hint not moving up until the TextInputLayout gets tapped. Is there a way to get it to stay up top?
Is there a attribute I need to set or a certain way I need to lay them out? The documentation on the Material io page doesn't have a layout example on the text field page. https://material.io/develop/android/components/text-fields
Remove the hint from TextInputEditText and use the app:placeholderText in the TextInputLayout:
<com.google.android.material.textfield.TextInputLayout
android:hint="Label"
app:placeholderText="Placeholder Text"
Note: it requires at least the version 1.2.0-alpha03.
Related
I need to set drawableLeft aligned horizontally with the hint and moved them both closer to the bottom of the TextInputEditText. I have tried a lot of attributes but to no avail! Could I be missing something here?
Drawable seems to be where I want it but I need the hint to come below to align with drawable.
<?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:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_login_dialog_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello!"
android:textAlignment="center"
android:textColor="#color/teal_700"
android:textSize="32sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:boxBackgroundColor="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_login_dialog_title">
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/ti_et_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_email_24"
android:gravity="bottom"
android:hint="#string/field_hint_email"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:boxBackgroundColor="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/til_email_user_id">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/ti_et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_lock_24"
android:gravity="bottom"
android:hint="#string/field_hint_password" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Just Remove
android:drawableLeft="Drawable"
from TextInputEditText and add
app:startIconDrawable="Drawable"
into the TextInputLayout
or you can replace your TextInputLayout from below code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/share_card"
android:background="#android:color/transparent"
app:boxBackgroundColor="#android:color/transparent"
app:startIconDrawable="#drawable/icn_sort_by"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_login_dialog_title">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/ti_et_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
Make your drawable height and weight 24dp. Then add these to your TextInputEditText. This is not an official answer btw. I do it like this every time.
android:paddingVertical="10dp"
android:drawablePadding="10dp"
android:gravity="center_vertical"
At the moment, I have the simplest one-page application with one data entry field. I looked at a lot of examples, but I could not find the answer to my question: how do I add hint text at the bottom of the input field?
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<EditText
android:id="#+id/editTextUserId"
android:layout_width="347dp"
android:layout_height="60dp"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
android:text="#string/user_id"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/imageButton"
app:layout_constraintEnd_toEndOf="#+id/editTextDeviveId"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/editTextSessionId"
app:layout_constraintTop_toBottomOf="#+id/editTextDeviveId"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_customer_no"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp"
app:helperTextEnabled="true"
app:helperText="User">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextUserId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Customer No"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
Add a Textview and Constrain it below your Edittext
<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=".MainActivity">
<EditText
android:id="#+id/editTextUserId"
android:layout_width="347dp"
android:layout_height="60dp"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
android:text="#string/user_id"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/imageButton"
app:layout_constraintEnd_toEndOf="#+id/editTextDeviveId"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/editTextSessionId"
app:layout_constraintTop_toBottomOf="#+id/editTextDeviveId"
/>
<TextView
android:id="#+id/hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="user"
android:textColor="#android:color/holo_red_dark"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="#+id/editTextUserId"
app:layout_constraintTop_toBottomOf="#+id/editTextUserId" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then if you want to show/hide it base on user interaction you can do something
like this in your activity
editTextUserId.setOnFocusChangeListener((view, b) -> {
if(b){hint.setVisibility(View.VISIBLE);}
else {hint.setVisibility(View.INVISIBLE);}
});
I'm having an issue where my TextInputLayout label is being overlapped by the input within an AppCompatAutoCompleteTextView. My apologies if this has been answered before. Here is my code snippet:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/commission_form_category_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/commission_form_category_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/commission_form_category_label_text"
android:paddingHorizontal="16dp"
android:paddingVertical="16dp"
android:text="Hello"
android:singleLine="true"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
Here is what it looks like:
overlapping text
Change androidx.appcompat.widget.AppCompatAutoCompleteTextView to com.google.android.material.textfield.MaterialAutoCompleteTextView and add style to TextInputLayout
here is how it looks
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/commission_form_category_container"
android:layout_width="match_parent"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:hint="Hint"
android:layout_height="wrap_content">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:id="#+id/commission_form_category_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello"
android:singleLine="true"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
Try this-
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Example">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
style="#style/Widget.MaterialComponents.AutoCompleteTextView.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello" />
</com.google.android.material.textfield.TextInputLayout>
Instead of paddingVertical and paddingHorizontal you can specify padding via
paddingTop
paddingStart
paddingEnd
paddingBottom
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/commission_form_category_container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/commission_form_category_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/commission_form_category_label_text"
android:paddingTop="24dp"
android:paddingBottom="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Hello"
android:singleLine="true"
android:textSize="16sp" /></com.google.android.material.textfield.TextInputLayout>
I am trying to design a login page in which I am using FieldSetView and legend. The problem is when I am adding text field inside this, the text fields are not added properly. It comes outside
I want the password field inside fieldsetview. Here is the output which I am getting
Here is my activity_main.xml
<LinearLayout
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="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
tools:context=".MainActivity"
>
<libs.mjn.fieldset.FieldSetView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
app:fsv_borderRadius="8dp"
app:fsv_borderColor="#062999"
app:fsv_borderWidth="2dp"
app:fsv_legend="Sign In"
app:fsv_legendPosition="left"
app:fsv_legendSize="16sp">
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:outlineAmbientShadowColor="#color/colorPrimaryDark"
android:hint="email"
android:text="#string/email"
android:inputType="textEmailAddress"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="120dp"
>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="password"
android:text="#string/password"
android:inputType="textPassword"
/>
</com.google.android.material.textfield.TextInputLayout>
</libs.mjn.fieldset.FieldSetView>
</LinearLayout>
Use LinearLayout like this
<libs.mjn.fieldset.FieldSetView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
app:fsv_borderColor="#062999"
app:fsv_borderRadius="8dp"
app:fsv_borderWidth="2dp"
app:fsv_legend="Sign In"
app:fsv_legendPosition="left"
app:fsv_legendSize="16sp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="email"
android:inputType="textEmailAddress"
android:outlineAmbientShadowColor="#color/colorPrimaryDark"
android:text="#string/email" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="120dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="password"
android:inputType="textPassword"
android:text="#string/password" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</libs.mjn.fieldset.FieldSetView>
I have this XML layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layoutDirection="locale"
android:textDirection="rtl"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".app.storey.view.StoreyInsertFragment">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="somthing"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I want hint text show on right side but after use layoutDirection,textAlignment still show on left, how can I do this?
I see this link but not solve my problem.
Use android:textAlignment="viewStart" for TextInputEditText field.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/text_input_user_name"
style="#style/LoginInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginStart="#dimen/margin_editText_end_start"
android:layout_marginTop="#dimen/margin_end_edit_text"
android:layout_marginEnd="#dimen/margin_editText_end_start"
android:layout_marginBottom="#dimen/margin_end_edit_text"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
>
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/edt_user_name"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center|start"
android:gravity="center|start"
android:textAlignment="center"
android:hint="#string/user_name"
android:inputType="textMultiLine"
android:maxLength="8"
android:padding="20dp"
android:textColor="#color/ches_white"
android:textColorHint="#color/ches_white"
android:textSize="#dimen/text_size_login"/>
<android.support.design.widget.TextInputLayout
android:id="#+id/til_name"
style="#style/TextInputLabel2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dimen_20dp"
android:textColorHint="#color/gray_10"
app:hintEnabled="true"
app:hintTextAppearance="#style/CustomTextAppearance2">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_name"
style="#style/EditTextStyleWrap"
android:background="#android:color/transparent"
android:backgroundTint="#color/hint_line"
android:digits="#string/accepted_type"
android:gravity="end"
android:inputType="textPersonName"
android:letterSpacing="0.06"
android:maxLength="50"
android:nextFocusLeft="#+id/et_name"
android:nextFocusUp="#id/et_name"
android:textScaleX="1"
android:hint="name"
android:imeOptions="actionNext"
app:et_font="#{#string/font_sans_regular}"
tools:targetApi="lollipop" />
</android.support.design.widget.TextInputLayout>
If you are using api > 17 then try setting below properties to your EditText
android:textDirection="anyRtl"
android:layoutDirection="rtl"
Also, You need to set hint to your EditText and not your TextInputLayout and set gravity to right as mentioned in other answers.