I have a TextInputLayout that contains an AutoCompleteTextView. The idea is that when the user starts typing the mobile number, some automatic suggestions should come. Since it is specifically for phone numbers, a fixed prefix "+91" is required.
app:prefixText="+91" is used for this purpose. It does show the prefix but it gets mixed with the hint and doesn't come properly (as it comes when EditText is used instead of AutoCompleteTextView). Checkout the images to see expected vs actual look.
XML Layout file:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AddMob">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInpLayoutMob"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="300dp"
android:layout_height="60dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:hint="Mobile No."
app:counterMaxLength="10"
app:endIconMode="clear_text"
app:helperTextTextColor="#color/purple_700"
app:layout_constraintBottom_toTopOf="#+id/textInpLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:prefixText="+91"
app:prefixTextColor="#color/purple_700">
<AutoCompleteTextView
android:id="#+id/autoCompleteTextViewMob"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="number"
android:maxLength="10" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Related
everyone. I have an AppCompatEditText field that is inside a TextInputLayout tag. Now I put a light shadow around the text box. Unfortunately, the whole thing is not displayed as I would like it to be, see picture. The lower part of the field does not appear. Do I have to set a distance, if so where?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/suche"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:paddingBottom="5dp"
android:layout_marginStart="20dp"
android:layout_marginTop="288dp"
android:layout_marginEnd="20dp"
app:boxCornerRadiusBottomEnd="20dp"
app:boxCornerRadiusBottomStart="20dp"
app:boxCornerRadiusTopEnd="20dp"
app:boxCornerRadiusTopStart="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/imgMain"
app:startIconDrawable="#drawable/ic_baseline_search_24">
<androidx.appcompat.widget.AppCompatEditText
android:elevation="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white_real"
android:background="#drawable/search_for"
android:hint="Suche..."
android:inputType="textEmailAddress">
</androidx.appcompat.widget.AppCompatEditText>
</com.google.android.material.textfield.TextInputLayout>
Set
android:layout_marginBottom="50dp"
instead of
android:layout_marginBottom="10dp"
EditText icon not working correctly
In EditText I added end icon app:endIconDrawable="#mipmap/edit_icon" for all icon it turns into gray square
Updated code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/profile_user_name_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:hint="#string/user_name"
app:endIconMode="custom"
app:endIconTintMode="screen"
app:endIconDrawable="#mipmap/edit_icon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:id="#+id/profile_user_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
Actual icon
Output of Updated code
Setting app:endIconTintMode="screen" should fix the problem . Also for me icon is not visible without this attribute app:endIconMode="custom"
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.😀
When I am running 360x640 it looks perfect, but when i go higher resolution it starts to look like that:
Code:
// TOP INPUT
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/dob_input_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:focusable="false"
android:hint="#string/date_of_birth"
app:endIconDrawable="#drawable/ic_more_arrow"
app:endIconMode="custom"
app:layout_constraintEnd_toEndOf="#+id/bottom_text"
app:layout_constraintStart_toStartOf="#+id/bottom_text"
app:layout_constraintTop_toBottomOf="#+id/bottom_text">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/dob_input_et"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:hint="#string/_12_15_2000"
android:importantForAutofill="no"
app:layout_constraintBottom_toTopOf="#+id/last_name_layout_input"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/bottom_text" />
</com.google.android.material.textfield.TextInputLayout>
// BOTTOM INPUT
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/phoneNumber_input_layout"
style="#style/TextInputLayoutTransparent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:focusable="false"
android:hint="#string/phone_number"
android:paddingTop="8dp"
app:endIconDrawable="#drawable/ic_more_arrow"
app:endIconMode="custom">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/phoneNumber_input_et"
style="#style/text_input_black_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ems="10"
android:focusable="false"
android:hint="#string/set_your_phone_number"
android:importantForAutofill="no"/>
</com.google.android.material.textfield.TextInputLayout>
What I tried is going with some custom padding between TextInputLayout and TextInputEditText but it changed nothing. First input is default style and the other one is custom, that's another thing that I thought was worth to look into.
EDIT
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
this little imp which is present in styles-v27 and above is making this effect, when i get rid of it, it's looking perfect.
Anyone has any idea what might be the reason for it?
I've created a text input with the help of the design support library but it behaves strangely inside the constraint layout I placed it in. The code below is how I wish the widget to be displayed and it initially displays correctly both in the design-builder and on the device. However, if I select the TextInputLayout (in either the design or blueprint layout) the EditText has it's layout_width modified from match_parent to 0dp causing it disappear.
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="#+id/activity_login"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/activity_login"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="#+id/activity_login"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/activity_login"
android:layout_marginBottom="16dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/email"
android:layout_weight="1"
android:hint="#string/email"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="11dp"/>
</android.support.design.widget.TextInputLayout>
I figured I'd come back and provide a solution since this is still left open.
The reason I was seeing the EditText views were behaving abnormally in the TextInputLayout is because they shouldn't be there in the first place. The TextInputLayout is part is the design support library and gives developers an easy way to build dynamic labels and error messages for text fields in a manner that is consistent with the Material design spec. However, they have a TextInputEditText as a child, not EditText.
<android.support.design.widget.TextInputLayout
android:id="#+id/emailLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:labelFor="#+id/email"
app:layout_constraintLeft_toLeftOf="#+id/activity_login"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:layout_constraintTop_toTopOf="#+id/activity_login"
android:layout_marginTop="16dp"
app:layout_constraintRight_toRightOf="#+id/activity_login"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/activity_login"
android:layout_marginBottom="16dp">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/email"
android:inputType="textEmailAddress"
android:hint="#string/email"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="11dp"
/>
</android.support.design.widget.TextInputLayout>
In my case i just put the below line it worked fine
android:inputType="textEmailAddress"
android:imeOption="yourAction"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp"
Include these lines in textInputLayout.