TextInputLayout not showing hint while typing - android

I am using TextInputLayout from com.android.support:design.My problem is that when the editText gets focus, the hint is not displayed above the editText, and when the editText loses the focus after typing in it, the hint appears above the editText. I want the hint to appear above the editText when it gets focus in addition to the appearance when it loses focus.
My xml file:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:hint="#string/id_hint"/>
</android.support.design.widget.TextInputLayout>
and in my gradle I am using:
compile 'com.android.support:design:26.0.2'
Thank you very much

Try this Define style
<style name="TextInputLayoutLabelGrey" parent="Widget.Design.TextInputLayout">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/your_color</item>
<item name="android:textColor">#color/your_color</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/your_color</item>
<item name="colorControlNormal">#color/your_color</item>
<item name="colorControlActivated">#color/your_color</item>
</style>
Your layout xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/TextInputLayoutLabelGrey">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:hint="#string/id_hint"/>
</android.support.design.widget.TextInputLayout>

you need to use TextInputEditText instead
ex:
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/etUserName"
android:textAlignment="viewStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/emailorPhone"
android:imeActionLabel="#string/next"
android:imeOptions="actionNext"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>

Related

TextInputLayout will not set errorIconDrawable

When I use style="#style/Widget.Design.TextInputLayout" for TextInputLayout, setting app:errorIconDrawable does nothing. It only works when I don't set the style and let it inherit the application theme (Theme.MaterialComponents.Light.NoActionBar). app:endIconDrawable also doesn't work and I cannot find an alternative/solution to this problem. Please help!
The following works while inheriting the application theme:Theme.MaterialComponents.Light.NoActionBar but I don't want this style, particularly the underline doesn't align with the texts:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_password_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/login_password_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
This uses the style that I need but will not show the error icon:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_password_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="username"
style="#style/Widget.Design.TextInputLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/login_password_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Since you are using the legacy style Widget.Design.TextInputLayout it doesn't have support for all text field features that the *.OutlinedBox and *.FilledBox styles have.
You can't set the errorIconDrawable in the xml and you have to call TextInputLayout.setErrorIconDrawable after TextInputLayout.setError.
login_password_input_layout.setError("Error text!!");
login_password_input_layout.setErrorIconDrawable(R.drawable....);
hmm, see if you use directly below
style="#style/Widget.Design.TextInputLayout"
then your error drawable becomes null.
What I would suggest you is, create a style, modify the values as you like
<style name="TextLabel" parent="Widget.Design.TextInputLayout">
<item name="android:textColorHint">#f32</item>
<item name="android:textSize">20sp</item>
<item name="colorAccent">#4CAF50</item>
<item name="errorIconDrawable">#drawable/ic_baseline_error_24</item>
<item name="colorControlNormal">#673AB7</item>
<item name="colorControlActivated">#E91E63</item>
<item name="errorEnabled">true</item>
</style>
and then apply it to via
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/login_password_input_layout"
android:theme="#style/TextLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="username"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/login_password_input_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
This should solve.

Customizing TextInputLayout and EditText in android studio

I have these two TextInputLayout and I want to change colors.
I want to change color Accent to color Violet (like two violet lines).
and how to change cursor color ??
and this is my XML code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/amount_lyt"
android:layout_width="0.0dp"
android:layout_height="0.0dp"
android:layout_margin="10.0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline61"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline60">
<ir.jetservice.customviews.AVEditText
android:id="#+id/amount"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/amount"
android:text="10,000"
android:textSize="15.0sp"
android:textStyle="normal" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/account_lyt"
android:layout_width="0.0dp"
android:layout_height="0.0dp"
android:layout_margin="10.0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline62"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline61">
<ir.jetservice.customviews.AVEditText
android:id="#+id/account"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/account_number"
android:textSize="15.0sp"
android:textStyle="normal" />
</com.google.android.material.textfield.TextInputLayout>
Note: AVEditText is a normal EditText, it just changes English numbers to Persian.
You need to change the colors located in res/values/styles
<item name="colorPrimaryDark">#49C0D8</item>
If you're changing the Cursor color then see this solution: Change EditText Cursor color
For changing it's line color you've to add theme in styles.xml and appply that theme to the EditText.
Add theme in styles :
<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/yourColor</item>
<item name="colorControlHighlight">#color/yourColor</item>
</style>
Apply theme to the EditText :
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/amount_lyt"
android:layout_width="0.0dp"
android:layout_height="0.0dp"
android:layout_margin="10.0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline61"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline60">
<ir.jetservice.customviews.AVEditText
android:id="#+id/amount"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/amount"
android:text="10,000"
android:textColor="#color/yourColor"
android:textCursorDrawable="#null"
android:theme="#style/Theme.App.Base"
android:textSize="15.0sp"
android:textStyle="normal" />
</com.google.android.material.textfield.TextInputLayout>

TextInputLayout maintain hint color when losing focus

I have a TextInputLayout with a TextInputEditText inside it. Now, I have it with the hint color on grey when nothing is typed yet and the hint color becomes blue once the user types on it and the hint gets smaller and moves upper (the normal animation). The problem is that once I tap on another edittext, the hint of the first one becomes grey again, and I want it to keep being blue.
This is my code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/textInputLayoutAppearance">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:hint="#string/str_usuario"/>
</android.support.design.widget.TextInputLayout>
and the style:
<style name="textInputLayoutAppearance" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/blue</item>
</style>
Thanks in advance..
You can specify the hint color as below -
<android.support.design.widget.TextInputLayout
android:id="#+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/parent_to_view_margin"
app:layout_constraintTop_toBottomOf="#+id/til_email">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#android:color/holo_blue_bright"
android:hint="#string/hint_password" />
</android.support.design.widget.TextInputLayout>

TextInputLayout floating label appears slow

I have applied android TextInputLayout,it works fine.But when appears Text Input Layout the Edit text become very slow. as well as I have changed the hint color but its not working.
Layout xml:
<android.support.design.widget.TextInputLayout
android:id="#+id/register_input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="15"
android:lines="1"
android:id="#+id/Register_fragment_passwo_field"
android:hint="Password"
android:layout_gravity="center_vertical"
android:paddingLeft="35dp"
android:textColor="#ffffff"
android:textColorHint="#android:color/white"
android:layout_marginTop="5dp" />
</android.support.design.widget.TextInputLayout>
Dependency : compile 'com.android.support:design:23.0.1'
<!-- if You Can Change Color of TextInputLayout Like this-->
<style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/Color Name</item>
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/Color Name</item>
<item name="colorControlNormal">#color/Color Name</item>
<item name="colorControlActivated">#color/Color Name</item>
</style>
If you change animation time then customize EditText like this:
public class FloatingEditText extends FrameLayout{
animation = new AnimatorSet();
ObjectAnimator move =
ObjectAnimator.ofFloat(mHintTextView, "translationY", mHintTextView.getHeight() / 8, 0);
ObjectAnimator fade;
if (mEditText.isFocused()) {
fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 0, 1);
} else {
fade = ObjectAnimator.ofFloat(mHintTextView, "alpha", 0, 0.50f);
}
animation.playTogether(move, fade);
}
set this property of TextInputLayout android:textColorHint="#android:color/white" for changing the hint color and can i see your code for finding the why text become very slow.
<android.support.design.widget.TextInputLayout
android:id="#+id/register_input_layout_password"
android:layout_width="match_parent"
android:textColorHint="#android:color/white"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="15"
android:lines="1"
android:id="#+id/Register_fragment_passwo_field"
android:hint="Password"
android:layout_gravity="center_vertical"
android:paddingLeft="35dp"
android:textColor="#ffffff"
android:textColorHint="#android:color/white"
android:layout_marginTop="5dp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/il_second_phone_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/view_margin_micro"
android:textColorHighlight="#color/color_darker_gray"
android:textColorHint="#color/color_darker_gray">
<EditText
android:id="#+id/et_second_phone_number"
android:layout_width="match_parent"
android:layout_height="#dimen/layout_height_normal"
android:backgroundTint="#color/color_darker_gray"
android:hint="#string/second_phone_number"
android:inputType="phone"
android:maxLines="1"
android:text="#={vm.cPhoneTwo}"
android:textColor="#color/color_black" />
</android.support.design.widget.TextInputLayout>

How to set the color of the counter on a TextInputLayout?

I'm using a TextInputLayout wrapped around an EditText. Right now the counter is black, I'd like it to be white. I'm not sure what option to set to get it to be white.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
>
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
I decided to write this answer based on comments from previous one.
At first, you need to create the style for your counter, for example:
<style name="CounterStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#android:color/white</item>
<!--other parameters that you want to change -->
</style>
Then add this style to TextInputLayout:
app:counterTextAppearance="#style/CounterStyle"
That's all, it should works. Full code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterTextAppearance="#style/CounterStyle"
android:textColor="#color/white"
android:textColorHint="#color/white">
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
You can also use some style for the overflow counter:
app:counterOverflowTextAppearance="#style/YourOverflowTextStyleHere"
As described here (thanks #Sufian for the link)
Please add:
app:counterTextAppearance="#android:color/white"
to your TextInputLayout.
Hope this helps!

Categories

Resources