Problem : TextInputLayout with OutlinedBox bug with hint overlaps - android

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

Related

how to click on drawableRight on every TextInputEditText

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
}

TextInputLayout hides text

Trying to set text in com.google.android.material.textfield.TextInputLayout. But hint is alway at the upper position and hides text, what can I do do fix this
<com.google.android.material.textfield.TextInputLayout
android:layout_marginTop="#dimen/basic_padding_margin"
android:theme="#style/TextInputLayoutAppearance"
android:id="#+id/model_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/model"
android:focusableInTouchMode="false"
android:layout_width="match_parent"
android:layout_height="55dp"
android:inputType="text"
android:autofillHints="#string/mark_and_model"
android:hint="#string/mark_and_model"
/>
</com.google.android.material.textfield.TextInputLayout>

Use:
<com.google.android.material.textfield.TextInputLayout
...
android:hint="#string/mark_and_model">
<com.google.android.material.textfield.TextInputEditText
..../>
</com.google.android.material.textfield.TextInputLayout>

I am trying to make AutoCompleteTextView look like a material Edittext

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>

How to display Superscripted hint in TextInputLayout in Android? I can't seem to figure it out.Here's my code

Here's my Activity.xml file. I put the AppCompatEditText inside TextInputLayout. I want the hint to be shown in the html form with superscript text but it just won't happen. All the text is shown as just normal text. Is there a way around?
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/acceleration_unit_ms2"
android:inputType="numberDecimal"
android:id="#+id/acceleration_unit_ms2"/>
</android.support.design.widget.TextInputLayout>
Strings.xml
<string name="acceleration_unit_ms2">Meter/Second Square (m/s<sup><small>2</small></sup>)</string>

According to efficient performance use TextInputEditText inside TextInputLayout.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/input_layout_email"
android:layout_marginTop="#dimen/dp_10"
app:hintEnabled="true"
app:hintAnimationEnabled="false">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_email"
android:inputType="textEmailAddress"
android:hint="#string/email"
android:textSize="16sp"/>
</android.support.design.widget.TextInputLayout>

Hint not visible with TextInputLayout on non focus state

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>

Categories

Resources