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"/>
Related
I have an ExposedDropDownMenu as a Spinner as recommended from Material.IO. My problem is that, View.Gone does not work and leaves an arrow in the view and therefore still occupies space.
Screenshot
XML
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
android:layout_width="0dp"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/calibrate_message_dropdown_menu_TWO"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
Code
calibrate_message_dropdown_menu_TWO.visibility = View.GONE
I appreciate any help. Thank you!
Can you try hiding the TextInputLayout instead of the contained AutoCompleteTextView. Add an id for the outer TextInputLayout like this:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
android:id="#+id/dropdown_layout"
android:layout_width="0dp"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/calibrate_message_dropdown_menu_TWO"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
and then in code:
dropdown_layout.visibility = View.GONE
If you want to remove the dropdown icon just use:
textInputLayout.endIconMode = TextInputLayout.END_ICON_NONE
How to set different gravity for TextInputLayout's hint and text entered in edit text. I want to set the hint gravity to start and edit text's text gravity to center. So how can i achieve this.
This is my xml code,
<android.support.design.widget.TextInputLayout
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:gravity="start">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/grey"
android:hint="Email"
/>
</android.support.design.widget.TextInputLayout>
In Android, we can set gravity both programmatically and in XML.
To set edit text hint in the center see the code below in which I use android:gravity="center" in XML.
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:backgroundTint="#color/colorAccent"
android:hint="Email" />
For showing the hint at top|left and the text typed in edit text to be at center or to set different gravity for TextInputLayout's hint and text in Android, you need to try the code below.
In .xml you need to set EditText's hint gravity top|left.
<android.support.design.widget.TextInputLayout
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<EditText
android:id="#+id/etName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top|left"
android:hint="Email"
android:backgroundTint="#color/colorAccent" />
</android.support.design.widget.TextInputLayout>
And in your java (activity) file, set EditText's text gravity center programmatically:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
EditText etName = (EditText)findViewById(R.id.etName);
etName.setGravity(Gravity.CENTER);
}
See the screenshot with the result:
Different gravity works implementation 'com.google.android.material:material:1.1.0' and below version but does not work in 1.2.0 or above.
To make it work in 1.1.0 or below follow these steps.
set TextInputEditText gravity to start in xml
<com.google.android.material.textfield.TextInputEditText id="#+id/text" gravity="start"/>
then programmatically set its gravity to center
text.gravity=Gravity.CENTER
I have a fragment which contains a calculator (Just three TextInputEditTexts which listen for input).
These inputs are set out in a RelativeLayout as shown below-
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="16dp">
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_probability_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_probability"
android:paddingBottom="16dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_probability_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberDecimal"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_trials_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_trials"
android:paddingBottom="16dp"
android:layout_below="#+id/binomial_probability_wrapper">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_trials_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberSigned"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_successes_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_successes"
android:paddingBottom="16dp"
android:layout_below="#+id/binomial_trials_wrapper">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_successes_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberSigned"/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
I have also tried using a LinearLayout with each input on a separate row, but that had the same result.
As you can see in this image-
the bottom input is cut off. If I measure it on my screen it is clearly a different size, but Android returns the same value for the heights of each layout and input.
Any suggestions as to how to fix this are welcome.
Edit: Some extra information. The layout bounds show that the text cursor is actually taller than the height of the bottom TextInputEditText. The top have the correct height.
Second edit: I added the a TextView below (For output) and that is now cut off, while the TextInputEditText is now the same as the others.
As saying in official github page:
TextInputLayout provides two height variations for filled and outline
text fields, standard and dense. Both box styles default to the
standard height.
In order to reduce the height of a text box, you can use a dense
style, which will reduce the vertical padding within the text box. You
can achieve this by applying the appropriate styles to your
TextInputLayout and TextInputEditText, depending on whether you are
using a filled or outline text field
So try to apply #style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense to your TextInputLayout or change padding for TextInputEditText
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_probability_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_probability"
android:paddingBottom="16dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/binomial_probability_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:inputType="numberDecimal"/>
</android.support.design.widget.TextInputLayout>
You have to use android:paddingTop="5dp" in
<android.support.design.widget.TextInputLayout
android:id="#+id/binomial_probability_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_probability"
android:paddingTop="5dp">
---- write something ----
</android.support.design.widget.TextInputLayout>
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.
Recently google introduced new Android Design Library in that how to use TextInputLayout field to enable the Floating Hint feature of EditText.
Not much guidance is available here.
This page says
you can now wrap it in a TextInputLayout
But No idea because smart prediction (Ctrl+SPACE) doesn't predicts any attributes to the TextInputLayout. So my questions are:
How do we get hold of the EditText underlying this component?
How can we get data from EditText?
TextInputLayout extends ViewGroup class.
So which means that you have to wrap your EditText in a TextInputLayout.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint"
android:id="#+id/editText1" />
</android.support.design.widget.TextInputLayout>
Do wrap the TextInputLayout around TextInputEditText instead of EditText.
Wrapping around EditText does have issue in landscape mode. Refer to
this article for more details.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint"
android:id="#+id/editText1" />
</android.support.design.widget.TextInputLayout>
This is defined in design support library under "Floating labels for editing text".
<android.support.design.widget.TextInputLayout
android:id="#+id/name_et_textinputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin">
<EditText
android:id="#+id/FeedBackerNameET"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="hinttext"
android:inputType="textPersonName|textCapWords" />
</android.support.design.widget.TextInputLayout>
To make this works well, you should let you app theme extends from Theme.AppCompat (or its descendant) theme, like extends from Theme.AppCompat.Light.NoActionBar.
<android.support.design.widget.TextInputLayout
android:id="#+id/til_message"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/type_message"
android:maxLines="5"/>
</android.support.design.widget.TextInputLayout>
hint will automatically shift up once you start typing in the edit text and to have those errors which appear below edit text set error on text input layout like this not on edit text
tilMessage.setError("Message field is empty!");
to disable error
tilMessage.setErrorEnabled(false);
The correct way...
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/card_id_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/form_card_id_text"
android:inputType="number"
android:maxLength="10"/>
</android.support.design.widget.TextInputLayout>
If you use EditText like a child of TextInputLayout, you will see this message in Android Monitor:
I/TextInputLayout: EditText added is not a TextInputEditText. Please switch to using that class instead.
With the Material Components Library there is a new TextInputLayout component.
Just use:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
In the official doc you can find all the info.
We can use AppCompactEditText also for this need to add support:appcompat in gradle
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint"
android:maxLength="100"
android:inputType="textNoSuggestions"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/font_size_large" />
</android.support.design.widget.TextInputLayout>
Rule of Thumb : TextInputLayout should wrap TextInputEditText instead of the normal EditText.
Reason?
TextInputEditText is a sub-class of EditText and is designed for use as a child of TextInputLayout.
Furthermore, using an EditText instead would shoot us a warning : EditText added is not a TextInputEditText. Please switch to using that class instead.