Password field part of my xml code:
<android.support.percent.PercentRelativeLayout
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="match_parent"
>
...
<android.support.design.widget.TextInputLayout
android:layout_below="#+id/uname_ly"
android:id="#+id/text_input_layout_passwd"
app:layout_widthPercent="70%"
android:layout_centerHorizontal="true"
app:layout_heightPercent="10%"
app:layout_marginTopPercent="0%"
app:layout_marginBottomPercent="0%"
android:adjustViewBounds="true"
android:textColorHint="#color/editTextHintColor"
app:hintTextAppearance="#style/TextAppearance.App.TextInputLayout"
>
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/nopasswd"
android:inputType="textPassword"
android:maxLines="1"
android:textColor="#color/editTextTextColor" />
</android.support.design.widget.TextInputLayout>
...
How to i remove this overlay red exclamation mark when call setError() ?
[Update the style]
<style name="TextAppearance.App.TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/editTextHintColor</item>
</style>
Use setError(CharSequence error, Drawable icon) method. Set the drawable as null:
editText.setError("Pls provide email", null);
TextInputLayout is now part of the new material package. Here is an update on how I got a password field with validation working:
Layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/loginPasswordInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/grid"
android:hint="#string/onboarding_hint_password"
app:errorEnabled="true"
app:passwordToggleContentDescription="#string/onboarding_toggle_description_password"
app:passwordToggleEnabled="true"
app:passwordToggleTint="?colorAccent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/loginPasswordInputText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="start|center"
android:inputType="textPassword"
android:lines="1"
tools:text="#string/onboarding_hint_password" />
</com.google.android.material.textfield.TextInputLayout>
Setting the error message and hiding the icon in code can then be achieved with the following:
loginPasswordInputLayout.error = errorMessage
// Error icon overlaps with password visibility toggle, so remove it:
loginPasswordInputLayout.setErrorIconDrawable(0)
This way you get the red (or colour of your choice) text and underline, but the password visibility toggle icon stays fully accessible.
I think this is a more optimized answer if you are working with TextInputLayout.
What I did was took advantage of the error and I just rest the Text input layout to its default state after 2 seconds.
otpIn.setError(obj.getString("status"));
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
otpIn.setError(null);
}
},2000);
Related
when an error occurs (for example when the user inputs invalid name (inserting symbols such as:#$ etc..) ,i want to make the stroke color of the textBox to be red , how can i do that, here's my textbox code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/etFullNameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Full Name"
android:textColorHint="#b4ffff"
app:startIconTint="#b4ffff"
android:layout_margin="20dp"
app:startIconDrawable="#drawable/ic_person"
app:boxStrokeErrorColor="#color/color_on_secondary"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etFullName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
The default stroke color with an error is red.
You can in any case customize it using the boxStrokeErrorColor attribute:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeErrorColor="#color/..."
...>
Then you have to provide your custom validation. Something like:
etFullName.addTextChangedListener(
afterTextChanged = {
if (!isValid(it)){
etFullNameLayout.error = "Error!"
}
}
)
I am referring this: Outlined Edit Text from Material Design where the answer relates to the outdated support libraries rather than androidx.
How to achieve creating the OutlinedBox with the hint on the top left frame rather than inside the box? Have spent the entire morning unsuccessful. What I want is this:
My graddle:
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.1.0'
My app Theme:
style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"
My layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="Full name" >
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
My result (the frame is continuous, without the hint embedded in the top left corner):
Try below code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/etlFirst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:hintTextColor="#color/colorPrimary"
android:focusable="true"
android:hint="Label">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etFirst"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/colorAccent"
android:hint="PlaceHolder"/>
</com.google.android.material.textfield.TextInputLayout>
To displaying two hints try below code in .java file:
etFirst.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
etFirst.setHint("Place Holder");
} else {
etFirst.setHint("Label");
}
}
});
Output for above code is:
I hope this helps you
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etProposalTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/medium"
android:hint="Title."
android:inputType="text"
android:textSize="18sp" />
</com.google.android.material.textfield.TextInputLayout>
If you want to display at the same time the hint label on top left and a placeholder text inside the EditText you can use:
app:placeholderText: to add a placeholder text in the EditText
android:hint: to add a floating label
They can work together:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:hint="Label"
app:placeholderText="Placeholder Text"
Note: it requires at least the version 1.2.0-alpha03.
I have a simple TextInputEditText nested in TextTnputLayout.
I am trying to make the of TIL to be as long as the hint given in TIET.
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="This is a hint"/>
</android.support.design.widget.TextInputLayout>
But the problem is, it doesn't show anything
I have to set TIL's width to match_parent or just any other width other than wrap_content. But I want to the width to be dynamic as in, the width of TIL follows the length of the hint provided. Is it possible? If yes, how to do that?
I am using support library version 26.0.2 btw.
Yvette Colomb's answer is close, the TIL wraps the TIET but the fancy animation doesn't work there. It might be because the animation won't start if hints are set in execution?
You can do so, by setting the hint in the java code.
Remove the hint from the xml:
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/inputTxt"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.TextInputLayout>
Declare and initialise the TextInputEditText in the activity and set the hint.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextInputEditText inputTxt = (TextInputEditText) findViewById(R.id.inputTxt);
inputTxt.setHint("This is a hint");
}
This will wrap the text to the width of the hint as you type (not saying this is how it goes for all devices)
Then expand the width when you've entered the text.
To answer your updated question.
How to make the input layout grow as we enter input.
<android.support.design.widget.TextInputLayout
android:id="#+id/txtInputL"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/inputTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:maxLines="1"/>
The Java.
final TextInputEditText inputTxt = (TextInputEditText) findViewById(R.id.inputTxt);
inputTxt.setHint("This is a hint");
final TextInputLayout txtInputL = (TextInputLayout) findViewById(R.id.txtInputL);
txtInputL.setMinimumWidth(300);
txtInputL.setHint("This is a hint");
I've added a floating hint:
As we're typing:
If you have any other questions about this, please ask a new question.
You can achieve this from xml instead, just set the hint for both TextInputLayout and TextInputEdittext and it will work then to make the TextInputEdittext grow as you are typing you have to set the it maxlines="1" and the layout_height to wrap_content as below
<android.support.design.widget.TextInputLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="This is edittext">
<android.support.design.widget.TextInputEditText
android:hint="This is edittext
android:maxLines="1"
android:inputType="numberDecimal"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</android.support.design.widget.TextInputLayout>
I hope this help someone
Try this:
<android.support.design.widget.TextInputLayout
android:id="#+id/txt_inputLayout_gify"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/edt_gift_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="This is hint." />
</android.support.design.widget.TextInputLayout>
I found a type of workaround, for me I wanted to show Country Code in a disabled Material Design styled EditText, but same as you I was unable to use the wrap_context inside TextInputLayout.
So as a workaround I added the hint text in both TextInputLayout and TextInputEditText, and since I had a predefined text inside the TextInputEditText, the hint of TextInputEditText never appeared on screen, but made space for the hint of TextInputLayout to be visible.
Here is what I did...
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="16dp">
...
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/country_code"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Country code"
app:hintTextColor="#737373"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+91"
android:hint="Country Code"
android:enabled="false"
android:textColor="#737373"
.../>
</com.google.android.material.textfield.TextInputLayout>
...
</androidx.constraintlayout.widget.ConstraintLayout>
P.S. You might want to add a few more characters in the TextInputEditText hint, as that is what is controlling the spacing. Also the constraint layout is there just because I had other elements in the activity, you can avoid it and use any of your root view.
Screenshot
set your xml like so:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/text_field_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_text_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
/>
</com.google.android.material.textfield.TextInputLayout>
Now, adjust the size of the input_text_field to be BY THE SIZE OF THE HINT, depending on the hint size, like so:
val tf = input_text_field
val layout = text_field_layout
val hint = "Hint"
val measureText = tf.paint.measureText(hint).toInt()
tf.width = tf.paddingLeft + tf.paddingRight + measureText.toInt()
layout.hint = hint
Try doing this.
<android.support.design.widget.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="This is a hint"/>
I want to make a EditTextLayout, but I want a different text for label and hint.
For example : The label's text is "Phone Number", and the hint text is
"+6281342134".
Is it possible?
My code is:
<android.support.design.widget.TextInputLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="#+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="+6281342134"
android:inputType="phone" />
</android.support.design.widget.TextInputLayout>
I took a similar approach to Rehan
<android.support.design.widget.TextInputEditText
android:id="#+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
inputLayout.setHint("We did it!");
} else {
inputLayout.setHint("Testing 123");
}
}
});
The animation was good enough for me without disabling the animation:
Here's how I'm doing it without code (just XML), while allowing both a label and a placeholder at the same time, as in the Material Design guidelines.
Layout XML:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="My Label Text">
<android.support.design.widget.TextInputEditText
android:id="#android:id/input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#drawable/hint_selector"
android:hint="Placeholder Text"/>
</android.support.design.widget.TextInputLayout>
Color Selector XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="?android:textColorHint" />
<item android:color="#android:color/transparent" />
</selector>
The key here is to just make it transparent by default, and only show the placeholder text when it has focus. No need to change color either, since this will respect any custom theme in place, as well as light and dark themes.
You can use these attribute:
android:hint: for the label
placeholderText: for the placeholder text inside the EditText
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:hint="Phone Number"
app:placeholderText="+6281342134"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/phone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="+6281342134"
android:inputType="phone" />
</com.google.android.material.textfield.TextInputLayout>
If the placeholder should be displayed also when the text field is empty just add the expandedHintEnabled="false":
<com.google.android.material.textfield.TextInputLayout
app:expandedHintEnabled="false"
Note: the expandedHintEnabled requires at least the version 1.3.0-alpha03.
You can simply do it by this way:
<android.support.design.widget.TextInputLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone Number">
<android.support.design.widget.TextInputEditText
android:id="#+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="+6281342134"
android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>
But this will result overlapping of both hints i.e. Phone Number and +6281342134. So you need to implement OnFocusChangeListener for this. (Not so good solution but it'll work for you).
In your layout, add hint to TextInputLayout only. I have set hintAnimationEnabled to false because I think the animation might won't look smooth with different hints.
<android.support.design.widget.TextInputLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone Number"
app:hintAnimationEnabled="false">
<android.support.design.widget.TextInputEditText
android:id="#+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>
In your java file, create OnFocusChangeListener:
private View.OnFocusChangeListener onPhoneNumberFocusChangeListener = new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus) {
((EditText)v).setHint("+6281342134");
} else {
((EditText)v).setHint("");
}
}
};
and set it to your EditText
phone.setOnFocusChangeListener(onPhoneNumberFocusChangeListener);
I tried setting the floating label using android:hint="#string/EMAIL". So for the hint inside the box, I used app:placeholderText="e.g. someone#mailbox.com".
To have a floating action button enabled all the time you have to use requestFocus().
Go into the xml text editting mode and add this to the edittext:
android:label="Phone Number"
android:hint="+6281342134"
I want to set the hint with java in EditText(which is in TextInputLayout).
Code used for setting hint:
aET = (EditText) findViewById(R.id.aET);
aET.setHint("h?");
But even when edittext is focused, Hint is displayed twice(inside edittext also).
Please let me know if anyone had faced and found some workaround
when editText is focused...
when editText is not focused..
EDIT[10th July 2015]:
<android.support.design.widget.TextInputLayout
android:id="#+id/aTIL"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/aET" />
</android.support.design.widget.TextInputLayout>
This problem occurs because the hint from the xml is passed on to the TextInputLayout, so it can be displayed as a floating hint. But when you set it programatically, the hint is set to the EditText, which then results in two hints (one from the xml that is a floating hint and one you set programatically and is a normal EditText hint). If you wish to change the floating hint, you must set the hint on TextInputLayout.
You code will then look like this:
aTIL = (TextInputLayout) findViewById(R.id.aTIL);
aTIL.setHint("h?");
I found the solution !
In your EditText add
android:textColorHint="#android:color/transparent"
And in the code set the hint from the EditText
aET.setHint("h?");
The hint in your editText is hidden and the hint from the TextInputLayout is shown.
EDIT :
Other solution (The best)
Update Graddle with the new version of android:design
compile 'com.android.support:design:22.2.1'
I also had this issue.
when I needed to update the hint, I (erroneously) did that on both the EditText and the TextInputLayout, which resulted in a blur.
solution was to not call EditText.setHint() but only TextInputLayout.setHint()
You can go by using two hint texts. One for the TextInputLayout and other for the edit text inside it.Below is the reference:
<android.support.design.widget.TextInputLayout
style="#style/editText_layout"
android:id="#+id/entryScreenProduction_editText_percentCompleted_layout"
android:hint="%Completed">
<EditText
android:id="#+id/entryScreenProduction_editText_percentCompleted"
style="#style/editTextNotes"
android:gravity="center_vertical|top"
android:inputType="numberDecimal"
android:textAlignment="viewStart"
android:hint="0.0"/>
</android.support.design.widget.TextInputLayout>
But this has a problem. The UI will look like below. The hints will overlap.
To avoid the above ugly UI, you have to control this from program.Set the hint text of the EditText only when there is focus on the field, else remove the hint text.
android:hint="0.0"
Remove the above line from the layout xml file and do as below:
m_editText_completed = (EditText) findViewById(R.id.entryScreenProduction_editText_percentCompleted);
m_editText_completed.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View view, boolean b) {
if(b){
m_editText_completed.setHint("0.0");
}
else {
m_editText_completed.setHint("");
}
}
});
I hope this solves you issue. God Speed !!!
first compile dependency
compile 'com.rengwuxian.materialedittext:library:2.1.3'
add this in your xml
<com.rengwuxian.materialedittext.MaterialEditText
android:id="#+id/etId"
android:layout_width="match_parent"
android:layout_height="70dip"
android:hint="Hint goes here"
android:textColor = "#000000"
android:textSize="15sp"
app:met_accentTypeface="fonts/yourcustomfonts.ttf"
app:met_floatingLabel="normal"
app:met_floatingLabelTextColor="#ff0000"
app:met_floatingLabelTextSize="15sp"
app:met_hideUnderline="true"
app:met_textColorHint="#ff00ff"
app:met_typeface="fonts/yourcustomfont.ttf"/>
add xmlns:app="http://schemas.android.com/apk/res-auto"
Simple use this programmatically it's working for me
TextInputLayout til = new TextInputLayout(this);
til.setHintTextAppearance(android.R.style.TextAppearance_Large);
You can customize the style as i mention below...
<style name="TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:textColorHint">#color/colorPrimaryDark</item>
<item name="android:textSize">23sp</item>
</style>
TextInputLayout til = new TextInputLayout(this);
til.setHint("hai);
til.setHintTextAppearance(R.style.TextInputLayout);
In my case, I follow this line of code in kotlin
kotlin code
val edPasswordSignIn = findViewById<TextInputEditText>(R.id.edPasswordSignIn)
edPasswordSignIn.setHint("Password")
edPasswordSignIn.setOnFocusChangeListener { v, hasFocus ->
if (hasFocus){
edPasswordSignIn.setHint("Password")
}
else
edPasswordSignIn.setHint("")
}
XML code
<!--TextInput layout which acts as a wrapper to the edit text-->
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#f29358"
app:hintTextAppearance="#style/TextAppearance.AppCompat.Large"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#color/colorPrimary"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
android:scrollbarSize="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:gravity="fill_vertical"
app:layout_constraintTop_toTopOf="parent">
<!--Using the TextInputEditText,which is
same as the edit text,but remember-->
<!--that we need to use TextInputEditText
with TextInputLayout-->
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edPasswordSignIn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:backgroundTint="#color/white"
android:gravity="center|left"
android:inputType="textPassword"
android:paddingTop="-2dp"
android:paddingBottom="-1dp"
android:textSize="#dimen/_11sdp" />
</com.google.android.material.textfield.TextInputLayout>
before enter the text
After the enter the text
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
app:hintEnabled="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textField"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Hint" />
</com.google.android.material.textfield.TextInputLayout>
app:hintEnabled="false"
This is enough to hide the default label.