In my app, I have a TextInputLayout where the user enters its id, when the TextInputLayout does not have the focus looks like:
However, when the user touch the TextInputLayout (get the focus) the hint text looks like:
And I need hint text looks like as the follow image when the TextInputLayout have the focus:
Ignore the icon, its different but it does not matter in this moment, that I want to do is the hint text looks like the last image
Here is my code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/ilUser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:textColorHint="#color/et_login">
<EditText
android:id="#+id/etUser"
android:layout_width="match_parent"
android:layout_height="#dimen/et_login_height"
android:background="#drawable/edit_text_format"
android:drawableLeft="#drawable/user"
android:drawablePadding="10dp"
android:fontFamily="sans-serif"
android:hint="#string/user_id_text_hint"
android:inputType="number"
android:maxLength="12"
android:minLines="15"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textCursorDrawable="#drawable/cursor_drawable_app"
android:textSize="#dimen/h5"
android:theme="#style/EditTextTheme" />
</com.google.android.material.textfield.TextInputLayout>
you cant do this by default edit text you can use some library in your app to apply this ...
library is here :
implementation 'com.google.android.material:material:1.2.1'
and if you want to learn i recommend to see this tutorial :
https://www.youtube.com/watch?v=C_TEugAIMHA&t=616s
see this and you can get your answer...
When you use TextInputLayout is highly recommended to use TextInputEditText instead of EditText
Example:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/ilUser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:textColorHint="#color/et_login">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etUser"
android:layout_width="match_parent"
android:layout_height="#dimen/et_login_height"
android:background="#drawable/edit_text_format"
android:drawableLeft="#drawable/user"
android:drawablePadding="10dp"
android:fontFamily="sans-serif"
android:hint="#string/user_id_text_hint"
android:inputType="number"
android:maxLength="12"
android:minLines="15"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textCursorDrawable="#drawable/cursor_drawable_app"
android:textSize="#dimen/h5"
android:theme="#style/EditTextTheme" />
</com.google.android.material.textfield.TextInputLayout>
That should solve it!
Related
I have implemented a TextInputLayout with a password field in the usual way:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:layout_marginRight="30dp"
android:autofillHints="password"
android:background="#drawable/edit_text_border"
android:hint="#string/password"
android:inputType="textPassword"
android:textColor="#000000"
android:textColorHint="#9e9e9e" />
</com.google.android.material.textfield.TextInputLayout>
I have added this in the dependencies -
implementation 'com.google.android.material:material:1.1.0'
The visibility "eye- icon" is not yet visible. Is there anything that I missed or I did do sommething wrong?
Make sure to use a Material Components theme in your app and use a layout like:
<com.google.android.material.textfield.TextInputLayout
...
android:hint="#string/password"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
...
android:inputType="textPassword"
/>
</com.google.android.material.textfield.TextInputLayout>
As you are using an EditText please check the official doc:
Note: A text field is composed of a TextInputLayout and a TextInputEditText as a direct child. Using an EditText as the child might work, but TextInputEditText provides accessibility support for the text field and allows TextInputLayout greater control over the visual aspects of the input text. If an EditText is being used, make sure to set its android:background to #null so that TextInputLayout can set the proper background on it.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/pass"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Password"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
I need [top|start] hint text an TextInputEditText..
I use android:gravity="top|start" hint text still in center, but the text content is correct (top start)
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="200">
<com.google.android.material.textfield.TextInputEditText
android:text="#={textProg.textProg.text}"
android:hint="Hint Text"
android:layout_width="match_parent"
android:layout_height="100dp"
android:inputType="textMultiLine"
android:gravity="top|start"
android:maxLength="200"
android:textColor="#drawable/edit_text_color"/>
</com.google.android.material.textfield.TextInputLayout>
i don't know why your code doesn't work with you it work with me , but you can try this i hope it work .
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:counterEnabled="true"
app:counterMaxLength="200">
<com.google.android.material.textfield.TextInputEditText
android:text="#={textProg.textProg.text}"
android:hint="Hint Text"
android:layout_width="match_parent"
android:layout_height="100dp"
android:inputType="textMultiLine"
android:ellipsize="start"
android:gravity="top"
android:maxLength="200"
/>
</com.google.android.material.textfield.TextInputLayout>
why you not try by adding this android:ellipsize="top|start"
Probably it's an issue related to material design library. I have checked with different version and found different scenarios for same layout. Among them below version gives me the result that you want to achieve.
implementation 'com.google.android.material:material:1.2.0-alpha01'
Output:
I would like for my app to be able to display different hints in the edittext at different times, so i have to set the hint pro-grammatically at each times as below.
editText.setHint("Hint 1");
But the problem is when i starts typing the hint starts disappearing.I want to show this hint every time.If i set the hint in xml it will not disappear while typing, but how to do this in my case.
Either you should consider to change to TextInputLayout(Strongly recommended this. Here is an example too.)
or
make relative layout with EditText for input and TextView for hint inside.Change the textview according to your needs.
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
android:layout_alignParentLeft="true"
android:id="#+id/editText1"
android:layout_gravity="center"
/>
<TextView
android:id="#+id/text_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="yourHint"
android:textSize="14sp"
android:layout_marginRight="10dp"
android:textColor="#color/customColor"
/>
</RelativeLayout>
what you are expecting is not possible,since we have to how what user is writing on editext.
Now a days https://github.com/hardik-trivedi/FloatingLabel
this type of hints are more popular,you can try above link.
TextInputLayout give powerful material features to EditText. Main feature is floating hint. See doc here https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html
You can't display while typing text in edit text hint in android have default functionality
<android.support.design.widget.TextInputLayout
android:theme="#style/TextLabel"
android:id="#+id/input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/username_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:hint="Email Address"
android:inputType="textEmailAddress"
android:translationY="10dp"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/font_13"/>
</android.support.design.widget.TextInputLayout>
Here android provide default functionality while typing text in edit text the hint above edit text, You can also set Hint via programmatically
EditText. setHint ("Hint 1");
the best way to do this is to use TextInputLayout.
https://www.bignerdranch.com/blog/becoming-material-with-android-design-support-library/
<!--EMAIL-->
<android.support.design.widget.TextInputLayout
android:id="#+id/email_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextLabel">
<EditText
android:id="#+id/etUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/login_screen_email_hint"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:nextFocusDown="#+id/etPassword"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHighlight="#android:color/white"
android:textColorHint="#android:color/white" />
</android.support.design.widget.TextInputLayout>
And dont forget adding this line to your gradle file
compile 'com.android.support:design:23.4.0'
I am new to Android. I am wondering how can we get a bordered Edittext and Textarea like we have in HTML something like this:
I am finding it hard to get such output in Lollipop devices as it shows as a line and a floating label.
In situation like this according to Google docs you would prefer TextInputLayout
For example:
<android.support.design.widget.TextInputLayout
android:id="#+id/password_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content>
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/password_hint"
android:textColor="#777777"
android:textColorHint="#777777"
android:textSize="#dimen/text_20"
android:imeActionId="#+id/input_password"
android:imeOptions="actionNext"
android:inputType="textPassword"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
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.