TextInputLayout: τι είναι, Material Design και ρύθμιση στο Android

Τι είναι το TextInputLayout στο Android

TextInputLayout — είναι ένα ViewGroup από το πακέτο com.google.android.material.textfield που επεκτείνει το LinearLayout και περιέχει ένα EditText στο εσωτερικό του. Το component αποτελεί μέρος της βιβλιοθήκης Material Components για Android, ξεκινώντας από την έκδοση 1.0.0. Η κύρια αποστολή του TextInputLayout είναι να παρέχει μια έτοιμη υλοποίηση των Material Design Text Fields με ελάχιστη προσπάθεια από τον προγραμματιστή.

Σε αντίθεση με το τυπικό EditText, το TextInputLayout διαχειρίζεται την κίνηση της αιωρούμενης ετικέτας, η οποία ορίζεται μέσω του χαρακτηριστικού android:hint του εσωτερικού EditText. Όταν το πεδίο είναι κενό, η ετικέτα εμφανίζεται μέσα στο πεδίο ως συνηθισμένη υπόδειξη. Μόλις ο χρήστης αρχίσει να πληκτρολογεί, η ετικέτα μετακινείται με κίνηση στο επάνω μέρος του πεδίου, μειώνοντας το μέγεθός της. Σύμφωνα με το Material Design Guidelines (2025), μια τέτοια κίνηση βελτιώνει την αντίληψη της φόρμας, επειδή ο χρήστης βλέπει πάντα το όνομα του πεδίου, ακόμη και μετά την εισαγωγή δεδομένων.

Αρχιτεκτονικά, το TextInputLayout υλοποιεί το πρότυπο διακοσμητής: παρεμβάλλεται στα γεγονότα του EditText, διαχειρίζεται την εμφάνιση πρόσθετων στοιχείων (ετικέτα, σφάλμα, εικονίδια, μετρητής) και συντονίζει την κίνησή τους. Το εσωτερικό EditText είναι προσβάσιμο μέσω της μεθόδου getEditText() και μπορεί να ρυθμιστεί με τυπικά χαρακτηριστικά, συμπεριλαμβανομένων των inputType, maxLines και hint.

<!-- Basic TextInputLayout markup -->
@+id/tilEmail
android:layout_width="match_parent"
android:layout_height="wrap_content">

    @+id/etEmail
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Email"
    android:inputType="textEmailAddress" />

</com.google.android.material.textfield.TextInputLayout>

Floating label και η ρύθμισή του

Floating label (αιωρούμενη ετικέτα) — είναι η βασική δυνατότητα του TextInputLayout. Όταν το πεδίο είναι κενό, το κείμενο από το android:hint εμφανίζεται μέσα στο EditText ως συνηθισμένη υπόδειξη. Κατά τη λήψη εστίασης ή κατά την εισαγωγή κειμένου, η ετικέτα ανυψώνεται στο επάνω μέρος του TextInputLayout, μειώνοντας το μέγεθος γραμματοσειράς και αλλάζοντας χρώμα. Αυτή η συμπεριφορά λύνει το πρόβλημα της αορατότητας της υπόδειξης μετά την έναρξη της πληκτρολόγησης.

Η ρύθμιση του floating label γίνεται μέσω χαρακτηριστικών του TextInputLayout: το app:hintEnabled καθορίζει εάν η αιωρούμενη ετικέτα είναι ενεργοποιημένη (προεπιλογή true), το app:hintAnimationEnabled ενεργοποιεί ή απενεργοποιεί την κίνηση μετάβασης, το app:expandedHintEnabled επιτρέπει την εμφάνιση της ετικέτας ακόμη και όταν το πεδίο είναι κενό και χωρίς εστίαση. Το χρώμα της ετικέτας σε διαφορετικές καταστάσεις διαχειρίζεται μέσω των στυλ colorPrimary και colorControlHighlight.

Σύμφωνα με την Google Material Components Team (2025), το floating label είναι ιδιαίτερα χρήσιμο σε φόρμες με πολλά πεδία, όπου ο χρήστης μπορεί να ξεχάσει το όνομα του πεδίου μετά την έναρξη της πληκτρολόγησης. Σε αντίθεση με το απλό android:hint που εξαφανίζεται κατά την πληκτρολόγηση, το floating label παραμένει πάντα ορατό, παρέχοντας πλαίσιο για κάθε πεδίο.

Εμφάνιση σφαλμάτων στο TextInputLayout

TextInputLayout παρέχει ένα ενσωματωμένο σύστημα εμφάνισης σφαλμάτων που είναι οπτικά ενσωματωμένο με το πεδίο εισαγωγής. Κατά τον ορισμό σφάλματος μέσω της μεθόδου error, το component τονίζει το πεδίο (το χρώμα της γραμμής ή του περιγράμματος αλλάζει σε κόκκινο) και εμφανίζει το κείμενο σφάλματος κάτω από το πεδίο. Αυτό αντικαθιστά την ανάγκη για ξεχωριστό TextView για μηνύματα σφάλματος.

Η διαχείριση της εμφάνισης σφαλμάτων γίνεται μέσω των μεθόδων setError(CharSequence) και setErrorEnabled(boolean). Κατά την κλήση του setError με κείμενο, το σφάλμα εμφανίζεται αμέσως· κατά την κλήση του setError(null) — κρύβεται. Το TextInputLayout υποστηρίζει επίσης προσαρμοσμένο εικονίδιο σφάλματος μέσω του χαρακτηριστικού app:errorIconDrawable και διαχείριση χρώματος σφάλματος μέσω του app:errorTextColor.

Σύμφωνα με το Material Design Guidelines (2025), τα μηνύματα σφάλματος πρέπει να είναι συγκεκριμένα και χρήσιμα: αντί για «Μη έγκυρη είσοδος» γράψτε «Το email πρέπει να περιέχει @». Η εμφάνιση σφάλματος πρέπει να γίνεται μετά την ολοκλήρωση της εισαγωγής (μετά την απώλεια εστίασης ή μετά την υποβολή της φόρμας), όχι σε πραγματικό χρόνο — αυτό μειώνει το άγχος του χρήστη κατά τη συμπλήρωση της φόρμας.

// Προγραμματιστική ρύθμιση σφάλματος
textInputLayout.error = "Password min 8 chars"

// Απόκρυψη σφάλματος
textInputLayout.error = null

// Έλεγχος και ρύθμιση σφάλματος επικύρωσης
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

Εικονίδια και ενέργειες TextInputLayout

TextInputLayout υποστηρίζει την εμφάνιση εικονιδίων τόσο στην αρχή του πεδίου (start icon) όσο και στο τέλος (end icon). Τα εικονίδια μπορούν να εκτελούν διάφορες λειτουργίες: αλλαγή ορατότητας κωδικού, εκκαθάριση πεδίου, προσαρμοσμένη ενέργεια. Κάθε τύπος εικονιδίου διαχειρίζεται από ξεχωριστό χαρακτηριστικό και μπορεί να αντικατασταθεί με προσαρμοσμένο εικονίδιο μέσω του χαρακτηριστικού app:startIconDrawable ή app:endIconDrawable.

End icon mode ορίζεται μέσω του χαρακτηριστικού app:endIconMode, το οποίο μπορεί να λάβει τιμές: password_toggle — εναλλαγή ορατότητας κωδικού, clear_text — εκκαθάριση πεδίου, dropdown_menu — βέλος για αναδυόμενο μενού, custom — προσαρμοσμένο εικονίδιο. Για το password_toggle, το TextInputLayout διαχειρίζεται αυτόματα την εναλλαγή του inputType μεταξύ textPassword και textVisiblePassword, και επίσης κινεί το εικονίδιο ματιού.

• password_toggle — εικονίδιο ματιού για εμφάνιση/απόκρυψη κωδικού, ενσωματωμένη κίνηση.
• clear_text — σταυρός για εκκαθάριση πεδίου, εμφανίζεται όταν υπάρχει κείμενο.
• dropdown_menu — βέλος για Exposed Dropdown Menu (Material Design 3).
• custom — οποιοδήποτε προσαρμοσμένο εικονίδιο με χειρισμό μέσω setEndIconOnClickListener.

<!-- TextInputLayout with password toggle icon -->
@+id/tilPassword
android:layout_width="match_parent"
app:endIconMode="password_toggle"
app:passwordToggleTint="@color/primary">

    @+id/etPassword
    android:inputType="textPassword" />

</com.google.android.material.textfield.TextInputLayout>

Στυλ TextInputLayout: FilledBox και OutlinedBox

Το Material Components για Android παρέχει δύο βασικά στυλ για TextInputLayout: FilledBox (γεμισμένο) και OutlinedBox (με περίγραμμα). Το στυλ FilledBox έχει χρωματιστό φόντο και γραμμή κάτω από το πεδίο που αλλάζει χρώμα κατά την εστίαση. Το στυλ OutlinedBox έχει διαφανές φόντο και περίγραμμα γύρω από ολόκληρο το πεδίο, δημιουργώντας πιο καθαρά όρια και ταιριάζει καλύτερα σε φόρμες με πολλά πεδία.

Η επιλογή στυλ εξαρτάται από το σχέδιο της εφαρμογής: FilledBox συνιστάται για φόρμες που χρησιμοποιούνται συχνά, καθώς προσελκύει λιγότερη προσοχή σε μεμονωμένα πεδία. OutlinedBox προτιμάται για σύντομες φόρμες (σύνδεση, εγγραφή), όπου κάθε πεδίο πρέπει να επισημαίνεται καθαρά. Το στυλ ορίζεται μέσω του χαρακτηριστικού style σε XML ή μέσω του θέματος της εφαρμογής.

Το Material Design 3 (M3) εισήγαγε ενημερωμένα στυλ για TextInputLayout με βελτιωμένη τυπογραφία, νέα διακριτικά χρώματος και υποστήριξη για δυναμικά χρώματα Material You. Στο M3, το OutlinedBox έγινε το προτεινόμενο προεπιλεγμένο στυλ, και το FilledBox προσάρμοσε τα διαστήματα και την ακτίνα στρογγυλοποίησης για να ταιριάζει με τη νέα προδιαγραφή.

Παραδείγματα κώδικα με TextInputLayout

Ένα πλήρες παράδειγμα υλοποίησης φόρμας εγγραφής με TextInputLayout, που περιλαμβάνει επικύρωση email και κωδικού, εμφάνιση σφαλμάτων και εικονίδιο εμφάνισης κωδικού. Όταν πατηθεί το κουμπί εγγραφής, όλα τα πεδία ελέγχονται και εμφανίζονται τα αντίστοιχα μηνύματα σφάλματος.

XML σήμανση της φόρμας εγγραφής

@+id/tilName
app:boxBackgroundMode="outlined">
    @+id/etName
    android:hint="Name" />
</...TextInputLayout>

@+id/tilRegEmail
app:boxBackgroundMode="outlined">
    @+id/etRegEmail
    android:hint="Email"
    android:inputType="textEmailAddress" />
</...TextInputLayout>

@+id/tilRegPassword
app:boxBackgroundMode="outlined"
app:endIconMode="password_toggle">
    @+id/etRegPassword
    android:hint="Password"
    android:inputType="textPassword" />
</...TextInputLayout>

Επικύρωση φόρμας σε Kotlin

private fun validateForm(): Boolean {
    var isValid = true

    if (etName.text.isNullOrBlank()) {
        tilName.error = "Enter your name"
        isValid = false
    } else {
        tilName.error = null
    }

    val email = etRegEmail.text.toString()
    if (!Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
        tilRegEmail.error = "Invalid email format"
        isValid = false
    } else {
        tilRegEmail.error = null
    }

    val password = etRegPassword.text.toString()
    if (password.length < 8) {
        tilRegPassword.error = "Password min 8 chars"
        isValid = false
    } else {
        tilRegPassword.error = null
    }

    return isValid
}