Android] Entering text with EditText [Java/Kotlin].

This time, let's use EditText to enter text!

It is essential, for example, when entering login IDs and passwords in applications!

Now let's get started with the implementation.

Display EditText

First, display EditText for input!

Once EditText is displayed on the screen, the user can then tap EditText to enter text.

Now let's display EditText in layout XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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="match_parent">
    
    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Just display EditText and all that is left is for the user to tap to bring up the keyboard.

It's easy!

Display text in EditText from a class file

Text can also be entered and displayed in EditText from class files.

There are times when your login ID is already entered on the login screen, for example.

It is used when you want to make the original input.

// EditTextのインスタンスを取得
EditText editText = findViewById(R.id.editText);
// EditTextに文字を設定する
editText.setText("hogehoge");
// EditTextのインスタンスを取得
val editText = findViewById<EditText>(R.id.editText)
// EditTextに文字を設定する
editText.setText("hogehoge")

Explanation of setText()

argument typeDescription.
first parameterCharSequenceSet the string to be displayed in EditText

Display a hint in the EditText input field

Just displaying EditText leaves the user wondering, "What is EditText for?" and wonder, "What is EditText for?

To avoid this, display a hint in the input field!

This can be set from either layout XML or a class file!

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="ログインIDを入力"  <- EditTextにヒントを設定する
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />
// EditTextのインスタンスを取得
EditText editText = findViewById(R.id.editText);
// EditTextにヒントを設定する
editText.setHint("ログインIDを入力");
// EditTextのインスタンスを取得
val editText = findViewById<EditText>(R.id.editText)
// EditTextにヒントを設定する
editText.hint = "ログインIDを入力"

This will tell users what EditText is used for!

Explanation of setHint()

argument typeDescription.
first parameterCharSequenceSet the string to display if EditText is empty

Limit the number of characters that can be entered into EditText

There is almost no limit to the number of characters that can be entered by default.

To limit the number of characters, the maximum number of characters must be specified in EditText.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxLength="5"  <- EditTextに入力できる文字数を制限する
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />
// EditTextのインスタンスを取得
EditText editText = findViewById(R.id.editText);
// EditTextに入力できる文字数を制限する
editText.setFilters(new InputFilter[] { new InputFilter.LengthFilter(5) });
// EditTextのインスタンスを取得
val editText = findViewById<EditText>(R.id.editText)
// EditTextに入力できる文字数を制限する
editText.filters = arrayOf<InputFilter>(LengthFilter(5))

Explanation of android:maxLength

input typeDescription.
android:maxLengthIntSet the number of characters that can be entered to the specified Int value.

Explanation of setFilters()

argument typeDescription.
first parameterCharSequenceSet the string to be displayed in EditText

Mask characters entered into EditText

There are times when you may want to mask characters you have entered, such as passwords.

Use inputType if you want to mask it.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textPassword"  <- EditTextに入力した文字をマスクする
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />
// EditTextのインスタンスを取得
EditText editText = findViewById(R.id.editText);
// EditTextに入力した文字をマスクする
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
// EditTextのインスタンスを取得
val editText = findViewById<EditText>(R.id.editText)
// EditTextに入力した文字をマスクする
editText.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD

Explanation of android:inputType

argument typeDescription.
first parameterCharSequenceSet the string to be displayed in EditText

Description of inputType()

argument typeDescription.
first parameterCharSequenceSet the string to be displayed in EditText

Finally.

How was it?

EditText is basically an almost mandatory image for the application.

I will change the design of EditText in the next issue!

Comment

  1. [...] In the last issue, we summarized how to enter text in EditText. [...]

I copied the title and URL.