Kotlin’de TextInputLayout Kullanımı: 2

Bu yazımda TextInputLayout’un nasıl görselleştirileceğinden ve dropDown Menu’nün nasıl oluşturulacağından bahsedeceğim.

TextInputLayout’un ilk yazısında, arayüzün kullanıcı etkileşiminde ne gibi bir öneme sahip olduğundan ve TextInputLayout’un bize sunduğu prefixText, counter ve hint gibi yapılardan bahsetmiştim.

Bu yazımda ise; tasarımsal olarak ne gibi özelleştirme ve geliştirmeler yapabileceğimize ve dropDown Menu’yü nasıl oluşturabileceğimize değineceğim.

TextInputLayout’a Ikon Ekleme

Hint özelliği haricinde girmeniz gereken, text hakkında ipucu veren küçük ikonlar olduğunu fark etmişsinizdir. TextInputLayout’a ikon ekleyerek arayüz tasarımınızın daha dikkat çekici ve göze hoş gelmesini sağlayabilirsiniz.

Üstelik bu işlemi gerçekleştirmek oldukça basit.

Android Studio’nun bize sunduğu ikonları kullanabilir ya da local seçeneği ile kendi istediğiniz başka bir ikonu kullanabilirsiniz.

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

Password Toggle

Şifrenizi girdiğiniz alandaki text’in, görünür şifre ve gizlenmiş şifre (nokta görünümü) arasında geçiş yapabilmesi için kullanılır.

Bu yapıyı kullanabilmeniz için app:endIconMode=”password_toggle” seçili olması gerekmektedir.

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

Clear Text

Bir text girildiği zaman layout’un sonunda bir simge görüntülenir ve buna basıldığında giriş metninin temizlenmesini sağlar.

Bu yapıyı kullanabilmeniz için app:endIconMode=”clear_text” şeklinde seçilmelidir.

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

Style

TextInputLayout’a ikon, password toggle gibi şeyler ekledik ancak hala tasarımsal olarak göze istediğimiz kadar hitap ettiğini söyleyemeyiz.

Özellikler (Attributes) kısmından style’ı seçip sonrasında style=”@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox” vererek kullanıcıya daha güzel görünen bir tasarım çıkartabiliriz.

app:boxBackgroundMode ile dolu bir arka plan (filled), anahat arka planı (outline) ya da arka plan yok(none) şeklinde ayarlayabillirsiniz.

Sonuç olarak aşağıdaki görüntü ortaya çıkmış oluyor:

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

Dropdown Menu

Dropdown yapısı TextInputLayout içerisinde açılır menü oluşturabilmemizi sağlar. Seçili olan menü öğesini seçenekler listesinin üzerinde görüntüler.

Bu yapıyı kullanabilmek için öncelikle layout dosyamızda:

AutoCompleteTextView: Kullanıcı yazarken tamamlama önerilerini otomatik olarak gösteren düzenlenebilir metin görünümü ya da kullanıcının düzenleme kutusunun içeriğini değiştirmek için bir öğe seçebileceği açılır menüde görüntüler.

Seçenek olarak sunacağımız şehir adlarını res>values>strings altında oluşturuyoruz:

Kod kısmında:

Seçeneklerin görüntülenmesi için oluşturduğumuz layout’ta (secenek_listesi.xml):

Sonuç olarak TextInputLayout’un bize sunduğu özelliklerden ve tasarımsal avantajlardan bahsetmiş oldum. Bu konu hakkındaki son yazımı okuduğunuz için teşekkür ederim. 😊

Yeni içeriklerde görüşmek üzere !