When the account password input box of the Android logon interface is selected, the background conversion is selected.

When the account password input box of the Android logon interface is selected, the background conversion is selected.

Follow finddreams, share and make together: http://blog.csdn.net/finddreams/article/details/45502277
We often see this effect when logging on online, that is, when we select an account or password input box, its background will change to a selected status, that is, there will be a gradient effect of the selected color around the input box. Such as the GitHub logon interface:
　　
In many cases, we also hope that our APP will have this effect. When you click the account and password input boxes, the selected status is displayed. How can this effect be achieved?
　　
In fact, to achieve this effect, the idea is very simple. You only need to create a background selector and configure different backgrounds in different States.
　　1. Create a bg_edittext_selector.xml background selector. The Code is as follows:
　　

2. Write the layout file and set the selector as the background of the input box. Code:

From the code, we can see that I used a LinearLayout with two child controls in horizontal arrangement, one being TextView, the other is the custom control ClearEditText with the clear function.
To achieve the selected effect, you need to set the selector bg_edittext_selector.xml as the background of the parent container LinearLayout.
But there is a small detail here. We know that the selector has many States, default states, selections, and focuses. The parent container here does not focus on and select the status. We only care about the account, whether the two input boxes of the password are selected, and the selected input boxes need to become the selected background. How can we associate the status of the subclass control with that of the parent container?
Here, the parent container control LinearLayout has a good property android: addStatesFromChildren = "true", which is described in Google's official Api as follows:
　
My English proficiency is limited. I only know that if the attribute is set to true, the drawable status of ViewGroup can be changed according to the focus status of the subclass control EditText or Button. In this way, they appear as a whole, and the status of the parent container changes with the Status of the Child control.
Finally, paste the ClearEditText code:
　

/*** @ Description: input box with the delete button * @ author http://blog.csdn.net/finddreams */public class ClearEditText extends EditText implements OnFocusChangeListener, TextWatcher {/*** references the delete button, images can be customized */private Drawable mClearDrawable; public static int SIZE = 0; public ClearEditText (Context context) {this (context, null);} public ClearEditText (Context context, attributeSet attrs) {// The constructor here is also very important. If this attribute is not added, no more X This (context, attrs, android. r. attr. editTextStyle);} public ClearEditText (Context context, AttributeSet attrs, int defStyle) {super (context, attrs, defStyle); init ();} private void init () {// obtain DrawableRight of EditText. if it is not set, use the default image mClearDrawable = getCompoundDrawables () [2]; if (mClearDrawable = null) {mClearDrawable = getResources (). getDrawable (R. drawable. progresscancelbtn);} mCl EarDrawable. setBounds (0, 0, mClearDrawable. getIntrinsicWidth () + SIZE, mClearDrawable. getIntrinsicHeight () + SIZE); setClearIconVisible (false); setOnFocusChangeListener (this); addTextChangedListener (this); // setClickable (false );} /*** because we cannot directly set click events for EditText, therefore, we use the place where we press it to simulate click events. When we press the position in the width of EditText-* The distance from the icon to the right of the control-the width of the icon and the width of EditText-the icon even if we click the icon between the spacing on the right side of the control, not considered in the vertical direction */@ Override public boo Lean onTouchEvent (MotionEvent event) {if (getCompoundDrawables () [2]! = Null) {if (event. getAction () = MotionEvent. ACTION_UP) {boolean touchable = event. getX ()> (getWidth ()-getPaddingRight ()-mClearDrawable. getIntrinsicWidth () & (event. getX () <(getWidth ()-getPaddingRight (); if (touchable) {this. setText ("") ;}} return super. onTouchEvent (event);}/*** when the ClearEditText focus changes, determine the display and hide of the clear icon in the string length settings */@ Override public void onFocusChange (View v, boo Lean hasFocus) {if (hasFocus) {setClearIconVisible (getText (). length ()> 0) ;}else {setClearIconVisible (false) ;}}/*** sets the display and hide of the clear icon, call setCompoundDrawables to draw EditText ** @ param visible */protected void setClearIconVisible (boolean visible) {Drawable right = visible? MClearDrawable: null; setCompoundDrawables (getCompoundDrawables () [0], getCompoundDrawables () [1], right, getCompoundDrawables () [3]);} /*** callback method when the content in the input box changes */@ Override public void onTextChanged (CharSequence s, int start, int count, int after) {setClearIconVisible (s. length ()> 0) ;}@ Override public void beforeTextChanged (CharSequence s, int start, int count, int after) {}@ Override public void afterTextChanged (Editable s) {}/*** set shaking animation */public void setShakeAnimation () {this. setAnimation (shakeAnimation (5);}/*** shake Animation ** @ param counts * How many shakes per second * @ return */public static Animation shakeAnimation (int counts) {Animation translateAnimation = new TranslateAnimation (0, 10, 0, 0); translateAnimation. setInterpolator (new CycleInterpolator (counts); translateAnimation. setDuration (1000); return translateAnimation ;}}