UI/UX

Android AlertDialog’u Radius Yapma

Bir üründe müşterinin ilk gördüğü olgu tasarımdır. Bu yüzden yazılımınızın sade, etkili ve işlevselliği iyi olan bir arayüz tasarımına sahip olması oldukça büyük bir öneme sahiptir.

Bu makale, Android’de tasarım trendi olan köşeleri yuvarlatma(radius) özelliğini AlertDialog’a uygulayarak örneklemektedir.

Android’de CardView ve Shape ile Köşeleri Yuvarlatma – Radius adlı makalemde köşeleri yuvarlatma görselliğini nasıl oluşturacağınızın detaylı anlatımına ulaşabilirsiniz.

Örneğimizin çalışır hali:

1- Upload File Butonunu Tasarlama

İlk önce bir arayüz elementinin köşelerini nasıl yuvarlatacağımızı, Upload File button örneği üzerinden görelim.

1. adım: Projenizde app->src->main>res yolunu takip edip res dizini içindeki drawable dizinine sağ tıklayınız. Açılan pencerede New->Drawable Resource File seçerek drawable xml dosyasını oluşturun (btn_back.xml) ve içine aşağıdaki kod yerleştirin.

2. adım: btn_back dosyasında hazırladığımız tasarımı arayüz elementinizin background özelliğinizde çağırmanız gerekir. Yalnız Button elementine bu tanımlamayı yapmak bazı zamanlarda yeterli olmuyor.

Önemli Not!

Themes dosyanızda MaterialComponents kullanıyorsanız, colorPrimary da tanımlanmış renk default olarak button’a atanır. Biz button nesnesinin görselliğini değiştirmek istiyorsak, app:backgroundTint=”@null” özelliğini ekledikten sonra background  özelliğinde tanımladığımız tasarımın uygulandığını görebiliriz.

2- Alert Dialog Tasarımı

Alert Dialog penceresi Java sınıfında kodlanarak oluşturulan bir yapıdır. Bu yapıya istediğiniz görselliği uygulayabilmek için yeni oluşturacağımız xml dosyasını, Java tarafında tanımlamanız gerekir.

İlk önce app->src->main>res içindeki layout dizinine sağ tıklayıp, açılan pencerede New->Layout Resource File seçiniz. temp adında dosya oluşturun.

Üstteki yeşil ile belirttiğim gibi köşeleri yuvarlatmak istiyorsanız, CardView arayüz elementini kullanmalısınız. Neden CardView kullanmalıyız? Çünkü CardView yöntemi, içeresinde birden fazla arayüz elementlerinin olduğu kapsama alanının köşelerini yuvarlatacağımızda daha çok tercih edilir. Eğer tek tip arayüz elementinin köşelerini yuvarlatacaksanız, Upload File Butonunu Tasarlama başlığında anlattığım Shape xml yapısını kullanmalısınız. Daha detaylı anlatım için Android’de CardView ve Shape ile Köşeleri Yuvarlatma – Radius adlı makalemi inceleyebilirsiniz.

Alert dialog tasarımında kullandığım ikona resimler linkinden ulaşabilirsiniz. Continue button tasarımını da Upload File Butonunu Tasarlama başlığında anlattığım şekilde yaptım. CardView’in cardCornerRadius adında bir özelliği bulunmaktadır. Bu özeliği sayesinde köşeler yuvarlanır.

 

Son olarak Java tarafında Alert Dialog yapısını oluşturacağız. Bu bölümü isterseniz Kotlin diliylede yazabilirsiniz. Bu makalede dikkat etmemiz gereken bölüm UI/UX tarafıdır.

Anlattıklarımın hepsini bir projede birleştirdim ve projenin kodlarına github linkinden ulaşabilirsiniz.

Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

UI/UX

Android Fragment'te Kolayca Yapılan 5 Yaygın Hata

Worth reading...