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>
Related
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>
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">
I have three TextInputLayouts with OutlineBox style in a ConstraintLayout as below. In the activity onCreate I need to don't show the last one so I set its visibility to GONE with this piece of code (I'm using Kotlin): etCompanyName.visibility = View.GONE. But a narrow line still remains in the layout as you see in the picture. What can I do to disappear the TextInputLayout properly?
<android.support.design.widget.TextInputLayout
android:id="#+id/tilFirstName"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:id="#+id/etFirstName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_first_name" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/tilLastName"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tilFirstName">
<android.support.design.widget.TextInputEditText
android:id="#+id/etLastName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_last_name" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/tilCompanyName"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tilLastName">
<android.support.design.widget.TextInputEditText
android:id="#+id/etCompanyName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_company_name" />
</android.support.design.widget.TextInputLayout>
Try setting the visibility: gone property to text input layout element instead of editText.
tilCompanyName.visibility = View.GONE