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.
Related
I'm trying to add a second endIcon to Material TextInputLayout like so:
But feels like it's almost impossible, I've already tried this solution but it's not working (at least for me).
Right now I've just a simple TextInputLayout with only one icon (toggle password), and I've no idea how to add a second one like at the screenshot above.
Do you have and advices?
Thanks:)
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed_password_label"
app:endIconMode="password_toggle"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
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
I want to set both errorEnabled and passwordToggleEnabled to true in a TextInputLayout, but it seems that these two can't coexist because the one covers the other like this.
I want to do this because I'm validating the password field to match a specific criteria and I want the user to be able to see both the error message and the password that's been typed in.
This is my code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:errorEnabled="true"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
Is it possible to move the passwordToggle-icon a bit to the left of the exclamation mark? Or do I have to create a custom drawable and use this instead of the passwordToggle-icon?
Try Setting setError() on TextInputLayout insead of TextInputEditText
xml
<android.support.design.widget.TextInputLayout
android:id="#+id/ti_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:errorEnabled="true"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
Code
if(password_input.getText().toString().equals(""))
ti_input.setError("Enter Password");
else
ti_input.setError(null);
This works for me. don't use setError() on the EditText, use TextInputLayout's setError()
I have an application that uses a lot of textinputlayouts because I like the style they create
on one screen I am showing info on one object and I want it too look like the data the user entered with the textinputedittexts , small caption above and the data below
right now I have a textinputlayout with a disabled textinputedittext below
is there a way to just have a textview under the textinputlayout that will be shown in the same style?
thanks in advance for any help you can provide
edit:
as a side note here's what I am currently using to disable the edittext fully
<android.support.design.widget.TextInputLayout
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/name"
tools:text="This is where the name goes"
android:inputType="none"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:focusableInTouchMode="false" />
what I am trying to avoid is not use clickable and inputtype etc etc in EVERY view that I'm trying to create, and instead use a single view
so other than creating a custom edittext (like NeverEnabledEditText) that starts unclickabke in every way, or add all those attributes to my xml, is there a way to do the above?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/date_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Date"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tv_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="none"
android:clickable="true"
android:focusable="false"
android:drawableEnd="#drawable/ic_keyboard_arrow_down_black_24dp"
android:paddingEnd="4dp"
android:paddingVertical="12dp"
android:drawablePadding="4dp"
android:textColor="#color/colorPrimary"
tools:text="00/00/0000" />
</com.google.android.material.textfield.TextInputLayout>
Although a TextInputEditText, now you have it acting like a textview because you can't edit it but can set text to it. You're welcome !
Is there a way to create an input field that looks like the ones on this image - Icon on the left, input on the right - using only the default TextInputLayout?
I've tried several combinations, and the icon always stays inside the TextInputEditText. I've tried changing the TextInputLayout orientation to horizontal but it didn't work as well. Is there anyway of doing this without placing an ImageView and an EditText inside of another ViewGroup?
Below is the code I used to create an input field, but with the icon remains inside the TextInputEditText.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Test"
>
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_bank_card_back_grey_24dp"
android:drawablePadding="#dimen/default_padding"
/>
</android.support.design.widget.TextInputLayout>
Does this fit the bill ? :
<android.support.design.widget.TextInputLayout
android:id="#+id/TextInputLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<android.support.v7.widget.AppCompatEditText
android:id="#+id/EditText1"
android:hint="code"
android:text="0044"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="phone"
android:minWidth="350dp"
android:drawableLeft="#drawable/cross"
android:drawableStart="#drawable/cross"
android:textColor="#00ff00"
android:textColorHint="#ff0000"
android:textCursorDrawable="#null"
/>
</android.support.design.widget.TextInputLayout>
image from code: