I am setting a an icon in material TextInputLayout but the icon is showing as grey not its original color(Shown in the image below). Using the same icon image in a Image View is showing colors. I have searched a lot and haven't found any solutions.
Any help will be great. Thanks in advance.
XML for the TextInputLayout :-
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/country"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/country"
app:layout_constraintBottom_toBottomOf="parent"
app:startIconDrawable="#drawable/flag"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="10dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+91"
android:enabled="false"/>
</com.google.android.material.textfield.TextInputLayout>
Simply add this line to your xml TextinputLayout Xml file
app:startIconTint="#null"
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/country"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="کشور"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:startIconDrawable="#drawable/blue_cheese"
app:startIconTint="#null">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="+91" />
</com.google.android.material.textfield.TextInputLayout>
Related
I am using textInputLayout in my application, but I am getting additional padding to the Hint. Can anyone help me out.
Screenshot:
Xml Code:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:id="#+id/outlined_member_name_text_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:hint="#string/name"
app:startIconDrawable="#drawable/ic_baseline_person_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/select_contact_button">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/member_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapSentences|text" />
</com.google.android.material.textfield.TextInputLayout>
You can add -ve padding to TextInputEditText, it should solve the extra padding issue that you have. For example I have used -10dp you can check what fits your case.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:id="#+id/outlined_member_name_text_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:hint="#string/name"
app:startIconDrawable="#drawable/ic_baseline_person_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/select_contact_button">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/member_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="-10dp"
android:inputType="textCapSentences|text" />
</com.google.android.material.textfield.TextInputLayout>
I'm building a Sign Up screen and i want to show a helper text on a EditText, i am using material but isn't showing. I've checked the google docs and i think i did nothing bad.
Here's my edittext code
<com.google.android.material.textfield.TextInputLayout
android:layout_width="411dp"
android:layout_height="164dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/createAccountSubTextView">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/usernameEditText"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:background="#drawable/custom_login_edittext"
android:drawableStart="#drawable/ic_person"
android:drawablePadding="20dp"
android:drawableTint="#color/gris_oscuro"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:paddingStart="20dp"
android:textColor="#color/white"
app:helperText="ddffef"
app:helperTextEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/createAccountSubTextView" />
</com.google.android.material.textfield.TextInputLayout>
This is the result
Result
Also i'm trying to remove the white border above the edittext but it's not possible, someone can help me?
Thanks in advance!!
Here is the code to reproduce content bellow (here is the doc)
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_small"
android:hint="Numéro de téléphone ou Email"
app:boxBackgroundColor="#color/grey_5"
app:boxCornerRadiusBottomEnd="#dimen/spacing_middle"
app:boxCornerRadiusBottomStart="#dimen/spacing_middle"
app:boxCornerRadiusTopEnd="#dimen/spacing_middle"
app:boxCornerRadiusTopStart="#dimen/spacing_middle"
app:boxStrokeWidth="1dp"
app:startIconDrawable="#drawable/ic_phone"
app:startIconTint="#color/grey_40"
app:helperText="Veuillez remplir ce champs"
app:placeholderTextColor="#color/grey_40">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
I am trying to create an animated TextInput layout for my login page but I cant't make it work.
below are the pictures of what I am trying to do:
image when you arrive on the login page:
when you start typing the email, the line length should decrease when email address is typed, the more you type the smaller the line became.
Here is the layout I have created but it's not working.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/email_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/transparent"
android:textAllCaps="true"
android:textColorHint="#color/gainsboro_00"
android:textColor="#color/gainsboro_00"
android:hint="#string/email">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/email_et"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:inputType="textEmailAddress"
android:textColor="#color/gainsboro_00"
android:background="#color/transparent"
android:minWidth="75dp"
android:textSize="14sp"
android:textAllCaps="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<View
android:id="#+id/email_line"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/checkered_gainsboro_background"
android:layout_marginEnd="45dp"
app:layout_constraintStart_toEndOf="#id/email_et"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.textfield.TextInputLayout>
Any idea how to achieve this? I think I am not far from the solution
Thanks
You don't need ConstraintLayout and View elements inside TextInputLayout.
Documentation is here: https://material.io/components/text-fields/android#using-text-fields
Material Design provides you instant EditText with Animation. You simply need to change the style of the TextInputLayout as shown below in the code.
Here is the code you can use as per your requirements.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/enter_your_email_id"
app:endIconMode="clear_text"
android:id="#+id/edtEmailID"
android:background="#color/colorWhite"
android:layout_below="#id/welcomeText"
app:endIconTint="#000"
android:layout_marginTop="25dp"
app:errorEnabled="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
app:hintTextColor="#000">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/editEmailIn"
android:inputType="text"
android:background="#color/colorWhite"
android:textColor="#000" />
</com.google.android.material.textfield.TextInputLayout>
Refer to Documentation for better exposure
In my application I want use TextInputLayout and I want set border for this view.
Such as this image : Image
I write below codes :
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/loginFrag_phoneInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_15mdp"
android:layout_marginLeft="#dimen/_15mdp"
android:layout_marginTop="#dimen/_15mdp"
android:layout_marginEnd="#dimen/_15mdp"
android:layout_marginRight="#dimen/_15mdp"
android:hint="#string/insertYourPhoneNumber"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/loginFrag_title">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/signInFrag_phoneEdt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:gravity="right|center_vertical"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:paddingLeft="#dimen/_10mdp"
android:paddingRight="#dimen/_10mdp"
android:singleLine="true"
android:textColorHint="#color/colorLightGray"
android:textSize="#dimen/_10mdp"
app:drawableRightCompat="#drawable/ic_phone" />
</com.google.android.material.textfield.TextInputLayout>
I added this line :
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
But when update material design library to v1.3 not show me any border!
'com.google.android.material:material:1.3.0'
But in v1.2 or v1.1 show me border and not any problem!
Why not show border in v1.3 ?
How can I fix it?
You have to remove the background android:background="#android:color/transparent" in the TextInputEditText.
Also don't use app:drawableRightCompat="#drawable/...." in the TextInputEditText but use:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:endIconDrawable="#drawable/..."
app:endIconMode="custom"
I am also using v 1.3.0 and getting correct border using below code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/loginFrag_phoneInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:hint="Phone Number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:startIconDrawable="#drawable/ic_action_phone"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/signInFrag_phoneEdt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:singleLine="true"/>
</com.google.android.material.textfield.TextInputLayout>
I am trying to set an icon in the end of a text input field just starting to use material design.
Here is the XML.
** </androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/resturantSearchPost"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:background="#drawable/rounded_corner_rectangle"
android:ems="10"
android:inputType="textPersonName"
android:textSize="24sp"
**app:endIconDrawable="#android:drawable/ic_menu_search"**
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2" />**
app:endIconDrrawable=.... doesn't work anywhere with any icon.
Any ideas?
You need to use it in TextInputLayout.
<com.google.android.material.textfield.TextInputLayout
app:endIconDrawable="#drawable/icon">
...TextInputEdittext
</com.google.android.material.textfield.TextInputLayout>
Example
<com.google.android.material.textfield.TextInputLayout
app:endIconDrawable="#drawable/icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/form_username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
use the app:endIconDrawable and app:endIconMode toghader.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:endIconDrawable="#drawable/ic_test"
app:endIconMode="custom">