I'm using the new TextInputLayout from the Android design library,
When the EditText is focused, everything is okay, and I can see the hint above the EditText:
But when the EditText loses focus, the hint totally disappears:
I expect that the hint will return to the EditText, what am I missing?
xml code below.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
<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="Try me!"/>
</android.support.design.widget.TextInputLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="Try me 2"/>
</LinearLayout>
This issue is fixed as of 22.2.1, update your Android SDK.
my SDK is updated so the accepted answer didnt work for me.
the fix in my case was to set a custom style OR to override some props:
give color values to android:textColorHint, app:boxStrokeColor and app:hintTextColor
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Edit Text"
android:textColorHint="#color/some_color"
app:boxStrokeColor="#color/some_color"
app:hintTextColor="#color/some_color"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Related
I have a layout with two TextInputEditText and when I set a text on this (programmatically or with xml) and set focus on another TextInputEditText, the above label of TextInputEditText was hidden.
I want to show this label even a text was written in this.
My xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:background="#color/whiteGray2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:orientation="horizontal"
android:weightSum="2"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp">
<com.google.android.material.textfield.TextInputLayout
style="#style/CustomBorderTextInputEditText"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:hint="#string/oldCount"
app:hintTextColor="#color/gray_text">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textIsSelectable="true"
android:inputType="none"
android:imeOptions="actionNext"
android:text="Hi How are you"
android:textColor="#color/gray_text"
android:textColorHint="#color/gray_text" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
style="#style/CustomBorderTextInputEditText"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:hint="#string/newCount">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/newCount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:textColorHint="#color/gray_text"
android:hint="#string/newCount"
android:textColor="#color/gray_text"
android:inputType="number"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
My style:
<style name="CustomBorderTextInputEditText" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
<item name="hintTextColor">?attr/colorPrimary</item>
</style>
Your issue is here:
<com.google.android.material.textfield.TextInputEditText
android:textColorHint="#color/gray_text"
Remove android:textColorHint in the TextInputEditText and the use:
<com.google.android.material.textfield.TextInputLayout
app:hintTextColor="#color/colorSecondary"
android:textColorHint="#color/text_input_hint_selector"
The hintTextColor is the color of the label when it is collapsed and the text field is active.
The android:textColorHint is the color of the label in all other text field states (such as resting and disabled).
Just an example:
And this is the selector:
Here the TextInputLayout:
Without text:
Focused:
With text not focused:
Disabled:
Add it in your xml code :
android:focusableInTouchMode="true"
or
Add it in your java code :
EditText newCount = (EditText)findViewById(R.id.newCount);
newCount.setFocusable(true);
may be it usefull to you, just try it.
I found my answer. I should add textColorHint and set a color instead of add hintTextColor attribute. But now I am confused, What is the difference between both of them?
how to do click on drawableRight edit image of every TextInputEditText? I want to click on the edit icon and then enable to edit each field. How can i do this?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--First name-->
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_64dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etFirstName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:drawableRight="#drawable/icon_edit"
android:hint="#string/label_fname"
android:inputType="textCapWords" />
</com.google.android.material.textfield.TextInputLayout>
<!--Middle name-->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/activity_registration_tiMiddleName"
android:layout_width="match_parent"
android:layout_height="#dimen/_64dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etMiddleName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:drawableRight="#drawable/icon_edit"
android:hint="#string/label_mname"
android:inputType="textCapWords"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
so how to each field individually edit using drawbleRight. Please help.
Don't use android:drawableRight in the TextInputEditText.
Use:
<com.google.android.material.textfield.TextInputLayout
...
app:endIconMode="custom"
app:endIconDrawable="#drawable/..."
and:
textInputLayout.setEndIconOnClickListener {
// Respond to end icon presses
}
I have a problem with my hint when I want write in the EditText my hint overlaps the OutlinedBox
so I don't understand what is the problem. So this my code
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/text_input_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:drawableStart="#drawable/ic_action_name"
android:hint="#string/Enter_Username"
android:inputType="textPersonName"/>
</com.google.android.material.textfield.TextInputLayout>
My problem:
Remove android:layout_margin="10dp" in your TextInputEditText.
The best solution should be:
<com.google.android.material.textfield.TextInputLayout
app:startIconDrawable="#drawable/...."
android:hint="Enter_Username"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
...>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/text_input_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"/>
</com.google.android.material.textfield.TextInputLayout>
Does padding the text help? Perhaps padding the start of the string with some whitespaces or padding it in the xml with android:paddingLeft=5dp
please try to this
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/outlinedTextField"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label"
app:startIconDrawable="#drawable/abc_vector_test">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Don't give the margin inside of textinputedittext.
Please remove this android:layout_margin="10dp" and it should work fine
I am trying to make AutoCompleteTextView look like this image https://ibb.co/ZJxmgK5 but unable to do the same. The outlined box is not visible in the result
Below is my current code. Earlier I tried adding an EditText in TextInputLayout but now I want to add Autocomplete in this.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lbl_destination_big">
<AutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
style="#style/Base.Widget.AppCompat.EditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="10"
android:background="#android:color/transparent"
android:hint="#string/lbl_destination"
android:layout_marginLeft="#dimen/margin8"
android:singleLine="true"
android:lines="1"
android:textSize="25sp"
android:nextFocusDown="#+id/txv_holiday_num_of_nights"
android:imeOptions="actionNext"
android:textCursorDrawable="#drawable/edittext_cursor_drawable"/>
/>
</com.google.android.material.textfield.TextInputLayout>
The expected result is the image for which the URL has been given above.
If you would like to have a TextInputLayout in conjuction with an AutoCompleteTextView you should use this style for the TextInputLayout Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu.
In your case:
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
Use something like:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/name_text_input"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="HINT TEXT">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"/>
</com.google.android.material.textfield.TextInputLayout>
Check also the doc:
Note: When using an outlined text field with an EditText child that is not a TextInputEditText, make sure to set the EditText's android:background to #null. This allows TextInputLayout to set an outline background on the EditText.
If you would like to avoid the dropdown icon just use the app:endIconMode attribute.
<com.google.android.material.textfield.TextInputLayout
app:endIconMode="none"
...>
Below code solves the problem:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lbl_destination_big">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
style="#style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:singleLine="true"
android:lines="1"
android:nextFocusDown="#+id/txv_holiday_num_of_nights"
android:imeOptions="actionNext"
android:textCursorDrawable="#drawable/edittext_cursor_drawable"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Destination"
android:layout_weight="10"
android:singleLine="true"
android:lines="1"
android:textSize="25sp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
tools:text="Hello" />
/>
</com.google.android.material.textfield.TextInputLayout>
This works. The problem was with the background color that you were setting to the AutoCompleteTextView.
finally my answer is this
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/uomLay"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="#id/quantity_lay"
app:layout_constraintStart_toStartOf="#id/start2"
app:layout_constraintEnd_toEndOf="#id/end2"
style="#style/OutlineBoxDropDown"
app:endIconDrawable="#drawable/ic_path_16692"
app:shapeAppearance="#style/Rounded"
app:hintTextAppearance="#style/hintTextAppearence"
android:layout_marginTop="#dimen/_13sdp"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/uom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/graphikregular"
android:hint="UOM"
style="#style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
android:background="#null"
android:paddingVertical="#dimen/_7sdp"
android:textColor="#color/desc_color"
android:textSize="#dimen/_11ssp"
tools:text="kg" />
</com.google.android.material.textfield.TextInputLayout>
I'm using Support Design Library. I created EditText but when I'm writting something there is some blue underline of edit text like in the picture below
Here is my code:
<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="Test"
android:inputType="none"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
How to fix that?
It seems autocomplete/suggestions are open. Try this:
<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="Test"
android:inputType="textNoSuggestions"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>