Develop Reference

How do I top start the hint text within an TextInputEditText in Android?

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:

Want to customize EditText attribute with a hint

I'm new to android mobile development and java. And wonder if anybody can help me with my issue.
Now, I'm making XML file of my android app and want it to have something like displayed below.
Can it be made in XML file without deep knowledge of java? I just want to have fixed text in my EditText attribute. Using LinearLayout to my first app. I appreciate any kind of help.
Using API 28 for testing.

Yes, there is a default layout TextInputLayout and TextInputEditText.
Here's documentation:
https://developer.android.com/reference/android/support/design/widget/TextInputLayout
https://material.io/develop/android/components/text-input-layout/

This is called TextInputLayout.Read here. Demo example here
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="true">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username" />
</android.support.design.widget.TextInputLayout>

You are looking for the TextInputLayout component:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"
app:boxBackgroundColor="#color/white"
app:boxStrokeColor="#color/text_input_layout_stroke_color"
app:counterMaxLength="15"
app:counterEnabled="true"
>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>

How to remove white box from TextInputLayout

Today I have just updated my dependencies of material design
from 1.0.0 to 1.1.0-alpha09
implementation 'com.google.android.material:material:1.1.0-alpha09'
Now i"m getting strange issue in com.google.android.material.textfield.TextInputLayout
Here is my Code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_10sdp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_enter_email"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"/>
</com.google.android.material.textfield.TextInputLayout>
after updating the dependencies I'm getting boxed design in my TextInputLayout
Output of above code
if i use implementation 'com.google.android.material:material:1.0.0' I'm getting expected result
Can anybody help me to solve this issue
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.
UPDATE
I have already tried app:boxBackgroundMode="none" them I'm getting this
,
if i use app:boxBackgroundMode="outline" then getting this
SOLVED
No need to use boxBackgroundMode
You need to add #style/Widget.Design.TextInputLayout in your TextInputLayout
SAMPLE CODE
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_10sdp"
style="#style/Widget.Design.TextInputLayout"
app:errorTextAppearance="#style/error_appearance"
android:textColorHint="#android:color/white">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:id="#+id/emailTextInputEditText"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/white"
android:gravity="center"
android:hint="#string/hint_enter_email"
android:imeOptions="actionNext"
android:textColorHint="#android:color/white"
android:inputType="textEmailAddress"
android:textColor="#android:color/white"
android:textSize="#dimen/_15ssp"/>
</com.google.android.material.textfield.TextInputLayout>
OUTPUT

To revert back to old style with no filed background but only bottom border, one should use following style:
<com.google.android.material.textfield.TextInputLayout
...
style="#style/Widget.Design.TextInputLayout"
....
>
</com.google.android.material.textfield.TextInputLayout>
Using theme Widget.Design.TextInputLayout will generate expected output like below:

Using a material Theme the default style used by the TextInputLayout is #style/Widget.MaterialComponents.TextInputLayout.FilledBox
To obtain something similar just change the background color using the boxBackgroundColor attribute:
<style name="CustomFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxBackgroundColor">#myColor</item>
</style>
Also use the android:hint="#string/hint_enter_email" in the TextInputLayout not in the TextInputEditText

For me using #style/Widget.Design.TextInputLayout produced undesirable formatting results, specifically alignment issues with the editText box.
I used boxBackgroundMode set to none for awhile, and after updating material design in my project the error icon mentioned started showing. May be a bug (https://issuetracker.google.com/issues/122445449).
For now I'm still setting the boxBackgroundMode to none, and hiding the error icon by setting the color to transparent. This way I keep the material design.
app:boxBackgroundMode="none"
app:errorIconTint="#android:color/transparent"
<com.google.android.material.textfield.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
app:boxBackgroundMode="none"
app:errorIconTint="#android:color/transparent"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/message_ellipsis"
android:inputType="textCapSentences|textMultiLine"
android:paddingTop="10dp" />
</com.google.android.material.textfield.TextInputLayout>

Set this in your TextInputLayout:
app:boxBackgroundMode="none"
Probably you have set boxBackgroundMode to filled or maybe it's set by default. Just add above line, and this should fix the issue.

Same behavior with com.google.android.material:material:1.3.0
Applying transparent background to TextInputEditText does the tricks.
android:background="#android:color/transparent"

Left Icon in TextInputLayout

I'm trying to add an Left Icon to my TextInputLayout, but text get over the Icon.
When I add a padding, everything move together.
I tried with
android:drawableLeft="#drawable/ic_store_white_48dp"
android:drawablePadding="50dp"
android:drawableStart="#drawable/ic_store_white_48dp"
But it is not working !
I should implement a LinearLayout horizontal for each row, but I would like to be sure there is no easier way to do it
Here is my code layout:
<android.support.design.widget.TextInputLayout
android:id="#+id/til_calle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_calle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_store_white_48dp"
android:drawablePadding="50dp"
android:drawableStart="#drawable/ic_store_white_48dp"
android:hint="Calle"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>

Make sure you are using the latest Design library, all you need for both Design and AppCompat is:
compile 'com.android.support:design:23.2.0'
Try using both the Design's library TextInputLayout and AppCompat's AppCompatEditText.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textColorHint="#color/loginHint">
<android.support.v7.widget.AppCompatEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="textEmailAddress|textNoSuggestions"
android:minWidth="350dp"
android:drawableLeft="#drawable/ic_store_white_48dp"
android:drawableStart="#drawable/ic_store_white_48dp"
android:textColor="#android:color/white"
android:textColorHint="#color/loginHint"
android:textCursorDrawable="#null"
app:backgroundTint="#android:color/white"/>
</android.support.design.widget.TextInputLayout>

With the Material Components library you can change the left icon in the TextInputLayout using the app:startIconDrawable attribute.
Something like:
<com.google.android.material.textfield.TextInputLayout
android:hint="Hint text"
app:startIconDrawable="#drawable/ic_add_24px"
...>
<com.google.android.material.textfield.TextInputEditText/>
</com.google.android.material.textfield.TextInputLayout>

Here is my code layout:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:drawableLeft="#drawable/icon_user"
android:drawableStart="#drawable/icon_user"
android:drawablePadding="10dp"
android:hint="User Name" />
</android.support.design.widget.TextInputLayout>
android:drawablePadding="10dp"
Its work

This is a bug that was reported on Android's Issue Tracker
https://code.google.com/p/android/issues/detail?id=225836
and it's now been fixed on the latest release of the Design Support Library (v25.0.1). Just add the required dependency to the build gradle...
dependencies {
compile 'com.android.support:design:25.0.1'
}

It is simple, when adding passwordToggleEnabled it automatically adding the eye icon on the right and the drawableLeft was gone. so you have to remove the drawableLeft and just use the drawableStart.
<android.support.design.widget.TextInputLayout
android:id="#+id/til_calle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_calle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawablePadding="50dp"
android:drawableStart="#drawable/ic_store_white_48dp"
android:hint="Calle"
android:inputType="text" />

If you are using material input layout so you just need to add one line in input layout's xml code
app:startIconDrawable="#drawable/ic_baseline_content_paste_24"

Yes. Currently its a bug on Layout.
You can try giving leftPadding to EditText or give some blank_spaces before the text.

Using material library, you can set custom icon using endIconMode="custom":
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/date_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:endIconMode="custom"
app:endIconDrawable="#drawable/ic_calendar">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/date_end"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none"
android:textSize="14sp"
tools:text="30 feb" />
</com.google.android.material.textfield.TextInputLayout>

TextInputLayout not showing EditText hint before user focus on it

I am using recently released Android Design Support Library to show floating label with EditTexts. But i am facing the problem that the Hint on the EditText is not showing when UI is rendered, but i see the Hint after i focus on the EditTexts.
My Layout is as follows:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:id="#+id/ScrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin">
<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="#string/feedbackname"
android:inputType="textPersonName|textCapWords" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/email_textinputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/FeedBackerEmailET"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/feedbackemail"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<Spinner
android:id="#+id/SpinnerFeedbackType"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:entries="#array/feedbacktypelist"
android:prompt="#string/feedbacktype" />
<android.support.design.widget.TextInputLayout
android:id="#+id/body_textinputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/EditTextFeedbackBody"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/feedbackbody"
android:inputType="textMultiLine|textCapSentences"
android:lines="5" />
</android.support.design.widget.TextInputLayout>
<CheckBox
android:id="#+id/CheckBoxFeedBackResponse"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:text="#string/feedbackresponse" />
<Button
android:id="#+id/ButtonSendFeedback"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:text="#string/feedbackbutton" />
</LinearLayout>
</ScrollView>
</FrameLayout>
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/toolbar_shadow" />
</FrameLayout>
I have also tried to set hint for the TextInputLayout using method setHint but no luck.
mNameTextInputLayout = (TextInputLayout) v.findViewById(R.id.name_et_textinputlayout);
mNameTextInputLayout.setErrorEnabled(true);
mNameTextInputLayout.setHint(feedBackerNameET.getHint());
mEmailTextInputLayout = (TextInputLayout) v.findViewById(R.id.email_textinputlayout);
mEmailTextInputLayout.setErrorEnabled(true);
mEmailTextInputLayout.setHint(feedBackerEmail.getHint());
mBodyTextInputLayout = (TextInputLayout) v.findViewById(R.id.body_textinputlayout);
mBodyTextInputLayout.setErrorEnabled(true);
mBodyTextInputLayout.setHint(feedBackBody.getHint());

Update:
This is a bug that has been fixed in version 22.2.1 of the library.
Original Answer:
As mentioned by #shkschneider, this is a known bug. Github user #ljubisa987 recently posted a Gist for a workaround:
https://gist.github.com/ljubisa987/e33cd5597da07172c55d
As noted in the comments, the workaround only works on Android Lollipop and older. It does not work on the Android M Preview.

That is a known bug of the Android Design library. It has been accepted and assigned.
So you should have this fixed in the next Android Design library release.
In the meantime, you could watch the issue tracker for a hacky-fix that might get posted there, but I don't know any as of now.
And yes, it only affect Lollipop and above.

This works for me in Design Library 23.1.1:
Set the hint color in xml attributes of TextInputLayout:
<android.support.design.widget.TextInputLayout
....
android:layout_margin="15dp"
android:textColorHint="#color/hintColor"
android:layout_width="match_parent"
...

This issue is fixed in version 22.2.1

you should use android.support.v7.widget.AppCompatEditText as EditText and set android:hint like below
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/etx_first_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:hint="#string/hint_first_name"/>
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id="#+id/editText1"
android:layout_margin="15dp"
android:layout_centerVertical="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:hint="Add City" />
</android.support.design.widget.TextInputLayout>
Use this code snippet.Make sure your activity is AppCompatActivity.
And dependency are also with latest versions
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:design:22.2.0'
Update the android studio to latest version.
see output here

If you are setting your EditText hint programmatically it wouldn't work!
You need to set the hint on the TextInputLayout it self.
TextInputLayout textInputLayout = (TextInputLayout) findViewById(R.id.usernameTextInputLayout);
textInputLayout.setHint(getString(R.string.username_hint));
Here is the XML in case you are wondering:
<android.support.design.widget.TextInputLayout
android:id="#+id/usernameTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/usernameEt"
android:layout_width="match_parent"
android:layout_height="#dimen/default_height"
android:layout_marginEnd="#dimen/default_margin"
android:layout_marginStart="#dimen/default_margin"
android:maxLength="#integer/username"
tools:hint="Username" />
</android.support.design.widget.TextInputLayout>

This issue is resolved in v23.0.1 of support design library. I also updated my appcompat-v7 to 23.0.1, compileSdkVersion to 23 & buildToolsVersion to 23.0.1 in build.gradle.
android {
compileSdkVersion 23
buildToolsVersion "23.0.1"
}
dependencies {
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
}

I solved my problem with this code:
new Handler().postDelayed(
new Runnable() {
#Override
public void run() {
TextInputLayout til = (TextInputLayout) someParentView.findViewById(R.id.til);
til.setHint("Your Hint Text");
til.bringToFront();
}
}, 10);
The key here is the bringToFront. It forces the TextInputLayout to redo its drawing, which is not the same as doing invalidate(). If you are trying to display the TextInputLayout on a view that has animations or tranistions, you need to execute the above code at the end of the animation or transition. Just make sure that the code above runs on the UI thread.

Set hint color that contrast to the EditText background.
<item name="android:textColorHint">#FF424242</item>
Related:
setHintTextColor() in EditText
Change EditText hint color when using TextInputLayout
How to change the floating label color of TextInputLayout

Looks like this issue appears when you set onFousListener on EditText - try to extend EditText and support multiple onFocusListeners

Problem solved:
Goto build.gradle of ur app and check design library.
compile 'com.android.support:design:22.2.1'
It should be 22.2.1 or newer.

Problem is the hint color. It becomes white when typing something. Please change the hint color or change the background color. You will see the hint while typing.

There is a simple solution to this as this worked for me
<android.support.design.widget.TextInputLayout
android:id="#+id/activity_login_til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="27dp"
android:layout_marginTop="24dp"
android:padding="10dp"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#000000"
app:passwordToggleDrawable="#drawable/passwordviewtoggleselector"
android:theme="#style/Base.TextAppearance.AppCompat">
<!---- add this line and theme as you need ----->
<android.support.design.widget.TextInputEditText
android:id="#+id/activity_login_et_password"
android:layout_width="match_parent"
android:layout_height="58dp"
android:hint="Password"
android:inputType="textPassword"
android:padding="10dp"
android:textColor="#f5ab3a"
android:textColorHint="#e6d2d1cf"
android:textSize="20dp" />
</android.support.design.widget.TextInputLayout>
Just add android:theme="#style/Base.TextAppearance.AppCompat" to the TextEditLayout and it should work and you can change the theme as you need.

Just add: android:hint="your_hint" for TextInputLayout.

I found something different.
When setting the style for the fragment,
f1.setStyle(DialogFragment.STYLE_NO_FRAME,android.R.style.Theme_DeviceDefault_Light);
The bug was gone when I tried different Styles than "Theme_DeviceDefault_Dialog".
Give it a try.

if you have set your layout background white please use it in your Activity Theme
parent="Theme.MaterialComponents.Light.NoActionBar"