I am using material design 'com.google.android.material:material:1.3.0' in my Android app ( just to add password toggle for password field). I don't want other material features being included to my EditText.As you can see on the screenshot, green line appears when PasswordEditText is touched. How can i get it rid of and leave only password toggle among material design features?
I tried to use
app:boxBackgroundMode="none" app:boxStrokeWidth="0dp" app:boxStrokeWidthFocused="0dp" app:boxStrokeColor="#android:color/transparent"
to remove the line but it didn't help.
Here is XML of Material design EditText:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/editTextTextPersonName2"
android:layout_width="match_parent"
android:layout_marginTop="36dp"
android:layout_marginRight="46dp"
android:layout_marginLeft="46dp"
android:paddingLeft="5dp"
android:layout_height="wrap_content"
app:hintEnabled="false"
app:boxBackgroundMode="none"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:boxStrokeColor="#android:color/transparent"
android:ems="10"
android:background="#drawable/edit_text_background"
app:passwordToggleEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPersonName">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
app:textInputLayoutFocusedRectEnabled="false"
android:hint="Parol"
android:textSize="20sp"
android:drawableStart="#drawable/ic_baseline_security_24"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:inputType="textPassword"
android:drawablePadding="5dp"/>
</com.google.android.material.textfield.TextInputLayout>
Set android:background="#null in the TextInputEditText
Set app:boxStrokeWidth="0dp" in the TextInputLayout and that will hide the line (stroke).
Or you can change the line color to match with the edittext container background color as you want, set app:boxStrokeColor="#color/white" in the TextInputLayout
Related
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 have implemented a TextInputLayout with a password field in the usual way:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:layout_marginRight="30dp"
android:autofillHints="password"
android:background="#drawable/edit_text_border"
android:hint="#string/password"
android:inputType="textPassword"
android:textColor="#000000"
android:textColorHint="#9e9e9e" />
</com.google.android.material.textfield.TextInputLayout>
I have added this in the dependencies -
implementation 'com.google.android.material:material:1.1.0'
The visibility "eye- icon" is not yet visible. Is there anything that I missed or I did do sommething wrong?
Make sure to use a Material Components theme in your app and use a layout like:
<com.google.android.material.textfield.TextInputLayout
...
android:hint="#string/password"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
...
android:inputType="textPassword"
/>
</com.google.android.material.textfield.TextInputLayout>
As you are using an EditText please check the official doc:
Note: A text field is composed of a TextInputLayout and a TextInputEditText as a direct child. Using an EditText as the child might work, but TextInputEditText provides accessibility support for the text field and allows TextInputLayout greater control over the visual aspects of the input text. If an EditText is being used, make sure to set its android:background to #null so that TextInputLayout can set the proper background on it.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/pass"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Password"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
I'm creating a password field with custom background using TextInputLayout and AppCompatEditText. Before using Theme.MaterialComponents the the field was fine, but after using it, my AppCompatEditText start showing a line highlight at the bottom. I'm sure it is because of Material styling, but I couldn't figure out which attribute I can use to remove the line and I also not really sure whether it is on the TextInputLayout or the AppCompatEditText.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/passwordInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="6dp"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:background="#drawable/bg_input_border"
android:fontFamily="#font/opensans_regular"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:paddingLeft="10dp"
android:paddingTop="13dp"
android:paddingRight="10dp"
android:paddingBottom="13dp"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
You can set boxStrokeWidth value
<com.google.android.material.textfield.TextInputLayout
...
app:boxStrokeWidth="0dp"
...
or Programmatically
textInputLayout.setBoxStrokeWidth(0);
I'm using toggle password in my form, this is my code:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_pass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password"
style="#style/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_pass"
android:inputType="textPassword"
app:passwordToggleEnabled="true" />
</android.support.design.widget.TextInputLayout>
it works fine and shows the toggle button view in my EditText .
I just want to move the icon to the left side of edit text , How can I do so ?
You need to change direction of edit text, but it will change your direction of edit text it will start writing right to left.
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_pass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
android:layoutDirection="rtl"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password"
style="#style/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_pass"
android:inputType="textPassword"
app:passwordToggleEnabled="true" />
</android.support.design.widget.TextInputLayout>
also if you are using api version below 17 you need to add this attribute in your code
TextInputLayout input_layout_pass = (TextInputLayout) findViewById(R.id.input_layout_pass);
ViewCompat.setLayoutDirection(input_layout_pass, ViewCompat.LAYOUT_DIRECTION_RTL);
Check the docs for TextInputLayout:
Note: When using the password toggle functionality, the 'end' compound drawable of the EditText will be overridden while the toggle is enabled. To ensure that any existing drawables are restored correctly, you should set those compound drawables relatively (start/end), opposed to absolutely (left/right).
Based on this, you see that you can't change the position of the button without changing the text orientation in that field.
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.