I am facing a weird issue, I have a InputTextLayout and an EditText in it, and I am trying to achieve something like this (shown in image below) (Image from material design guidlines: https://material.io/guidelines/components/text-fields.html#text-fields-layout), where there are two separate hints. I am doing this by adding android:hint to both layouts. This works fine, but when the focus moves away from this, the "label" moves down and overlaps the "placeholder" text. (Only when the user has not given any input and the edit text is empty - both hints overlap). Any pointers on how to fix this?
As a requirement I need both hints to be there, and the "Label" should not move down on focus change. Both hints should remain in their position
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Label">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Placeholder"
android:inputType="textCapWords"
/>
</android.support.design.widget.TextInputLayout>
Now the material components (alpha03) have support for placeholder text:
dependencies {
// ...
implementation 'com.google.android.material:material:1.2.0-alpha03'
// ...
}
<com.google.android.material.textfield.TextInputLayout
...
app:placeholderText="Placeholder text">
Perfect One!!!
xml code
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:hint="Phone Number">
<android.support.design.widget.TextInputEditText
android:id="#+id/edtPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="+91"
android:inputType="phone" />
</android.support.design.widget.TextInputLayout>
Kotlin code
edtPhone.hint=""
edtPhone.onFocusChangeListener = View.OnFocusChangeListener { _, hasFocus ->
inputLayoutPhone.isHintEnabled = hasFocus
if(hasFocus){
edtPhone.hint="+91"
}else{
edtPhone.hint= "Phone Number"
}
}
Java code
edtPhone.setHint("");
edtPhone.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View view, boolean hasFocus) {
if (hasFocus){
edtPhone.setHint("+91");
}else{
edtPhone.setHint("Phone Number");
}
}
});
As i know, we can't do as your wish.
Because, TextInputLayout is designed to float the hint once it gets focused So, once it went up nothing will be there in the place holder. We can do your requirement with slight changes as below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="com.stackoverflow.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:text="Label"
android:textColor="#color/colorPrimary" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingLeft="10dp"
app:hintEnabled="false">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:hint="Place Holder"
/>
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Placeholder">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords"
/>
</android.support.design.widget.TextInputLayout>
Use the code below. It should work fine.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:textColorHint="#color/white">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Placeholder"
android:inputType="text"
android:textColor="#color/white"
android:textColorHint="#color/white" />
</android.support.design.widget.TextInputLayout>
Remove hint from either AppcompatEditText or TextInputLayout
use android:hint="" only in one either AppcompatEditText or TextInputLayout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Placeholder"
android:inputType="textCapWords"
/>
</android.support.design.widget.TextInputLayout>
for more information check this link
For me best solution which I found is answered in https://stackoverflow.com/a/69261116/4024146
try to set hint separately for AppCompatEditText and TextInputLayout:
xml code:
<android.support.design.widget.TextInputLayout
android:id="#+id/inputLayoutPhone"
...>
<android.support.design.widget.TextInputEditText
android:id="#+id/edtPhone"
... />
</android.support.design.widget.TextInputLayout>
Kotlin code:
inputLayoutPhone.setHint("Label")
edtPhone.setHint("Placeholder")
Related
I am trying to add a character counter to a material design textfield, this is the textfield xml code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/outlinedTextFieldDescripcionUniverso"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="370dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:hint="#string/descripcion"
android:textColorHint="#color/textos"
app:counterEnabled="true"
app:counterMaxLength="150"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/outlinedTextFieldNombreUniverso">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textInputEditTextDescripcionUniverso"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#color/textos" />
</com.google.android.material.textfield.TextInputLayout>
this works nicely and the counter appears,
textfield with counter
but then i want to make the textfield to be vertically bigger, so it works as a textarea where you can write multiple lines and always has the same height. So i change the layout height of textfield and textInputEditText, the code looks like this:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/outlinedTextFieldDescripcionUniverso"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="370dp"
android:layout_height="150dp"
android:layout_marginTop="40dp"
android:hint="#string/descripcion"
android:textColorHint="#color/textos"
app:counterEnabled="true"
app:counterMaxLength="150"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/outlinedTextFieldNombreUniverso">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textInputEditTextDescripcionUniverso"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#color/textos" />
</com.google.android.material.textfield.TextInputLayout>
bigger textfield without counter
And now the character counter has dissapeared (im assuming its hidden under the textfield). ¿Why doesn't it move to be at the end of the textfield?
¿is there any other way to do this? i have tried normal textfield and the same happens
I think it's because the TextInputLayout has a fixed height as I saw in your code android:layout_height="150dp"
Solution Code :
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/outlinedTextFieldDescripcionUniverso"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="370dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:hint="#string/descripcion"
android:textColorHint="#color/textos"
app:counterEnabled="true"
app:counterMaxLength="150"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/outlinedTextFieldNombreUniverso">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textInputEditTextDescripcionUniverso"
android:layout_width="match_parent"
android:layout_height="150dp"
android:gravity="top"
android:inputType="textMultiLine"
android:textColor="#color/textos" />
</com.google.android.material.textfield.TextInputLayout>
Feel free to ask if something is unclear. And Kindly mark it as the correct answer if it helps you so that in future this answer could help any other needy.😀
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!
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 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'm using the following code to display an EditText within a TextInputLayout so I can use the setError() but without using the hint of the TextInputLayout :
<android.support.design.widget.TextInputLayout android:id="#+id/et_title_wrapper"
android:hint=" "
android:layout_marginLeft="32dp" android:layout_marginRight="32dp"
android:layout_width="match_parent" android:layout_height="64dp">
<EditText android:id="#+id/et_title" android:hint="#string/video_title"
android:background="#android:color/transparent"
android:textSize="14sp"
android:layout_width="match_parent" android:layout_height="32dp"
android:gravity="top" android:paddingTop="0dp"
android:layout_marginBottom="#dimen/form_edittext_bottom_margin"
android:singleLine="true" android:imeOptions="actionNext" />
</android.support.design.widget.TextInputLayout>
Yet the result is that no error is showing at all.
#Override
public void showErrorTitle() {
Log.i(TAG, "showErrorTitle ");
etTitleWrapper.setError("You need to add title");
etTitleWrapper.setErrorEnabled(true);
}
I can confirm, using the log, that showErrorTitle() is being triggered.
This should work but you can change the order and see.
Change the order,
etTitleWrapper.setErrorEnabled(true);
etTitleWrapper.setError("You need to add title");
Add this line in your TextInputLayout xml
app:errorEnabled="true"
Edit:
<EditText android:id="#+id/et_title" android:hint="#string/video_title"
android:background="#android:color/transparent"
android:textSize="14sp"
android:layout_width="match_parent" android:layout_height="32dp"
android:gravity="top" android:paddingTop="0dp"
android:layout_marginBottom="#dimen/form_edittext_bottom_margin"
android:singleLine="true" android:imeOptions="actionNext" />
</android.support.design.widget.TextInputLayout>`