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"
Related
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>
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 had an edit text like this:
<EditText
android:id="#+id/hcNumEditText"
style="#style/AppTheme.TextField"
android:hint="#string/hc_number"
android:layout_width="0dp"
app:layout_constraintBottom_toTopOf="#+id/footer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintVertical_bias="0.1"
app:layout_constraintWidth_max="300dp"
android:elevation="#dimen/elevation_normal"/>
Which worked as expected, but when I wrapped it in a TextInputLayout like this:
<android.support.design.widget.TextInputLayout
android:id="#+id/hcNumTextInputLayout"
android:layout_height="wrap_content"
android:layout_width="0dp"
app:layout_constraintBottom_toTopOf="#+id/footer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/header"
app:layout_constraintVertical_bias="0.1"
app:layout_constraintWidth_max="300dp"
android:padding="#dimen/elevation_normal">
<EditText
android:id="#+id/hcNumEditText"
style="#style/AppTheme.TextField"
android:hint="#string/hc_number"
android:elevation="#dimen/elevation_normal"/>
</android.support.design.widget.TextInputLayout>
There is not shadow from the elevation, what gives?
I have padding added to the TextInputLayout to make room for the shadow, but it still doesn't appear...
Use
android:elevation="#dimen/elevation_normal"
Inside android.support.design.widget.TextInputLayoutAnd . Also you need to define elevation_normal in dimens.xml.