Develop Reference

TextEdit validation overlays show password icon

I have a password TextEdit field that im currently doing validation on and it displays an icon at the end of the TextEdit field to toggle the actual text. When someone enterted in a incorrect password or the passwords dont match it displays an error icon indicating that there was an error with the text entered and this error icon goes right underneath the "show text" icon for the TextEdit field. How do I move either the error icon from validation, or how do I move the "show text" icon?
app displaying both error icon and show text icon
RegisterActivity
public class RegisterActivity extends AppCompatActivity {
private static final String TAG = "RegisterActivity";
#InjectView(R.id.input_name) EditText _nameText;
#InjectView(R.id.input_email) EditText _emailText;
#InjectView(R.id.input_password) EditText _passwordText;
#InjectView(R.id.input_confirmPassword) EditText _confirmPasswordText;
#InjectView(R.id.btn_signup) Button _signupButton;
#InjectView(R.id.link_login) TextView _loginLink;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
ButterKnife.inject(this);
_signupButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
signup();
}
});
_loginLink.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Finish the registration screen and return to the Login activity
finish();
}
});
}
public void signup() {
Log.d(TAG, "Begin Signup process...");
if (!validate()) {
onSignupFailed();
return;
}
_signupButton.setEnabled(false);
final ProgressDialog signupProgressDialog = new ProgressDialog(RegisterActivity.this,
R.style.Theme_IAPTheme);
signupProgressDialog.setIndeterminate(true);
signupProgressDialog.setMessage("Creating Account...");
signupProgressDialog.show();
String name = _nameText.getText().toString();
String email = _emailText.getText().toString();
String password = _passwordText.getText().toString();
String confirmPassword = _confirmPasswordText.getText().toString();
// TODO: Implement your own signup logic here.
Response.Listener<String> responseListener = new Response.Listener<String>() {
#Override
public void onResponse(String response) {
try {
Log.i("tagconvertstr", "["+response+"]");
JSONObject jsonResponse = new JSONObject(response);
boolean success = jsonResponse.getBoolean("success");
if (success) {
onSignupSuccess();
} else {
onSignupFailed();
}
} catch (JSONException e) {
e.printStackTrace();
}
}
};
RegisterRequest registerRequest = new RegisterRequest(name, email, password, responseListener);
RequestQueue queue = Volley.newRequestQueue(RegisterActivity.this);
queue.add(registerRequest);
/*new android.os.Handler().postDelayed(
new Runnable() {
public void run() {
// On complete call either onSignupSuccess or onSignupFailed
// depending on success
onSignupSuccess();
// onSignupFailed();
progressDialog.dismiss();
}
}, 3000);*/
}
public void onSignupSuccess() {
Toast.makeText(getBaseContext(), "Signup Successful", Toast.LENGTH_LONG).show();
_signupButton.setEnabled(true);
setResult(RESULT_OK, null);
finish();
}
public void onSignupFailed() {
Toast.makeText(getBaseContext(), "Signup Failed", Toast.LENGTH_LONG).show();
_signupButton.setEnabled(true);
}
public boolean validate() {
boolean valid = true;
boolean psisequal;
String name = _nameText.getText().toString();
String email = _emailText.getText().toString();
String password = _passwordText.getText().toString();
String confirmPassword = _confirmPasswordText.getText().toString();
if (name.isEmpty() || name.length() < 3) {
_nameText.setError("at least 3 characters");
valid = false;
} else {
_nameText.setError(null);
}
if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
_emailText.setError("enter a valid email address");
valid = false;
} else {
_emailText.setError(null);
}
if (password.isEmpty() || password.length() < 4 || password.length() > 10) {
_passwordText.setError("between 4 and 10 alphanumeric characters");
valid = false;
}else {
_passwordText.setError(null);
}
if (password.equals(confirmPassword)){
_confirmPasswordText.setError(null);
psisequal = true;
}else {
_confirmPasswordText.setError("passwords do not match");
valid = false;
psisequal = false;
}
return valid;
}
}
activity_register
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true"
android:background="#color/black">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="56dp"
android:paddingLeft="24dp"
android:paddingRight="24dp">
<ImageView android:src="#drawable/logo"
android:layout_width="wrap_content"
android:layout_height="72dp"
android:layout_marginBottom="24dp"
android:layout_gravity="center_horizontal" />
<!-- Name Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
android:textColorHint="#ffffff">
<EditText android:id="#+id/input_name"
android:theme="#style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords"
android:hint="Trainer Name (Gamer Tag)" />
</android.support.design.widget.TextInputLayout>
<!-- Email Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
android:textColorHint="#ffffff">
<EditText android:id="#+id/input_email"
android:theme="#style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="E-Mail Address" />
</android.support.design.widget.TextInputLayout>
<!-- Password Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
android:textColorHint="#ffffff">
<EditText android:id="#+id/input_password"
android:theme="#style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Password"/>
</android.support.design.widget.TextInputLayout>
<!-- Confirm Password Label -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
android:textColorHint="#ffffff">
<EditText android:id="#+id/input_confirmPassword"
android:theme="#style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Confirm Password"/>
</android.support.design.widget.TextInputLayout>
<!-- Signup Button -->
<android.support.v7.widget.AppCompatButton
android:id="#+id/btn_signup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:padding="12dp"
android:text="Create Account"/>
<TextView android:id="#+id/link_login"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="Already a member? Login"
android:textColor="#ffffff"
android:gravity="center"
android:textSize="16dip"/>
</LinearLayout>
</ScrollView>
Strings
<resources xmlns:android="http://schemas.android.com/tools">
<string name="app_name">The World of Go</string>
<string name="title_activity_maps">Map</string>
<!--CODE FOR BUTTON OVERLAY-->
<string name="Popular"></string>
<string name="AZ"></string>
<string name="Category"></string>
<string name="NearBy"></string>
<color name="bg_color">#ffffff</color>
<color name="black">#222222</color>
<color name="white">#ffffff</color>
<style name="MyEditTextTheme">
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlActivated">#ffffff</item>
<item name="colorControlHighlight">#ffffff</item>
<item name="colorAccent">#android:color/white</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textColorHint">#ffffff</item> />
</style>
<string name="type_prompt">Choose a Type</string>
<string-array name="type_arrays">
<item>Pokestop</item>
<item>Gym</item>
</string-array>
</resources>

Try these methods to apply validation check:
private TextInputLayout text_email,text_pass, text_confirm_pass;
private EditText email,pass,confirm_pass;
text_pass = (TextInputLayout) findViewById(R.id.input_layout_password);
email = (EditText) findViewById(R.id.email);
private boolean validatePassword() {
if (pass.getText().toString().trim().isEmpty()) {
pass.setError(getString(R.string.err_msg_pass));
requestFocus(text_pass);
return false;
}else if(pass.getText().toString().length()<8) {
pass.setError(getString(R.string.err_msg_pass_length));
requestFocus(text_pass);
return false;
}else {
text_pass.setErrorEnabled(false);
}
return true;
}
To get focus :
private void requestFocus(View view) {
if (view.requestFocus()) {
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
}
}

Here is my solution
login xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/grey"
android:fillViewport="true">
<LinearLayout
android:id="#+id/login_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="5dp"
android:text="LOGIN"
android:textSize="25sp" />
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:textColor="#ffffff"
android:textColorHint="#ffffff">
<EditText
android:id="#+id/etUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Trainer Name (Gamer Tag)"
android:inputType="textCapWords"
android:padding="10dp"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:textColor="#ffffff"
android:textColorHint="#ffffff">
<EditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableRight="#drawable/ic_visibility_off_white_24dp"
android:hint="Password"
android:inputType="textPassword"
android:padding="10dp"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceMedium" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/btnSignIn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Sign In"
android:textColor="#android:color/white" />
</LinearLayout>
</RelativeLayout>
Login class
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btnLogin;
private EditText etUserName, etPassword;
private String userName, password;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initValues();
}
private void initValues() {
try {
btnLogin = (Button) findViewById(R.id.btnSignIn);
btnLogin.setOnClickListener(this);
etUserName = (EditText) findViewById(R.id.etUserName);
etPassword = (EditText) findViewById(R.id.etPassword);
etPassword.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
final int DRAWABLE_RIGHT = 2;
if (event.getAction() == MotionEvent.ACTION_DOWN) {
if (event.getRawX() >= (etPassword.getRight() - etPassword.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
if (etPassword.getInputType() == InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD) {
etPassword.setInputType(InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
etPassword.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_visibility_off_white_24dp, 0);
etPassword.setSelection(etPassword.getText().length());
} else {
etPassword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
etPassword.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ic_visibility_white_24dp, 0);
}
return true;
}
}
return false;
}
});
} catch (Exception e) {
e.printStackTrace();
}
}
#Override
public void onClick(View v) {
try {
switch (v.getId()) {
case R.id.btnSignIn:
validateCredentials();
onLogin();
break;
default:
break;
}
} catch (Exception e) {
e.printStackTrace();
}
}
private void validateCredentials() {
try {
userName = etUserName.getText().toString();
password = etPassword.getText().toString();
if (TextUtils.isEmpty(userName) || TextUtils.isEmpty(password)) {
etUserName.setError("enter a valid username");
etPassword.setError("enter a correct password");
return;
}
} catch (Exception e) {
e.printStackTrace();
}
}
public void onLogin() {
//your login implementation
}
}
Screenshots

So here is what I had to do to fix this. I disabled the standard text view of the textEdit by doing the following:
app:passwordToggleEnabled="false"
This will disable the view of the icon to toggle the password visibility. Then What I did was to add an imageView and added my own eye icon to the app:
<ImageView
android:id="#+id/imageView_registerPasswordVisibility"
android:layout_width="24dp"
android:layout_height="24dp"
android:clickable="true"
android:src="#drawable/eye"
android:layout_row="4"
android:layout_column="1"
android:foregroundGravity="center_vertical"
android:layout_gravity="center_vertical" />
I converted my layout to a grid layout and put this image view in the next column to align it to the end of the textEdit, the reason behind this is cause we now show the icon AFTER the textEdit instead of inside the textEdit which where the error validation icon will appear. Doing this will fix the conflict, I handled the imageView to do the same thing as passwordToggle. So here is the entire code for all of that which will also show how to set errors properly on the TextInputLayout if that is what you are using. If not then set errors as you would normally (can be found in standard android documentation):
RegisterActivity.java
public class RegisterActivity extends AppCompatActivity {
//Setup global variables for all of the user interface items.
#InjectView(R.id.wrapper_registerPassword)
TextInputLayout _registerPasswordWrapper; /*this is only needed for when you use TextInputLayout that gives us the ability to have animated hints by default. If you are ONLY using editText then you will not need the code for this wrapper.*/
#InjectView(R.id.editText_registerPasswordInput)
EditText _registerPasswordInput; /*This is to access text that was typed in the editText*/
#InjectView(R.id.imageView_registerPasswordVisibility)
ImageView _registerPasswordVisibility; /*This is used for our image that we will be adding listeners for to do speacial features when the image is pressed. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
ButterKnife.inject(this);
/*Set a listener for the password view image to display the text inside the password text
field for when the image is pressed.*/
_registerPasswordVisibility.setOnTouchListener(mPasswordVisibleTouchListener);
}
/*Listener for the toggle password icon.*/
private View.OnTouchListener mPasswordVisibleTouchListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
final boolean isOutsideView = event.getX() < 0 ||
event.getX() > v.getWidth() ||
event.getY() < 0 ||
event.getY() > v.getHeight();
// change input type will reset cursor position, so we want to save it
final int cursor = _registerPasswordInput.getSelectionStart();
if (isOutsideView || MotionEvent.ACTION_UP == event.getAction())
/*This will make the field display dots as a password text field should look like.*/
_registerPasswordInput.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
else
/*This will make the text in the password text field visibile while we are pressing down on our image.*/
_registerPasswordInput.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
_registerPasswordInput.setSelection(cursor);
return true;
}
};
public boolean validate() {
boolean valid = true;
//Obtain user's entered in credentials to validate them.
String password = _registerPasswordInput.getText().toString();
//Password validation.
if (password.isEmpty() || password.length() < 8 || password.length() > 30) {
_registerPasswordWrapper.setError("Please provide a stronger password.\n" +
"•Password must be the following:\n" +
"•At least 8 characters");
_registerPasswordWrapper.setErrorEnabled(true);
valid = false;
}else {
_registerPasswordWrapper.setError(null);
}
return valid;
}
}
activity_register.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android.support.design="http://schemas.android.com/tools"
android:fitsSystemWindows="true"
android:background="#color/black">
<!-- Start of Grid Layout -->
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="56dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:orientation="vertical">
<!-- Password Text Field -->
<android.support.design.widget.TextInputLayout
android:id="#+id/wrapper_registerPassword"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
app:passwordToggleEnabled="false"
android:textColorHint="#ffffff"
android:layout_column="0"
android:layout_row="4"
android:layout_gravity="fill_horizontal">
<android.support.design.widget.TextInputEditText
android:id="#+id/editText_registerPasswordInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="30"
android:inputType="textPassword"
android:hint="Password" />
</android.support.design.widget.TextInputLayout>
<!-- Password Toggle Icon for Password field -->
<ImageView
android:id="#+id/imageView_registerPasswordVisibility"
android:layout_width="24dp"
android:layout_height="24dp"
android:clickable="true"
android:src="#drawable/eye"
android:layout_row="4"
android:layout_column="1"
android:foregroundGravity="center_vertical"
android:layout_gravity="center_vertical" />
</GridLayout>
</ScrollView>
I hope this helps out some people, if anyone has anymore questions please let me know and ill help out to the best of my abilities!

If you're looking to only have one icon displayed this could do the trick.
Change the PasswordVisibilityToggleTintMode property.
You can hide the password toggle icon via:
setPasswordVisibilityToggleTintMode(PorterDuff.Mode.CLEAR)
Make it visible again via:
setPasswordVisibilityToggleTintMode(PorterDuff.Mode.MULTIPLY)

Please use app:endIconDrawable="#null" for TextInputLayout in your xml.

First, you need to wrap your edit text in an TextInputLayout.
Then, you should set the errorIconDrawable to null when you set the text error to something, so it won't override the toggle password icon.
Like this:
if (hasError) {
textInputLayout.error = "Error text"
textInputLayout.errorIconDrawable = null
}

It is easier to use:
TextInputLayout.isEndIconVisible
you can show or hide the Eye icon by setting it true or false.
for example when there is an error do this to hide the eye icon so the error icon is visible:
passwordTextInputLayout.isEndIconVisible = false
and then when the user starts typing again show it like this:
passTextView.afterTextChanged {
passwordTextInputLayout.isEndIconVisible = true
}

View value of password edittext while a button is pressed

How can I view the value of an edittext view whose input type is "password" when i click a button and when i release the button, the text display goes back to unreadable format? Like what microsoft does in windows 8 when you click the "eye" that is next to a password field.
Thanks

I found one of best solution for Design Support Library Users:
It is really easy to achieve with the newest Support Library v24.2.0.
What you need to do is just:
Add the design library to your dependencies
dependencies {
compile "com.android.support:design:24.2.0"
}
Use TextInputEditText in conjunction with TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="#+id/etPasswordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
android:layout_marginBottom="#dimen/login_spacing_bottom">
<android.support.design.widget.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/fragment_login_password_hint"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
The passwordToggleEnabled attribute will do the job!
In your root layout don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto"
You can customize your password toggle by using:
app:passwordToggleDrawable - Drawable to use as the password input visibility toggle icon.
app:passwordToggleTint - Icon to use for the password input visibility toggle.
app:passwordToggleTintMode - Blending mode used to apply the background tint.
More details in TextInputLayout documentation.

yourButton.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch ( event.getAction() ) {
case MotionEvent.ACTION_DOWN:
editText.setInputType(InputType.TYPE_CLASS_TEXT);
break;
case MotionEvent.ACTION_UP:
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
break;
}
return true;
}
});

I like the current answers! Just to complement, if you have a CheckBox it is (according to me) good practice to use its OnCheckedListener instead like below:
CheckBox box = (CheckBox)findViewById(R.id.dialog_checkBox_showPassword);
EditText password = (EditText) findViewById(R.id.dialog_editText_password);
box.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean checked) {
if(checked){
password.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
}
else{
password.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD | InputType.TYPE_CLASS_TEXT);
}
}
});

On pressed button, set passwordField.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);. When release the button, set passwordField.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD | InputType.TYPE_CLASS_TEXT );

This is what worked for me
dependencies {implementation 'com.google.android.material:material:1.2.1'}
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_register_password_confirm"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>

how do i implement an edittext with clear button at the end in android [duplicate]

Is there any widget like EditText which contains a cross button, or is there any property for EditText by which it is created automatically? I want the cross button to delete whatever text written in EditText.

Use the following layout:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:padding="5dp">
<EditText
android:id="#+id/calc_txt_Prise"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:layout_marginTop="20dp"
android:textSize="25dp"
android:textColor="#color/gray"
android:textStyle="bold"
android:hint="#string/calc_txt_Prise"
android:singleLine="true" />
<Button
android:id="#+id/calc_clear_txt_Prise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_gravity="right|center_vertical"
android:background="#drawable/delete" />
</FrameLayout>
You can also use the button's id and perform whatever action you want on its onClickListener method.

2020 solution via Material Design Components for Android:
Add Material Components to your gradle setup:
Look for latest version from here: https://maven.google.com/
implementation 'com.google.android.material:material:1.3.0'
or if you havent updated to using AndroidX libs, you can add it this way:
implementation 'com.android.support:design:28.0.0'
Then
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_text"
app:endIconMode="clear_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
Pay attention to: app:endIconMode="clear_text"
As discussed here Material design docs

If you happen to use DroidParts, I've just added ClearableEditText.
Here's what it looks like with a custom background & clear icon set to abs__ic_clear_holo_light from ActionBarSherlock:

This is a kotlin solution. Put this helper method in some kotlin file-
fun EditText.setupClearButtonWithAction() {
addTextChangedListener(object : TextWatcher {
override fun afterTextChanged(editable: Editable?) {
val clearIcon = if (editable?.isNotEmpty() == true) R.drawable.ic_clear else 0
setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
}
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
})
setOnTouchListener(View.OnTouchListener { _, event ->
if (event.action == MotionEvent.ACTION_UP) {
if (event.rawX >= (this.right - this.compoundPaddingRight)) {
this.setText("")
return#OnTouchListener true
}
}
return#OnTouchListener false
})
}
And then use it as following in the onCreate method and you should be good to go-
yourEditText.setupClearButtonWithAction()
BTW, you have to add R.drawable.ic_clear or the clear icon at first. This one is from google- https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aclear%3A

Android's support libarary has a SearchView class that does exactly this. (Not derrived from EditText though, so have to use a SearchView.OnQueryTextListener instead of a TextWatcher)
Use in XML like so:
<android.support.v7.widget.SearchView
android:id="#+id/searchView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:iconifiedByDefault="false"
android:queryHint="#string/SearchHint"
app:iconifiedByDefault="false"
app:queryHint="#string/SearchHint" />

Drawable x = getResources().getDrawable(R.drawable.x);
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
mEditText.setCompoundDrawables(null, null, x, null);
where, x is:

For drawable resource you can use standard android images :
web archive for http://androiddrawables.com/Menu.html
For example :
android:background="#android:drawable/ic_menu_close_clear_cancel"

If you don't want to use custom views or special layouts, you can use 9-patch to make the (X) button .
Example: http://postimg.org/image/tssjmt97p/ (I don't have enough points to post images on StackOverflow)
The intersection of the right and bottom black pixels represent the content area. Anything outside of that area is padding. So to detect that the user clicked on the x you can set a OnTouchListener like so:
editText.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_UP){
if (motionEvent.getX()>(view.getWidth()-view.getPaddingRight())){
((EditText)view).setText("");
}
}
return false;
}
});
According to your needs this solution can work better in some cases. I prefer to keep my xml less complicated. This also helps if you want to have an icon on the left, as you can simply include it in the 9 patch.

Just put close cross like drawableEnd in your EditText:
<EditText
...
android:drawableEnd="#drawable/ic_close"
android:drawablePadding="8dp"
... />
and use extension to handle click (or use OnTouchListener directly on your EditText):
fun EditText.onDrawableEndClick(action: () -> Unit) {
setOnTouchListener { v, event ->
if (event.action == MotionEvent.ACTION_UP) {
v as EditText
val end = if (v.resources.configuration.layoutDirection == View.LAYOUT_DIRECTION_RTL)
v.left else v.right
if (event.rawX >= (end - v.compoundPaddingEnd)) {
action.invoke()
return#setOnTouchListener true
}
}
return#setOnTouchListener false
}
}
extension usage:
editText.onDrawableEndClick {
// TODO clear action
etSearch.setText("")
}

Clear text:
"Text field with a clear text trailing icon."
If set, an icon is displayed when text is present and pressing it clears the input text.
...
app:endIconMode="clear_text">
​
...
​
</com.google.android.material.textfield.TextInputLayout>
I leave it here:
material.io
Example

I did the UI part like below:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginTop="9dp"
android:padding="5dp">
<EditText
android:id="#+id/etSearchToolbar"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textSize="13dp"
android:padding="10dp"
android:textColor="#android:color/darker_gray"
android:textStyle="normal"
android:hint="Search"
android:imeOptions="actionSearch"
android:inputType="text"
android:background="#drawable/edittext_bg"
android:maxLines="1" />
<ImageView
android:id="#+id/ivClearSearchText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="6dp"
android:src="#drawable/balloon_overlay_close"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
edittext_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_focused.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#C9C9CE" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
balloon_overlay_close.png
Cross/Clear button hide/show:
searchBox.addTextChangedListener(new TextWatcher() {
#Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
#Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
if(charSequence.length() > 0){
clearSearch.setVisibility(View.VISIBLE);
}else{
clearSearch.setVisibility(View.GONE);
}
}
#Override
public void afterTextChanged(Editable editable) {}
});
Handle search stuffs (i.e when user clicks search from soft key board)
searchBox.setOnEditorActionListener(new TextView.OnEditorActionListener() {
#Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_SEARCH) {
String contents = searchBox.getText().toString().trim();
if(contents.length() > 0){
//do search
}else{
//if something to do for empty edittext
}
return true;
}
return false;
}
});
Clear/Cross button
clearSearch.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
searchBox.setText("");
}
});

Here is complete library with the widget:
https://github.com/opprime/EditTextField
To use it you should add the dependency:
compile 'com.optimus:editTextField:0.2.0'
In the layout.xml file you can play with the widget settings:
xmlns:app="http://schemas.android.com/apk/res-auto"
app:clearButtonMode，can has such values:
never
always
whileEditing
unlessEditing
app:clearButtonDrawable
Sample in action:

Use
android:drawableRight="#android:drawable/ic_input_delete"

You can use this snippet with Jaydip answer for more than one button. just call it after getting a reference to the ET and Button Elements. I used vecotr button so you have to change the Button element to ImageButton:
private void setRemovableET(final EditText et, final ImageButton resetIB) {
et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus && et.getText().toString().length() > 0)
resetIB.setVisibility(View.VISIBLE);
else
resetIB.setVisibility(View.INVISIBLE);
}
});
resetIB.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
et.setText("");
resetIB.setVisibility(View.INVISIBLE);
}
});
et.addTextChangedListener(new TextWatcher() {
#Override
public void afterTextChanged(Editable s) {}
#Override
public void beforeTextChanged(CharSequence s, int start,
int count, int after) {
}
#Override
public void onTextChanged(CharSequence s, int start,
int before, int count) {
if(s.length() != 0){
resetIB.setVisibility(View.VISIBLE);
}else{
resetIB.setVisibility(View.INVISIBLE);
}
}
});
}

If you are in frame layout or you can create a frame layout I tried another approach....
<TextView
android:id="#+id/inputSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableRight="#drawable/ic_actionbar"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/back_button"/>
<Button
android:id="#+id/clear_text_invisible_button"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="right|center_vertical"
android:background="#color/transparent"
android:layout_alignBaseline="#+id/inputSearch"
android:layout_alignBottom="#+id/inputSearch"
android:layout_alignRight="#+id/inputSearch"
android:layout_alignEnd="#+id/inputSearch"
android:layout_marginRight="13dp"
/>
This is an edit text where I put a cross icon as a right drawable and than UPON it I put a transparent button which clears text.

<EditText
android:id="#+id/idSearchEditText"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_40dp"
android:drawableStart="#android:drawable/ic_menu_search"
android:drawablePadding="8dp"
android:ellipsize="start"
android:gravity="center_vertical"
android:hint="Search"
android:imeOptions="actionSearch"
android:inputType="text"
android:paddingStart="16dp"
android:paddingEnd="8dp"
/>
EditText mSearchEditText = findViewById(R.id.idSearchEditText);
mSearchEditText.addTextChangedListener(this);
mSearchEditText.setOnTouchListener(this);
#Override
public void afterTextChanged(Editable aEditable) {
int clearIcon = android.R.drawable.ic_notification_clear_all;
int searchIcon = android.R.drawable.ic_menu_search;
if (aEditable == null || TextUtils.isEmpty(aEditable.toString())) {
clearIcon = 0;
searchIcon = android.R.drawable.ic_menu_search;
} else {
clearIcon = android.R.drawable.ic_notification_clear_all;
searchIcon = 0;
}
Drawable leftDrawable = null;
if (searchIcon != 0) {
leftDrawable = getResources().getDrawable(searchIcon);
}
Drawable rightDrawable = null;
if (clearIcon != 0) {
rightDrawable = getResources().getDrawable(clearIcon);
}
mSearchEditText.setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, rightDrawable, null);
}
#Override
public boolean onTouch(View aView, MotionEvent aEvent) {
if (aEvent.getAction() == MotionEvent.ACTION_UP){
if (aEvent.getX() > ( mSearchEditText.getWidth() -
mSearchEditText.getCompoundPaddingEnd())){
mSearchEditText.setText("");
}
}
return false;
}

Here is the simple complete solution in kotlin.
This whole layout will be your search bar
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_margin="10dp"
android:background="#drawable/your_desired_drawable">
<EditText
android:id="#+id/search_et"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_toStartOf="#id/clear_btn"
android:background="#null"
android:hint="search..."
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLines="1"
android:paddingStart="15dp"
android:paddingEnd="10dp" />
<ImageView
android:id="#+id/clear_btn"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:layout_marginEnd="15dp"
android:visibility="gone"
android:src="#drawable/ic_baseline_clear_24"/>
</RelativeLayout>
Now this is the functionality of clear button, paste this code in onCreate method.
search_et.addTextChangedListener(object: TextWatcher {
override fun beforeTextChanged(s:CharSequence, start:Int, count:Int, after:Int) {
}
override fun onTextChanged(s:CharSequence, start:Int, before:Int, count:Int) {
}
override fun afterTextChanged(s: Editable) {
if (s.isNotEmpty()){
clear_btn.visibility = VISIBLE
clear_btn.setOnClickListener {
search_et.text.clear()
}
}else{
clear_btn.visibility = GONE
}
}
})

How to create EditText with cross(x) button at end of it?

Is there any widget like EditText which contains a cross button, or is there any property for EditText by which it is created automatically? I want the cross button to delete whatever text written in EditText.

Use the following layout:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:padding="5dp">
<EditText
android:id="#+id/calc_txt_Prise"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="numberDecimal"
android:layout_marginTop="20dp"
android:textSize="25dp"
android:textColor="#color/gray"
android:textStyle="bold"
android:hint="#string/calc_txt_Prise"
android:singleLine="true" />
<Button
android:id="#+id/calc_clear_txt_Prise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_gravity="right|center_vertical"
android:background="#drawable/delete" />
</FrameLayout>
You can also use the button's id and perform whatever action you want on its onClickListener method.

2020 solution via Material Design Components for Android:
Add Material Components to your gradle setup:
Look for latest version from here: https://maven.google.com/
implementation 'com.google.android.material:material:1.3.0'
or if you havent updated to using AndroidX libs, you can add it this way:
implementation 'com.android.support:design:28.0.0'
Then
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_text"
app:endIconMode="clear_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
Pay attention to: app:endIconMode="clear_text"
As discussed here Material design docs

If you happen to use DroidParts, I've just added ClearableEditText.
Here's what it looks like with a custom background & clear icon set to abs__ic_clear_holo_light from ActionBarSherlock:

This is a kotlin solution. Put this helper method in some kotlin file-
fun EditText.setupClearButtonWithAction() {
addTextChangedListener(object : TextWatcher {
override fun afterTextChanged(editable: Editable?) {
val clearIcon = if (editable?.isNotEmpty() == true) R.drawable.ic_clear else 0
setCompoundDrawablesWithIntrinsicBounds(0, 0, clearIcon, 0)
}
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) = Unit
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) = Unit
})
setOnTouchListener(View.OnTouchListener { _, event ->
if (event.action == MotionEvent.ACTION_UP) {
if (event.rawX >= (this.right - this.compoundPaddingRight)) {
this.setText("")
return#OnTouchListener true
}
}
return#OnTouchListener false
})
}
And then use it as following in the onCreate method and you should be good to go-
yourEditText.setupClearButtonWithAction()
BTW, you have to add R.drawable.ic_clear or the clear icon at first. This one is from google- https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Aclear%3A

Android's support libarary has a SearchView class that does exactly this. (Not derrived from EditText though, so have to use a SearchView.OnQueryTextListener instead of a TextWatcher)
Use in XML like so:
<android.support.v7.widget.SearchView
android:id="#+id/searchView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:iconifiedByDefault="false"
android:queryHint="#string/SearchHint"
app:iconifiedByDefault="false"
app:queryHint="#string/SearchHint" />

Drawable x = getResources().getDrawable(R.drawable.x);
x.setBounds(0, 0, x.getIntrinsicWidth(), x.getIntrinsicHeight());
mEditText.setCompoundDrawables(null, null, x, null);
where, x is:

For drawable resource you can use standard android images :
web archive for http://androiddrawables.com/Menu.html
For example :
android:background="#android:drawable/ic_menu_close_clear_cancel"

If you don't want to use custom views or special layouts, you can use 9-patch to make the (X) button .
Example: http://postimg.org/image/tssjmt97p/ (I don't have enough points to post images on StackOverflow)
The intersection of the right and bottom black pixels represent the content area. Anything outside of that area is padding. So to detect that the user clicked on the x you can set a OnTouchListener like so:
editText.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_UP){
if (motionEvent.getX()>(view.getWidth()-view.getPaddingRight())){
((EditText)view).setText("");
}
}
return false;
}
});
According to your needs this solution can work better in some cases. I prefer to keep my xml less complicated. This also helps if you want to have an icon on the left, as you can simply include it in the 9 patch.

Just put close cross like drawableEnd in your EditText:
<EditText
...
android:drawableEnd="#drawable/ic_close"
android:drawablePadding="8dp"
... />
and use extension to handle click (or use OnTouchListener directly on your EditText):
fun EditText.onDrawableEndClick(action: () -> Unit) {
setOnTouchListener { v, event ->
if (event.action == MotionEvent.ACTION_UP) {
v as EditText
val end = if (v.resources.configuration.layoutDirection == View.LAYOUT_DIRECTION_RTL)
v.left else v.right
if (event.rawX >= (end - v.compoundPaddingEnd)) {
action.invoke()
return#setOnTouchListener true
}
}
return#setOnTouchListener false
}
}
extension usage:
editText.onDrawableEndClick {
// TODO clear action
etSearch.setText("")
}

Clear text:
"Text field with a clear text trailing icon."
If set, an icon is displayed when text is present and pressing it clears the input text.
...
app:endIconMode="clear_text">
​
...
​
</com.google.android.material.textfield.TextInputLayout>
I leave it here:
material.io
Example

I did the UI part like below:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginTop="9dp"
android:padding="5dp">
<EditText
android:id="#+id/etSearchToolbar"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:textSize="13dp"
android:padding="10dp"
android:textColor="#android:color/darker_gray"
android:textStyle="normal"
android:hint="Search"
android:imeOptions="actionSearch"
android:inputType="text"
android:background="#drawable/edittext_bg"
android:maxLines="1" />
<ImageView
android:id="#+id/ivClearSearchText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="6dp"
android:src="#drawable/balloon_overlay_close"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
edittext_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_focused.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<stroke
android:width="1dp"
android:color="#C9C9CE" />
<corners
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp" />
</shape>
balloon_overlay_close.png
Cross/Clear button hide/show:
searchBox.addTextChangedListener(new TextWatcher() {
#Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {}
#Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
if(charSequence.length() > 0){
clearSearch.setVisibility(View.VISIBLE);
}else{
clearSearch.setVisibility(View.GONE);
}
}
#Override
public void afterTextChanged(Editable editable) {}
});
Handle search stuffs (i.e when user clicks search from soft key board)
searchBox.setOnEditorActionListener(new TextView.OnEditorActionListener() {
#Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_SEARCH) {
String contents = searchBox.getText().toString().trim();
if(contents.length() > 0){
//do search
}else{
//if something to do for empty edittext
}
return true;
}
return false;
}
});
Clear/Cross button
clearSearch.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
searchBox.setText("");
}
});

Here is complete library with the widget:
https://github.com/opprime/EditTextField
To use it you should add the dependency:
compile 'com.optimus:editTextField:0.2.0'
In the layout.xml file you can play with the widget settings:
xmlns:app="http://schemas.android.com/apk/res-auto"
app:clearButtonMode，can has such values:
never
always
whileEditing
unlessEditing
app:clearButtonDrawable
Sample in action:

Use
android:drawableRight="#android:drawable/ic_input_delete"

You can use this snippet with Jaydip answer for more than one button. just call it after getting a reference to the ET and Button Elements. I used vecotr button so you have to change the Button element to ImageButton:
private void setRemovableET(final EditText et, final ImageButton resetIB) {
et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View v, boolean hasFocus) {
if (hasFocus && et.getText().toString().length() > 0)
resetIB.setVisibility(View.VISIBLE);
else
resetIB.setVisibility(View.INVISIBLE);
}
});
resetIB.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
et.setText("");
resetIB.setVisibility(View.INVISIBLE);
}
});
et.addTextChangedListener(new TextWatcher() {
#Override
public void afterTextChanged(Editable s) {}
#Override
public void beforeTextChanged(CharSequence s, int start,
int count, int after) {
}
#Override
public void onTextChanged(CharSequence s, int start,
int before, int count) {
if(s.length() != 0){
resetIB.setVisibility(View.VISIBLE);
}else{
resetIB.setVisibility(View.INVISIBLE);
}
}
});
}

If you are in frame layout or you can create a frame layout I tried another approach....
<TextView
android:id="#+id/inputSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableRight="#drawable/ic_actionbar"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/back_button"/>
<Button
android:id="#+id/clear_text_invisible_button"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="right|center_vertical"
android:background="#color/transparent"
android:layout_alignBaseline="#+id/inputSearch"
android:layout_alignBottom="#+id/inputSearch"
android:layout_alignRight="#+id/inputSearch"
android:layout_alignEnd="#+id/inputSearch"
android:layout_marginRight="13dp"
/>
This is an edit text where I put a cross icon as a right drawable and than UPON it I put a transparent button which clears text.

<EditText
android:id="#+id/idSearchEditText"
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_40dp"
android:drawableStart="#android:drawable/ic_menu_search"
android:drawablePadding="8dp"
android:ellipsize="start"
android:gravity="center_vertical"
android:hint="Search"
android:imeOptions="actionSearch"
android:inputType="text"
android:paddingStart="16dp"
android:paddingEnd="8dp"
/>
EditText mSearchEditText = findViewById(R.id.idSearchEditText);
mSearchEditText.addTextChangedListener(this);
mSearchEditText.setOnTouchListener(this);
#Override
public void afterTextChanged(Editable aEditable) {
int clearIcon = android.R.drawable.ic_notification_clear_all;
int searchIcon = android.R.drawable.ic_menu_search;
if (aEditable == null || TextUtils.isEmpty(aEditable.toString())) {
clearIcon = 0;
searchIcon = android.R.drawable.ic_menu_search;
} else {
clearIcon = android.R.drawable.ic_notification_clear_all;
searchIcon = 0;
}
Drawable leftDrawable = null;
if (searchIcon != 0) {
leftDrawable = getResources().getDrawable(searchIcon);
}
Drawable rightDrawable = null;
if (clearIcon != 0) {
rightDrawable = getResources().getDrawable(clearIcon);
}
mSearchEditText.setCompoundDrawablesWithIntrinsicBounds(leftDrawable, null, rightDrawable, null);
}
#Override
public boolean onTouch(View aView, MotionEvent aEvent) {
if (aEvent.getAction() == MotionEvent.ACTION_UP){
if (aEvent.getX() > ( mSearchEditText.getWidth() -
mSearchEditText.getCompoundPaddingEnd())){
mSearchEditText.setText("");
}
}
return false;
}

Here is the simple complete solution in kotlin.
This whole layout will be your search bar
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_margin="10dp"
android:background="#drawable/your_desired_drawable">
<EditText
android:id="#+id/search_et"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_toStartOf="#id/clear_btn"
android:background="#null"
android:hint="search..."
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLines="1"
android:paddingStart="15dp"
android:paddingEnd="10dp" />
<ImageView
android:id="#+id/clear_btn"
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:layout_marginEnd="15dp"
android:visibility="gone"
android:src="#drawable/ic_baseline_clear_24"/>
</RelativeLayout>
Now this is the functionality of clear button, paste this code in onCreate method.
search_et.addTextChangedListener(object: TextWatcher {
override fun beforeTextChanged(s:CharSequence, start:Int, count:Int, after:Int) {
}
override fun onTextChanged(s:CharSequence, start:Int, before:Int, count:Int) {
}
override fun afterTextChanged(s: Editable) {
if (s.isNotEmpty()){
clear_btn.visibility = VISIBLE
clear_btn.setOnClickListener {
search_et.text.clear()
}
}else{
clear_btn.visibility = GONE
}
}
})

How to switch between hide and view password

Is there a clever way to let the user switch between hide and view password in an android EditText?
A number of PC based apps let the user do this.

It is really easy to achieve since the Support Library v24.2.0.
What you need to do is just:
Add the design library to your dependencies
dependencies {
compile "com.android.support:design:24.2.0"
}
Use TextInputEditText in conjunction with TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="#+id/etPasswordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
android:layout_marginBottom="#dimen/login_spacing_bottom">
<android.support.design.widget.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/fragment_login_password_hint"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
The passwordToggleEnabled attribute will do the job!
In your root layout don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto"
You can customize your password toggle by using:
app:passwordToggleDrawable - Drawable to use as the password input visibility toggle icon.
app:passwordToggleTint - Icon to use for the password input visibility toggle.
app:passwordToggleTintMode - Blending mode used to apply the background tint.
More details in TextInputLayout documentation.
For AndroidX
Replace android.support.design.widget.TextInputLayout with com.google.android.material.textfield.TextInputLayout
Replace android.support.design.widget.TextInputEditText with com.google.android.material.textfield.TextInputEditText

You can dynamically change the attributes of a TextView. If you would set the XML Atrribute android:password to true the view would show dots if you set it to false the text is shown.
With the method setTransformationMethod you should be able to change this attributes from code. (Disclaimer: I have not tested if the method still works after the view is displayed. If you encounter problems with that leave me a comment for me to know.)
The full sample code would be
yourTextView.setTransformationMethod(new PasswordTransformationMethod());
to hide the password. To show the password you could set one of the existing transformation methods or implement an empty TransformationMethod that does nothing with the input text.
yourTextView.setTransformationMethod(new DoNothingTransformation());

To show the dots instead of the password set the PasswordTransformationMethod:
yourEditText.setTransformationMethod(new PasswordTransformationMethod());
of course you can set this by default in your edittext element in the xml layout with
android:password
To re-show the readable password, just pass null as transformation method:
yourEditText.setTransformationMethod(null);

To show:
editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
To hide:
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
After each of these the cursor is reset, so:
editText.setSelection(editText.length());

You can use app:passwordToggleEnabled="true"
here is example given below
<android.support.design.widget.TextInputLayout
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
android:textColorHint="#color/colorhint"
android:textColor="#color/colortext">

I had the same issue and it is very easy to implement.
All you have to do is wrap your EditText field in a (com.google.android.material.textfield.TextInputLayout) and in that add ( app:passwordToggleEnabled="true" ).
This will show the eye in the EditText field and when you click on it the password will appear and disappear when clicked again.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColorHint="#B9B8B8"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/register_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginRight="44dp"
android:backgroundTint="#BEBEBE"
android:hint="Password"
android:inputType="textPassword"
android:padding="16dp"
android:textSize="18sp" />
</com.google.android.material.textfield.TextInputLayout>

Use checkbox and change the input type accordingly.
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
int start,end;
Log.i("inside checkbox chnge",""+isChecked);
if(!isChecked){
start=passWordEditText.getSelectionStart();
end=passWordEditText.getSelectionEnd();
passWordEditText.setTransformationMethod(new PasswordTransformationMethod());;
passWordEditText.setSelection(start,end);
}else{
start=passWordEditText.getSelectionStart();
end=passWordEditText.getSelectionEnd();
passWordEditText.setTransformationMethod(null);
passWordEditText.setSelection(start,end);
}
}

private boolean isPasswordVisible;
private TextInputEditText firstEditText;
...
firstEditText = findViewById(R.id.et_first);
...
private void togglePassVisability() {
if (isPasswordVisible) {
String pass = firstEditText.getText().toString();
firstEditText.setTransformationMethod(PasswordTransformationMethod.getInstance());
firstEditText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
firstEditText.setText(pass);
firstEditText.setSelection(pass.length());
} else {
String pass = firstEditText.getText().toString();
firstEditText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
firstEditText.setInputType(InputType.TYPE_CLASS_TEXT);
firstEditText.setText(pass);
firstEditText.setSelection(pass.length());
}
isPasswordVisible= !isPasswordVisible;
}

At first this is the screen loaded with an image vector asset visibility
on click it will change to this image visibility off
code for above password switch(xml code)
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/laypass"
android:layout_width="330dp"
android:layout_height="50dp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="#+id/editText3"
app:layout_constraintStart_toStartOf="#+id/editText3"
app:layout_constraintTop_toBottomOf="#+id/editText3">
<EditText
android:id="#+id/edit_password"
style="#style/EditTextTheme"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/round"
android:drawableLeft="#drawable/ic_password"
android:drawablePadding="10dp"
android:ems="10"
android:hint="Password"
android:inputType="textPassword"
android:paddingLeft="10dp"
android:paddingRight="15dp"
android:textColor="#color/cyan92a6"
android:textColorHint="#color/cyan92a6"
android:textCursorDrawable="#null"
android:textSize="18sp"
/>
<ImageView
android:id="#+id/show_pass_btn"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="8dp"
android:alpha=".5"
android:onClick="ShowHidePass"
android:padding="5dp"
android:src="#drawable/ic_visibility"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/laypass"
app:layout_constraintTop_toTopOf="#+id/edit_password" />
</androidx.constraintlayout.widget.ConstraintLayout>
Java code for button operation
public void ShowHidePass(View view) {
if(view.getId()==R.id.show_pass_btn){
if(edit_password.getTransformationMethod().equals(PasswordTransformationMethod.getInstance())){
((ImageView)(view)).setImageResource(R.drawable.ic_visibility_off);
//Show Password
edit_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
else{
((ImageView)(view)).setImageResource(R.drawable.ic_visibility);
//Hide Password
edit_password.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
}
}

It's work for me.This will help you definitely
showpass.setOnCheckedChangeListener(new OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(!isChecked){
// show password
password_login.setTransformationMethod(PasswordTransformationMethod.getInstance());
Log.i("checker", "true");
}
else{
Log.i("checker", "false");
// hide password
password_login.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
}
});

I feel I want answer this question even there some good answers ,
according to documentation TransformationMethod do our mission
TransformationMethod
TextView uses TransformationMethods to do things like replacing the
characters of passwords with dots, or keeping the newline characters
from causing line breaks in single-line text fields.
Notice I use butter knife, but its the same if user check show password
#OnCheckedChanged(R.id.showpass)
public void onChecked(boolean checked){
if(checked){
et_password.setTransformationMethod(null);
}else {
et_password.setTransformationMethod(new PasswordTransformationMethod());
}
// cursor reset his position so we need set position to the end of text
et_password.setSelection(et_password.getText().length());
}

I'm able to add the ShowPassword / HidePassword code with just a few lines, self-contained in a block:
protected void onCreate(Bundle savedInstanceState) {
...
etPassword = (EditText)findViewById(R.id.password);
etPassword.setTransformationMethod(new PasswordTransformationMethod()); // Hide password initially
checkBoxShowPwd = (CheckBox)findViewById(R.id.checkBoxShowPwd);
checkBoxShowPwd.setText(getString(R.string.label_show_password)); // Hide initially, but prompting "Show Password"
checkBoxShowPwd.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
if (isChecked) {
etPassword.setTransformationMethod(null); // Show password when box checked
checkBoxShowPwd.setText(getString(R.string.label_hide_password)); // Prompting "Hide Password"
} else {
etPassword.setTransformationMethod(new PasswordTransformationMethod()); // Hide password when box not checked
checkBoxShowPwd.setText(getString(R.string.label_show_password)); // Prompting "Show Password"
}
}
} );
...

In very simple form:
private fun updatePasswordVisibility(editText: AppCompatEditText) {
if (editText.transformationMethod is PasswordTransformationMethod) {
editText.transformationMethod = null
} else {
editText.transformationMethod = PasswordTransformationMethod()
}
editText.setSelection(editText.length())
}
Hope it helps.

private int passwordNotVisible=1;
#Override
protected void onCreate(Bundle savedInstanceState) {
showPassword = (ImageView) findViewById(R.id.show_password);
showPassword.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
EditText paswword = (EditText) findViewById(R.id.Password);
if (passwordNotVisible == 1) {
paswword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
passwordNotVisible = 0;
} else {
paswword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
passwordNotVisible = 1;
}
paswword.setSelection(paswword.length());
}
});
}

Try https://github.com/maksim88/PasswordEditText project at github.
You dont even need to change your Java code using it. Just change
EditText
tag to
com.maksim88.passwordedittext.PasswordEditText
in your XML file.

You can SHOW/HIDE password using this below code:
XML CODE:
<EditText
android:id="#+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="21dp"
android:layout_marginTop="14dp"
android:ems="10"
android:inputType="textPassword" >
<requestFocus />
</EditText>
<CheckBox
android:id="#+id/cbShowPwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/etPassword"
android:layout_below="#+id/etPassword"
android:text="#string/show_pwd" />
JAVA CODE:
EditText mEtPwd;
CheckBox mCbShowPwd;
mEtPwd = (EditText) findViewById(R.id.etPassword);
mCbShowPwd = (CheckBox) findViewById(R.id.cbShowPwd);
mCbShowPwd.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// checkbox status is changed from uncheck to checked.
if (!isChecked) {
// show password
mEtPwd.setTransformationMethod(PasswordTransformationMethod.getInstance());
} else {
// hide password
mEtPwd.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
}
});

Try this:
First define a flag as global like this:
private boolean isShowPassword = false;
And set listener to handle tap on show and hide password button:
imgPassword.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (isShowPassword) {
etPassword.setTransformationMethod(new PasswordTransformationMethod());
imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_hide));
isShowPassword = false;
}else{
etPassword.setTransformationMethod(null);
imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_show));
isShowPassword = true;
}
}
});

show and hide password Edit_Text with check Box
XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:inputType="textPassword"
android:id="#+id/edtPass"
android:textSize="20dp"
android:hint="password"
android:padding="20dp"
android:background="#efeaea"
android:layout_width="match_parent"
android:layout_margin="20dp"
android:layout_height="wrap_content" />
<CheckBox
android:background="#ff4"
android:layout_centerInParent="true"
android:textSize="25dp"
android:text="show password"
android:layout_below="#id/edtPass"
android:id="#+id/showPassword"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:gravity="top|right"
android:layout_height="wrap_content" />
</RelativeLayout>
java code
package com.example.root.sql2;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatCheckBox;
import android.support.v7.widget.Toolbar;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
public class password extends AppCompatActivity {
EditText password;
CheckBox show_hide_password;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.hide);
findViewById();
show_hide_pass();
}//end onCreate
public void show_hide_pass(){
show_hide_password.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if (!b){
// hide password
password.setTransformationMethod(PasswordTransformationMethod.getInstance());
}else{
// show password
password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
}
});
} // end show_hide_pass
public void findViewById(){ // find ids ui and
password = (EditText) findViewById(R.id.edtPass);
show_hide_password = (CheckBox) findViewById(R.id.showPassword);
}//end findViewById
}// end class

Did you try with setTransformationMethod? It's inherited from TextView and want a TransformationMethod as a parameter.
You can find more about TransformationMethods here.
It also has some cool features, like character replacing.

What I did was to
Create an edit text view and a normal text view
Make them overlap with each other by using constraint layout (just like Facebook app login screen)
Attach an onClickListener to the normal text view so that it changes the input type of the edit text view accordingly (Visible / Non-visible)
You may check out this video for a more detailed steps and explanations https://youtu.be/md3eVaRzdIM
Hope it helps :)

Here is my solution without using TextInputEditText and Transformation method.
XML
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
style="#style/FormLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/username" />
<EditText
android:id="#+id/loginUsername"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_person_outline_black_24dp"
android:drawableStart="#drawable/ic_person_outline_black_24dp"
android:inputType="textEmailAddress"
android:textColor="#color/black" />
<TextView
style="#style/FormLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/password" />
<EditText
android:id="#+id/loginPassword"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_visibility_off_black_24dp"
android:drawableLeft="#drawable/ic_lock_outline_black_24dp"
android:drawableRight="#drawable/ic_visibility_off_black_24dp"
android:drawableStart="#drawable/ic_lock_outline_black_24dp"
android:inputType="textPassword"
android:textColor="#color/black" />
</LinearLayout>
Java Code
boolean VISIBLE_PASSWORD = false; //declare as global variable befor onCreate()
loginPassword = (EditText)findViewById(R.id.loginPassword);
loginPassword.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
final int DRAWABLE_LEFT = 0;
final int DRAWABLE_TOP = 1;
final int DRAWABLE_RIGHT = 2;
final int DRAWABLE_BOTTOM = 3;
if (event.getAction() == MotionEvent.ACTION_UP) {
if (event.getRawX() >= (loginPassword.getRight() - loginPassword.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
// your action here
//Helper.toast(LoginActivity.this, "Toggle visibility");
if (VISIBLE_PASSWORD) {
VISIBLE_PASSWORD = false;
loginPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
loginPassword.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_lock_outline_black_24dp, 0, R.drawable.ic_visibility_off_black_24dp, 0);
} else {
VISIBLE_PASSWORD = true;
loginPassword.setInputType(InputType.TYPE_CLASS_TEXT);
loginPassword.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_lock_outline_black_24dp, 0, R.drawable.ic_visibility_black_24dp, 0);
}
return false;
}
}
return false;
}
});

According to this source, if you have migrated your project to AndroidX, then you can replace
compile "com.android.support:design:24.2.0"
with
implementation "com.google.android.material:material:1.0.0"
Then all you have to do is to put the code below to your layout file:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
android:hint="#string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
More information about material TextInputLayout can be found here.
To this source, it is recommended to migrate to AndroidX from Android Support Library:
AndroidX is the open-source project that the Android team uses to
develop, test, package, version and release libraries within Jetpack.
AndroidX is a major improvement to the original Android Support
Library. Like the Support Library, AndroidX ships separately from the
Android OS and provides backwards-compatibility across Android
releases. AndroidX fully replaces the Support Library by providing
feature parity and new libraries. In addition AndroidX includes the
following features:
All packages in AndroidX live in a consistent namespace starting with
the string androidx. The Support Library packages have been mapped
into corresponding androidx.* packages. For a full mapping of all the
old classes and build artifacts to the new ones, see the Package
Refactoring page.
Unlike the Support Library, AndroidX packages are separately
maintained and updated. The androidx packages use strict Semantic
Versioning starting with version 1.0.0. You can update AndroidX
libraries in your project independently.
All new Support Library development will occur in the AndroidX
library. This includes maintenance of the original Support Library
artifacts and introduction of new Jetpack components.

A good solution. Set up a button, then use this code:
public void showPassword(View v)
{
TextView showHideBtnText = (TextView) findViewById(R.id.textView1);
if(showHideBtnText.getText().toString().equals("Show Password")){
password.setTransformationMethod(null);
showHideBtnText.setText("Hide");
} else{
password.setTransformationMethod(new PasswordTransformationMethod());
showHideBtnText.setText("Show Password");
}
}

1 - Make a selector file "show_password_selector.xml"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pwd_hide"
android:state_selected="true"/>
<item android:drawable="#drawable/pwd_show"
android:state_selected="false" />
</selector>
2 - Aet "show_password_selector" file into imageview.
<ImageView
android:id="#+id/iv_pwd"
android:layout_width="#dimen/_35sdp"
android:layout_height="#dimen/_25sdp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/_15sdp"
android:src="#drawable/show_password_selector" />
3 - Put below code in java file.
iv_new_pwd.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (iv_new_pwd.isSelected()) {
iv_new_pwd.setSelected(false);
Log.d("mytag", "in case 1");
edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT);
} else {
Log.d("mytag", "in case 1");
iv_new_pwd.setSelected(true);
edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
}
}
});

You have to ask if the current text is already shown with dots, the function PasswordTransformationMethod.getInstance() allow you to do that.
This is my funtion in kotlin:
fun hideAndShowPassword(editText: EditText, indicator: ImageView) {
if (editText.transformationMethod == PasswordTransformationMethod.getInstance()) {
editText.transformationMethod = HideReturnsTransformationMethod.getInstance()
indicator.setImageDrawable(
ContextCompat.getDrawable(
editText.context,
R.drawable.eye
)
)
indicator.imageTintList =
ContextCompat.getColorStateList(editText.context, R.color.colorTintIcons)
} else {
editText.transformationMethod = PasswordTransformationMethod.getInstance()
indicator.setImageDrawable(
ContextCompat.getDrawable(
editText.context,
R.drawable.eye_off
)
)
indicator.imageTintList =
ContextCompat.getColorStateList(editText.context, R.color.colorTintIcons)
}
editText.setSelection(editText.text.length)
}

It seems that input_layout.isPasswordVisibilityToggleEnabled = true is deprecated. And in my case I did it that way in Kotlin:
input_edit_text.inputType = TYPE_CLASS_TEXT or TYPE_TEXT_VARIATION_PASSWORD
input_layout.endIconMode = END_ICON_PASSWORD_TOGGLE
Where input_edit_text is com.google.android.material.textfield.TextInputEditText and input_layout is com.google.android.material.textfield.TextInputLayout. Of course you should import these asl well:
import android.text.InputType.TYPE_CLASS_TEXT
import android.text.InputType.TYPE_TEXT_VARIATION_PASSWORD
import com.google.android.material.textfield.TextInputLayout.END_ICON_PASSWORD_TOGGLE
My may customize the icon with provided methods as these:
input_layout.endIconDrawable = ...
input_layout.setEndIconOnClickListener { }
input_layout.setEndIconOnLongClickListener(...)

I used a OnClickListener() which is associated to the button that I want to use as toogle.
private EditText email_et, contraseña_et;
protected void onCreate(Bundle savedInstanceState) {
....
contraseña_et = (EditText) findViewById(R.id.contraseña_et);
....
vercontra_btn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
int inputType = contraseña_et.getInputType();
if (inputType == 129){
contraseña_et.setInputType(1);
} else {
contraseña_et.setInputType(129);
}
contraseña_et.setSelection(contraseña_et.getText().length());
}
});
Reading docs, the int value seems to be different so I debugged to find the correct values, it's working awesome and is a little bit easier this way.
[Contraseña is password in spanish, btw]

In XML do like this
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical"
>
<RelativeLayout
android:id="#+id/REFReLayTellFriend"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<EditText
android:id="#+id/etpass1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:bottomLeftRadius="10dp"
android:bottomRightRadius="50dp"
android:fontFamily="#font/frutiger"
android:gravity="start"
android:inputType="textPassword"
android:hint="#string/regpass_pass1"
android:padding="20dp"
android:paddingBottom="10dp"
android:textColor="#000000"
android:textColorHint="#d3d3d3"
android:textSize="14sp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
<ImageButton
android:id="#+id/imgshowhide1"
android:layout_width="40dp"
android:layout_height="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="10dp"
android:background="#drawable/showpass"
android:layout_alignRight="#+id/etpass1"/>
</RelativeLayout>
boolean show=true;
//on image click inside password do this
if(show){
imgshowhide2.setBackgroundResource(0);
imgshowhide2.setBackgroundResource(R.drawable.hide);
etpass2.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
etpass2.setSelection(etpass2.getText().length());
show=false;
}else{
imgshowhide2.setBackgroundResource(0);
imgshowhide2.setBackgroundResource(R.drawable.showpass);
//etpass1.setInputType(InputType.TYPE_TEXT);
etpass2.setInputType(InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
etpass2.setSelection(etpass2.getText().length());
show=true;
}

My Kotlin extension . write once use everywhere
fun EditText.tooglePassWord() {
this.tag = !((this.tag ?: false) as Boolean)
this.inputType = if (this.tag as Boolean)
InputType.TYPE_TEXT_VARIATION_PASSWORD
else
(InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD)
this.setSelection(this.length()) }
You can keep this method in any file and use it everywhere
use it like this
ivShowPassword.click { etPassword.tooglePassWord() }
where ivShowPassword is clicked imageview (eye) and etPassword is Editext

Add this method:
fun EditText.revertTransformation() {
transformationMethod = when(transformationMethod) {
is PasswordTransformationMethod -> SingleLineTransformationMethod.getInstance()
else -> PasswordTransformationMethod.getInstance()
}
}
Call it will switch between input type state (you may change the Single-Line transformation to your favorite). Usage example:
editText.revertTransformation()