Error State — alan hata durumu nedir, hata gösterimi ve Android’de uygulama

Android’de alan hata durumu nedir?

Error State, girilen veriler doğrulamayı geçemediğinde etkinleşen bir giriş alanının özel görüntüleme modudur. Görsel olarak Error State üç bileşen içerir: alanın kenarlık veya arka plan renginde değişiklik (genellikle kırmızı), hatayı açıklayan bir metin mesajının alanın altında görünmesi ve isteğe bağlı olarak bir simge veya vurgulama. Error State’in amacı, kullanıcının dikkatini sorunlu alana anında çekmek ve hatanın nasıl düzeltileceğini önermektir.

Android’de Error State, Material Design Components’ten TextInputLayout düzeyinde uygulanır. TextInputLayout, EditText’i sarar ve durumlarını yönetir: normal, focused, error, disabled. setError(String) yöntemi, alanı hata durumuna geçirir, kenarlık rengini değiştirir ve mesajı gösterir. Metin değiştiğinde veya setError(null) çağrıldığında, alan normal duruma döner.

Material Design Guidelines’a göre, Error State göze çarpmalı ancak baskın olmamalıdır. Kırmızı kenarlık rengi normal durumla kontrast oluşturmalı ancak arayüzü aşırı yüklememelidir. Hata mesajı, sorun ve çözümü hakkında spesifik bilgiler içermelidir. Bir hata simgesi (örneğin, ünlem işaretli kırmızı daire) görsel sinyali güçlendirir.

TextInputLayout’ta setError nasıl çalışır

setError(CharSequence errorText) yöntemi, TextInputLayout’u hata durumuna geçirir. errorText parametresi, alanın altında görüntülenen metindir. Null iletilirse, hata temizlenir. TextInputLayout animasyonu yönetir: hata metni yumuşak bir geçişle görünür, kenarlık kırmızıya döner. Bir hata simgesi (varsayılan: daire içinde ünlem işareti) alanın sonunda gösterilir.

Önemli detaylar: Hata mesajı için yer ayırmak üzere setError’dan önce setErrorEnabled(true) çağrılmalıdır. Aksi takdirde, yer ayrılmadığı için hata göründüğünde düzen “zıplayabilir”. Düzen kaymalarını önlemek için XML’de app:errorEnabled="true" aracılığıyla her zaman hata desteğini etkinleştirmeniz önerilir.

setErrorEnabled(true) etkinleştirilmişse, setError yöntemi alan metni değiştiğinde otomatik olarak temizlenir. Bu davranış gerçek zamanlı doğrulama için kullanışlıdır: kullanıcı hatayı düzeltmeye başlar başlamaz, kırmızı kenarlık kaybolur ve alan normal duruma döner. Ancak, karmaşık senaryolar için bu otomatik temizleme istenmeyebilir — bu gibi durumlarda, hatayı manuel olarak yönetin.

val til = findViewById<TextInputLayout>(R.id.til_email)

// Hata desteğini etkinleştir (aksi halde XML’de ayarla)
til.isErrorEnabled = true

// Hata mesajını ayarla
til.error = "Invalid email address"

// Hatayı temizle
til.error = null

// Hatanın var olup olmadığını kontrol et
if (til.error != null) {
    // Alan hata durumunda
}

Örnek, setError/isErrorEnabled’e erişmek için Kotlin özelliklerini kullanır. TextInputLayout otomatik olarak arayüzü günceller: boxStrokeColor’ı değiştirir, hata simgesini gösterir, hata metnini görüntüler. EditText’teki metin değişirse, hata otomatik olarak temizlenir. Manuel sıfırlama için error = null atayın.

Hataları göstermenin alternatif yolları

Tüm projeler Material Design Components kullanmaz. Özel hata görüntüleme için, EditText’in altında hata durumunda görünür hale gelen ayrı bir TextView kullanabilirsiniz. Bu yaklaşım, stiller ve mesaj yerleşimi üzerinde tam kontrol sağlar. Örneğin, mesajı alanın sağına yerleştirebilir, farklı bir arka plan rengi kullanabilir veya metnin soluna bir simge ekleyebilirsiniz.

Jetpack Compose’ta Error State, OutlinedTextField veya TextField’teki isError parametresi aracılığıyla uygulanır. isError = true olduğunda, kenarlık kırmızıya döner ve supportingText aracılığıyla hata metnini gösterebilirsiniz. Compose’ta metin değişiminde yerleşik otomatik temizleme yoktur — geliştirici, remember ve mutableStateOf kullanarak hata durumunu manuel olarak yönetir.

Grup hataları için (birden çok alan için tek bir mesaj, örneğin “Tüm zorunlu alanları doldurun”), formun üst kısmında Snackbar, Dialog veya satir içi blok kullanın. Grup hatası, tek tek alanların Error State’ini değiştirmez, onu tamamlar. Kullanıcı önce genel mesajı görür, ardından hatalı belirli alanları arar.

Hata renkleri, simgeleri ve animasyonu

Material Design Components’ta Error State rengi, boxStrokeErrorColor özelliği veya temadaki colorError özelliği aracılığıyla kontrol edilir. Varsayılan olarak sistem kırmızısı kullanılır, ancak uygulama temasında veya doğrudan TextInputLayout’ta app:boxStrokeErrorColor="@color/customErrorColor" aracılığıyla geçersiz kılınabilir. Koyu tema desteği için açık ve koyu modlar için farklı renklere sahip bir seçici kullanılması önerilir.

Hata simgesi app:errorIconDrawable aracılığıyla yapılandırılır. Varsayılan olarak bir daire içinde ünlem işareti görüntülenir. Özel bir simgeyle değiştirilebilir veya app:errorIconDrawable="@null" ayarlanarak tamamen kaldırılabilir. Simge, TextInputLayout’un sonunda görüntülenir ve ek görsel işaretçi görevi görür. Material Design 3’te, erişilebilirlik için hata simgesi zorunludur.

Hata görünme animasyonu TextInputLayout’a yerleşiktir: metin, yumuşak bir opaklık değişimiyle aşağıdan yukarı kayar. Özel animasyon için Transition API veya MotionLayout kullanın. Örneğin, hata durumunda alanı sallamak ek dikkat çeker. Ancak, animasyonun aşırı kullanımı kullanıcı deneyimini kötüleştirir — mesajın yumuşak görünmesi yeterlidir.

Doğrulama sırasında hata durumu yönetimi

Error State yönetimi iki aşamaya ayrılır: alan doğrulaması sırasında hatayı ayarlama ve düzeltme sırasında hatayı temizleme. En basit durumda, doğrulama TextWatcher.afterTextChanged içinde çağrılır: değer geçersizse, bir hata mesajıyla setError çağrılır. Geçerliyse, setError(null) çağrılır. setError(null) durumu temizlediğinde TextInputLayout hatayı otomatik olarak gizler.

Form doğrulaması için, hatalar form gönderme aşamasında ayarlanır. Tüm alanları dolaşın, her birini doğrulayın, geçersiz alanlar için hatalar ayarlayın ve ilk hatalı alana odaklanın. Bu işlem sırasında gönderme düğmesi bloke edilir. Form büyükse, ilk hatalı alana kaydırma ve otomatik olarak odağı ayarlama önerilir.

Tek hata odağı kuralı: form gönderirken odağı yalnızca ilk hatalı alana ayarlayın. Kullanıcı her seferinde bir hatayı düzeltir ve düzeltmeden sonra sıradaki hatalı alan otomatik olarak odağı alır. Bu adım adım yaklaşım, bilişsel yükü azaltır. Material TextInputLayout, hata ayarlarken odağı engellemez — bu, requestFocus() aracılığıyla manuel olarak yapılmalıdır.

Error State ile çalışırken yaygın hatalar

İlk hata — isErrorEnabled eksikliği. setError’dan önce setErrorEnabled çağrılmazsa, hata mesajı göründüğünde düzen kayabilir. Bu, özellikle alan ekranın ortasındaysa kritiktir — kullanıcı kaydırma konumunu kaybeder. Hata ayarlamadan önce XML’de app:errorEnabled="true" aracılığıyla veya programatik olarak her zaman setErrorEnabled(true)’u etkinleştirin.

İkinci hata — çok uzun hata mesajı. Uzun metin birden çok satıra sarılır ve komşu alanları kaplayabilir. Önerilen hata mesajı uzunluğu 20-40 karakterdir. Daha fazla bilgi gerekiyorsa, normal durumda helperText veya ek açıklama için araç ipucu kullanın. Kısalık, iyi bir Error State’in temelidir.

Üçüncü hata — erişilebilirliği görmezden gelme. Error State, ekran okuyucular için erişilebilir olmalıdır. TextInputLayout, contentDescription aracılığıyla hatayı otomatik olarak bildirir, ancak özel uygulamalar bunu manuel olarak yapmalıdır. Hata mesajları için announceForAccessibility() veya android:importantForAccessibility kullanın. TalkBack kullanıcıları, hata göründüğünde hemen duymalıdır.