Android Custom Password Entry EditTextLayout

  • 2021-10-13 08:49:09
  • OfStack

This article shares the specific code of Android custom password input for your reference, the specific contents are as follows

Layout


<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

  <ImageView
    android:id="@+id/delete"
    android:layout_width="30dp"
    android:layout_height="48dp"
    android:layout_gravity="center"
    android:scaleType="center"
    android:src="@drawable/ico_delete"/>

  <CheckBox
    android:id="@+id/ck_shift"
    android:layout_gravity="center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/pwd_selector"
    android:button="@null"/>
</merge>

Custom controls for password entry


/**
 * Created by showdy on 2017/3/15.
 * <p>
 * 1 Custom controls for password entry 
 */

public class PwdEditLayout extends LinearLayout implements TextWatcher, View.OnFocusChangeListener,
    View.OnClickListener, CompoundButton.OnCheckedChangeListener {
  private ImageView mDeleteIcon;
  private CheckBox mShiftIcon;
  private EditText mEditText;

  public PwdEditLayout(Context context) {
    this(context, null);
  }

  public PwdEditLayout(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public PwdEditLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    setOrientation(HORIZONTAL);
    setCustomBackground();
  }

  private void setCustomBackground() {
    GradientDrawable gd = new GradientDrawable();
    gd.setCornerRadius(TypedValue.applyDimension(COMPLEX_UNIT_DIP, 4, Resources.getSystem().getDisplayMetrics()));
    gd.setStroke((int) TypedValue.applyDimension(COMPLEX_UNIT_DIP, 1, Resources.getSystem().getDisplayMetrics()), Color.BLUE);
    if (Build.VERSION.SDK_INT < 16) {
      this.setBackgroundDrawable(gd);
    } else {
      this.setBackground(gd);
    }
  }


  /**
   * Called when a new child is aded to this ViewGroup. Overrides should always
   * call super.onViewAdded.
   *
   * @param child the added child view
   */
  @Override
  public void onViewAdded(View child) {
    super.onViewAdded(child);
    if (child instanceof EditText) {
      if (getChildCount() != 1) {
        throw new IllegalArgumentException("Only one EditText can be added in this layout.");
      }
      mEditText = (EditText) child;
      mEditText.setBackgroundColor(Color.TRANSPARENT);
      // Key point 1
      LayoutInflater.from(getContext()).inflate(R.layout.layout_edittext_pwd, this, true);
      mDeleteIcon = (ImageView) findViewById(R.id.delete);
      mShiftIcon = (CheckBox) findViewById(R.id.ck_shift);
      // Key point 2
      setAddStatesFromChildren(true); // Make the parent class get the same state as the child control 
      mEditText.addTextChangedListener(this);
      mEditText.setOnFocusChangeListener(this);
      mDeleteIcon.setOnClickListener(this);
      mShiftIcon.setOnCheckedChangeListener(this);
      // Set the default state --- Delete button and whether to display password 
      mShiftIcon.setChecked(false);
      updateDeleteIcon(mEditText.getText().toString(), mEditText.isFocused());
      updateShowPassword(mShiftIcon.isChecked());
    }
  }

  @Override
  public void beforeTextChanged(CharSequence s, int start, int count, int after) {

  }

  @Override
  public void onTextChanged(CharSequence s, int start, int before, int count) {
    updateDeleteIcon(s.toString(), mEditText.isFocused());
  }

  @Override
  public void afterTextChanged(Editable s) {

  }

  @Override
  public void onFocusChange(View v, boolean hasFocus) {
    updateDeleteIcon(mEditText.getText().toString(), hasFocus);
  }

  @Override
  public void onClick(View v) {
    switch (v.getId()) {
      case R.id.delete:
        mEditText.setText("");
        break;
    }
  }

  @Override
  public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    updateShowPassword(isChecked);
  }

  /**
   *  Used to display passwords or not 
   *
   * @param password
   * @param focused
   */
  private void updateDeleteIcon(String password, boolean focused) {
    if (!TextUtils.isEmpty(password) && focused) {
      mDeleteIcon.setVisibility(VISIBLE);
    } else {
      mDeleteIcon.setVisibility(INVISIBLE);
    }
  }

  /**
   *  Used to control whether passwords are displayed 
   *
   * @param checked
   */
  private void updateShowPassword(boolean checked) {
    if (checked) {
      mEditText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
    } else {
      mEditText.setTransformationMethod(PasswordTransformationMethod.getInstance());
    }
    mEditText.setSelection(mEditText.getText().toString().length());
  }

}

Related articles: