Develop Reference

Show shadow on AppCompatEditText

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"

TextInputLayout having prefix and AutoCompleteTextView

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>

How to add a character counter to a material design textfield in Android studio Java

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.😀

MaterialDesign TextInputLayout scaling problems

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?

Android password visibility toogle not showing

The icon doesn't want to show up. I notice that when I add app:passwordToogleEnabled ='true'the height of the textinputlayer moves. However the icon doesnt show up.
<!-- Password Label -->
<com.google.android.material.textfield.TextInputLayout
android:layout_width="340dp"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleDrawable="#drawable/visibility_off-24px"
app:passwordToggleTint="#color/mainBlue"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<EditText
android:id="#+id/input_password"
android:background="#drawable/edt_txt_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="#font/sf_compact_display_medium"
android:hint="#string/password"
android:inputType="textPassword"
android:text="sOlUcOm2020" />
</com.google.android.material.textfield.TextInputLayout>
EDIT : My icon was in svg format istead of xml, that's why it didn't show up.

Please try with this code
implementation 'com.google.android.material:material:1.1.0'
and XML
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Passowrd"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/Password"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
EDIT : Your icon will be in svg format instead of xml, that's why it didn't show up.