Easy Tutorial
❮ Java Inner Class Intro Java Protected Keyword Detailed Explanation ❯

2.3.2 Detailed Explanation of EditText (Input Box)

Category Android Basic Tutorial

Introduction to This Section:

In the previous section, we learned about the first UI control TextView (Text Box), and the article provided many solutions to needs that may be encountered in actual development, which should bring convenience to your development. In this section, let's learn about the second commonly used control EditText (Input Box); it is very similar to TextView, the biggest difference is: EditText can accept user input! As before, we will not discuss properties one by one, but focus on practical application, you can check the API documentation for properties: API Documentation; let's start the content of this section!


1. Setting Default Hint Text

As shown in the figure below, you are no stranger to this user login interface, right? We often use this kind of interface.

Compared to the other one, how about this one below?

Not bad, right? Of course, the layout will not be pasted here, only the two control attributes for the default hint text are introduced:

The two attributes for the default hint text are as follows:

android:hint="Default Hint Text"
android:textColorHint="#95A1AA"

The former sets the content of the hint text, and the latter sets the color of the hint text!


2. Select All Text Content in the Component After Focus

When we want to click on the input box to get the focus, not to move the cursor to the beginning or end of the text; but to get all the text content in the input box! At this time, we can use the selectAllOnFocus attribute

android:selectAllOnFocus="true"

For example, the following is the effect diagram: The first one has set this attribute, and the second one has not set this attribute. The EditText set to true will select all the text after getting the focus!


3. Limit the Input Type of EditText

Sometimes we may need to limit the input data, such as when entering a phone number, if you enter a string of letters, this is obviously not what we expected, and the input type can be limited through the inputType attribute!

For example, limit it to only phone numbers, passwords (textPassword):

<EditText   
        android:layout_width="fill_parent"   
        android:layout_height="wrap_content"   
        android:inputType="phone" />

Optional parameters are as follows:

Text types, mostly uppercase, lowercase, and numeric symbols

android:inputType="none"  
android:inputType="text"  
android:inputType="textCapCharacters"  
android:inputType="textCapWords"  
android:inputType="textCapSentences"  
android:inputType="textAutoCorrect"  
android:inputType="textAutoComplete"  
android:inputType="textMultiLine"  
android:inputType="textImeMultiLine"  
android:inputType="textNoSuggestions"  
android:inputType="textUri"  
android:inputType="textEmailAddress"  
android:inputType="textEmailSubject"  
android:inputType="textShortMessage"  
android:inputType="textLongMessage"  
android:inputType="textPersonName"  
android:inputType="textPostalAddress"  
android:inputType="textPassword"  
android:inputType="textVisiblePassword"  
android:inputType="textWebEditText"  
android:inputType="textFilter"  
android:inputType="textPhonetic"

Numeric types

android:inputType="number"  
android:inputType="numberSigned"  
android:inputType="numberDecimal"  
android:inputType="phone"//Dial pad  
android:inputType="datetime"  
android:inputType="date"//Date pad  
android:inputType="time"//Time pad

4. Set Minimum Lines, Maximum Lines, Single Line, Multi-Line, Auto Wrap

EditText is displayed in multiple lines by default and can automatically wrap, that is, when a line is not displayed, it will automatically switch to the second line.

>

We can limit it, for example, android:minLines="3" android:maxLines="3"

In addition, many times we may want to limit EditText to only allow single-line input and not scroll, such as the above login interface example, we only need to set

android:singleLine="true"

to achieve single-line input without wrapping


5. Set Text Spacing, Set English

This is an English translation of the provided Chinese text. Please find the translation below:


PS: By the way, don't forget to add a picture!


10. EditText with Delete Button

We often see on the input interface of the App:

The implementation code is as follows:

public class EditTextWithDel extends EditText {

    private final static String TAG = "EditTextWithDel";
    private Drawable imgInable;
    private Drawable imgAble;
    private Context mContext;

    public EditTextWithDel(Context context) {
        super(context);
        mContext = context;
        init();
    }

    public EditTextWithDel(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        init();
    }

    public EditTextWithDel(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        init();
    }

    private void init() {
        imgInable = mContext.getResources().getDrawable(R.drawable.delete_gray);
        addTextChangedListener(new TextWatcher() {
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

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

            @Override
            public void afterTextChanged(Editable s) {
                setDrawable();
            }
        });
        setDrawable();
    }

    // Set the delete image
    private void setDrawable() {
        if (length() < 1)
            setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
        else
            setCompoundDrawablesWithIntrinsicBounds(null, null, imgInable, null);
    }

    // Handle the delete event
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (imgInable != null && event.getAction() == MotionEvent.ACTION_UP) {
            int eventX = (int) event.getRawX();
            int eventY = (int) event.getRawY();
            Log.e(TAG, "eventX = " + eventX + "; eventY = " + eventY);
            Rect rect = new Rect();
            getGlobalVisibleRect(rect);
            rect.left = rect.right - 100;
            if (rect.contains(eventX, eventY))
                setText("");
        }
        return super.onTouchEvent(event);
    }
    @Override
    protected void finalize() throws Throwable {
        super.finalize();
    }
}

Summary of This Section:

>

This section introduced the EditText (input box) control in Android UI controls. There are many ways to use it, of course, the above situation certainly cannot meet the actual needs. In actual development, we may need to customize the EditText according to our own needs! Of course, this involves the topic of custom controls, which is a bit more advanced. In the advanced part, we will provide a detailed explanation of custom controls in Android! Now you can just use it.

❮ Java Inner Class Intro Java Protected Keyword Detailed Explanation ❯