TextInputLayout: nedir, Material Design ve Android'de kurulumu

Android'de TextInputLayout Nedir

TextInputLayout, com.google.android.material.textfield paketinden LinearLayout'u genişleten ve içinde bir EditText barındıran bir ViewGroup'tür. Bileşen, 1.0.0 sürümünden itibaren Android için Material Components kütüphanesinin bir parçasıdır. TextInputLayout'un ana amacı, geliştiricinin minimum çabasıyla Material Design Metin Alanlarının hazır bir uygulamasını sağlamaktır.

Standart bir EditText'in aksine, TextInputLayout, iç EditText'in android:hint özniteliği aracılığıyla ayarlanan kayan etiketin animasyonunu yönetir. Alan boş olduğunda, etiket normal bir ipucu olarak alanın içinde görüntülenir. Kullanıcı yazmaya başlar başlamaz, etiket animasyonlu bir şekilde alanın üst kısmına hareket eder ve boyutu küçülür. Material Design Guidelines (2025)'e göre, bu animasyon form algısını iyileştirir çünkü kullanıcı veri girdikten sonra bile alan adını her zaman görür.

Mimari olarak, TextInputLayout dekoratör desenini uygular: EditText olaylarını yakalar, ek öğelerin (etiket, hata, simgeler, sayaç) görüntülenmesini yönetir ve animasyonlarını koordine eder. İç EditText, getEditText() yöntemiyle erişilebilir ve inputType, maxLines ve hint dahil standart özniteliklerle yapılandırılabilir.

<!-- 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>

Kayan Etiket ve Yapılandırması

Kayan etiket (floating label), TextInputLayout'un temel özelliğidir. Alan boş olduğunda, android:hint metni EditText içinde normal bir yer tutucu olarak görüntülenir. Alan odak aldığında veya metin girildiğinde, etiket TextInputLayout'un üst kısmına yükselir, yazı tipi boyutunu küçültür ve rengi değiştirir. Bu davranış, kullanıcı yazmaya başladıktan sonra ipucunun görünmez olması sorununu çözer.

Kayan etiket yapılandırması TextInputLayout öznitelikleri aracılığıyla yapılır: app:hintEnabled kayan etiketin etkin olup olmadığını belirler (varsayılan true), app:hintAnimationEnabled geçiş animasyonunu etkinleştirir veya devre dışı bırakır, app:expandedHintEnabled alan boş ve odaksız olsa bile etiketin görüntülenmesine izin verir. Farklı durumlarda etiketin rengi, colorPrimary ve colorControlHighlight stilleri aracılığıyla yönetilir.

Google Material Components Ekibi (2025)'ne göre, kayan etiket, kullanıcının yazmaya başladıktan sonra alan adını unutabileceği çok sayıda alan içeren formlarda özellikle kullanışlıdır. Girişte kaybolan basit bir android:hint'in aksine, kayan etiket her zaman görünür kalır ve her alan için bağlam sağlar.

TextInputLayout'ta Hata Görüntüleme

TextInputLayout, giriş alanıyla görsel olarak entegre olan yerleşik bir hata görüntüleme sistemi sağlar. setError yöntemiyle bir hata ayarlandığında, bileşen alanı vurgular (çizgi veya anahattın rengi kırmızıya döner) ve alanın altında hata metnini görüntüler. Bu, hata mesajları için ayrı bir TextView ihtiyacını ortadan kaldırır.

Hata görüntüleme yönetimi setError(CharSequence) ve setErrorEnabled(boolean) yöntemleri aracılığıyla yapılır. setError metinle çağrıldığında hata hemen görüntülenir; setError(null) çağrıldığında gizlenir. TextInputLayout ayrıca app:errorIconDrawable özniteliği aracılığıyla özel hata simgesini ve app:errorTextColor aracılığıyla hata rengi yönetimini destekler.

Material Design Guidelines (2025)'e göre, hata mesajları spesifik ve yardımcı olmalıdır: “Geçersiz giriş” yerine “E-posta @ içermelidir” yazın. Hata görüntüleme, giriş tamamlandıktan sonra (odak kaybında veya form gönderiminden sonra) gerçekleşmelidir, gerçek zamanlı olarak değil — bu, form doldururken kullanıcının stresini azaltır.

// Programatik hata kurulumu
textInputLayout.error = "Password min 8 chars"

// Hata gizleme
textInputLayout.error = null

// Doğrulama hatası kontrolü ve ayarı
if (email.isNullOrBlank()) {
    tilEmail.error = "Email is required"
} else {
    tilEmail.error = null
}

TextInputLayout'ta Simgeler ve Eylemler

TextInputLayout, alanın başında (başlangıç simgesi) ve sonunda (bitiş simgesi) simge görüntülemeyi destekler. Simgeler çeşitli işlevleri yerine getirebilir: şifre görünürlüğünü değiştirme, alanı temizleme, özel eylemler. Her simge türü ayrı bir öznitelik tarafından kontrol edilir ve app:startIconDrawable veya app:endIconDrawable özniteliği aracılığıyla özel bir simgeyle değiştirilebilir.

Bitiş simgesi modu, app:endIconMode özniteliği aracılığıyla ayarlanır ve şu değerleri alabilir: password_toggle — şifre görünürlüğünü değiştirme, clear_text — alanı temizleme, dropdown_menu — açılır liste için ok, custom — özel simge. password_toggle için TextInputLayout, inputType'ı textPassword ve textVisiblePassword arasında otomatik olarak değiştirir ve ayrıca göz simgesini canlandırır.

• password_toggle — şifreyi göstermek/gizlemek için göz simgesi, yerleşik animasyon.
• clear_text — alanı temizlemek için çarpı simgesi, metin varken görünür.
• dropdown_menu — Exposed Dropdown Menu (Material Design 3) için ok.
• custom — setEndIconOnClickListener aracılığıyla işleyiciye sahip herhangi bir özel simge.

<!-- 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 Stilleri: FilledBox ve OutlinedBox

Android için Material Components, TextInputLayout için iki ana stil sağlar: FilledBox (dolu) ve OutlinedBox (anahath). FilledBox stili, renkli bir arka plana ve odaklandığında renk değiştiren alanın altında bir çizgiye sahiptir. OutlinedBox stili, şeffaf bir arka plana ve tüm alanın etrafında bir anahatha sahiptir, bu da daha net sınırlar oluşturur ve çok sayıda alan içeren formlar için daha uygundur.

Stil seçimi uygulama tasarımına bağlıdır: FilledBox, tek tek alanlara daha az dikkat çektiği için sık kullanılan formlar için önerilir. OutlinedBox, her alanın açıkça işaretlenmesi gereken kısa formlar (giriş, kayıt) için tercih edilir. Stil, XML'deki style özniteliği veya uygulama teması aracılığıyla ayarlanır.

Material Design 3 (M3), TextInputLayout için gelişmiş tipografi, yeni renk tokenları ve Material You dinamik renk desteğiyle güncellenmiş stiller sunmuştur. M3'te OutlinedBox varsayılan önerilen stil haline gelmiş ve FilledBox, yeni şartnameye uymak için dolgu ve kenar yarıçapını uyarlamıştır.

TextInputLayout ile Kod Örnekleri

TextInputLayout ile bir kayıt formu uygulamasının tam örneği; e-posta ve şifre doğrulama, hata görüntüleme ve şifre göster simgesini içerir. Kayıt düğmesine basıldığında, tüm alanlar kontrol edilir ve ilgili hata mesajları görüntülenir.

Kayıt Formu XML Düzeni

@+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'de Form Doğrulama

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
}