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?
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"
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>
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.😀
I have this layout:
<LinearLayout
android:id="#+id/dialogCentralContent"
android:gravity="center_horizontal"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_below="#+id/phoneNumberInfo"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"
android:orientation="horizontal"
android:background="#drawable/edittext_white_rounded">
<EditText
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:gravity="center"
android:maxLines="1"
android:inputType="none"
android:focusable="false"
android:text="#={dataContext.phonePrefix}"
style="#style/Widget.App.PurchaseAmountEditText" />
<android.support.design.widget.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
tools:errorEnabled="true"
app:errorText="#{dataContext.validator.phoneValidation}">
<android.support.design.widget.TextInputEditText
android:layout_height="60dp"
android:layout_width="match_parent"
android:gravity="center"
android:maxLines="1"
android:inputType="phone"
android:text="#={dataContext.phoneNumber}"
style="#style/Widget.App.PurchaseAmountEditText" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
It looks like this:
As you can see the second EditText is rendered lower than the first one. When I look at it in the visual editor of Android Studio I can see that the TextInputLayout has some free space at its top, however setting paddingTop="0dp" didn't change anything. So how to make those two EditTexts render the same way?
By default, android.support.design.widget.TextInputLayout will leave room at the top for the floating hint text. If you're not using the floating hint, you can remove that space by adding the following to the opening <TextInputLayout> element.
app:hintEnabled="false"
The regular hint text will still be visible on the TextInputEditText when it's empty.
N.B. – This answer does not apply to the current Material Components version, which is markedly different than the original.
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.