Görsel:Ümit Köse

Kotlin’de TextInputLayout Kullanımı: 1

Bu yazımda TextInputLayout kullanımından ve PlainText’e göre bize sağladığı avantajlardan bahsedeceğim.

Gülşah Özaltun
3 min readSep 21, 2021

--

Uygulama kullanırken arayüz tasarımı farkına varmasak da bilinçaltımızda pozitif veya negatif izlenimler oluşturabilir. Bundan dolayı arayüz tasarımı aslında büyük bir önem taşımaktadır.

Ben de bu yazımda Android’in bize sunduğu ve üzerinde tasarımsal pek çok değişiklik yapabileceğimiz TextInputLayout’tan bahsedeceğim.

TextInputLayout, aynı PlainText’te olduğu gibi kullanıcıdan girdi almamızı sağlayan bir yapıdır. Ancak bu yapının en büyük farkı PlainText’in bir kapsayıcı olan TextInputLayout içermesidir ve bu sayede bazı özelleştirmelerin de yapılabilmesidir.

Şimdi hep birlikte TextInputLayout’un bize sunduğu helperText, prefixText gibi yapıları inceleyelim.

Error

Kullanıcıdan alınan değer boş, hatalı veya istenilen formatta değil ise kullanıcıya hata mesajı gösteren yapıdır. PlainText’imizin altında görüntülenecek bir hata mesajı ayarlar.

Bu özelliği kullanabilmek için ilk önce setErrorEnabled(boolean) true yapmamız gerekmektedir.

Bunu bir örnekle açıklayacak olursak:

Örnek senaryoda kullanıcıdan mail adresi girilmesi isteniyor ve boş bırakıldığı takdirde aşağıdaki gibi bir error mesajı gösteriliyor.

Örneğin kodlaması aşağıdaki şekildedir:

fun validate(){
var emailLayout= findViewById<TextInputLayout>(R.id.emailLayout)
var emailInput= findViewById<EditText>(R.id.emailEditText)

if(emailInput.text.isEmpty()){

emailLayout.error="Bu alan boş bırakılamaz!"
}
else{
emailLayout.error=null
}

}

note: Aşağıdaki tablodaki tüm özellikler TextInputLayout’ta ayarlanmalıdır.

HelperText

Bu yapı, PlainText’in altında görüntülenecek bir yardımcı mesaj göstermemize yarar.

Bu yapıyı kullanabilmemiz için setHelperTextEnabled(boolean) true yapmamız gerekmektedir.

Örneklendirecek olursak:

Bu yapı sayesinde kullanıcıya Ad Soyad’ın *Doldurulması zorunlu alan! olduğunu belirttik.

note: Aşağıdaki tablodaki tüm attributelerTextInputLayout’ta ayarlanmalıdır.

PrefixText

Kullanıcı TextInputLayout’a bir veri girmeden önce giriş alanında görüntülenecek örnek metni ayarlar.

Örneğin telefon numarası girilmesi istenen kısımda ülkenin alan kodunun kullanıcıya gösterilmesi gibi.

  • Bu değer sabittir kullanıcı tarafından silinemez.

note: Aşağıdaki tablodaki tüm özellikler TextInputLayout’ta ayarlanmalıdır.

Counter

Kullancının veri girdiği sırada karakter sayısını saymaya yarayan yapıdır.

setCounterMaxLength(int) karakter sayacında görüntülenecek maksimum uzunluğu ayarlar.

Bu yapıyı kullanabilmemiz için setCounterEnabled(boolean) true yapmamız gerekmektedir.

note: Aşağıdaki tablodaki tüm özellikler TextInputLayout’ta ayarlanmalıdır.

Hint

Label’da görüntülenen ve kullanıcıya girmesi gereken text hakkında ipucu veren yazıdır.

note: Aşağıdaki tablodaki tüm özellikler TextInputLayout’ta ayarlanmalıdır.

Yazımı okuduğunuz için teşekkür ederim. Bu yazımın ikinci adımı olarak TextInputLayout’un nasıl görselleştirileceğinden ve dropDownMenu’nün nasıl oluşturulacağından bahsedeceğim. 😊

Görüşmek üzere!

--

--