UI/UX

Android Material Navigation Rail Kullanımı

Oluşturduğumuz yazılımların kullanıcı dostu ve ergonomik tasarımlara sahip olması her zaman proje için avantajdır.

Özellikle büyük ekranlı Android cihazlarda kullanılan uygulamaların tasarımında Navigation Bar’ı dikey konumlandırmasıyla ekranda alan kazancı sağlayan NavigationRailView MaterialDesign’ ı makalede anlatacağım.

Örnek uygulamamız;

 

NavigationRailView; tablet vb. büyük ekranlarda veya telefon yatay konumdayken ekranda alan kazancı sağlayan Navigation Bar’dır. YouTube-Web-App ve birçok oyun uygulamalarının tercih ettiği bir arayüz elamanıdır. 3 ile 7 arasında menü eklemenize olanak sağlamaktadır.

Dilerseniz menü item’lara Alarms menüsündeki gibi badge’lar (kırmızı bölüm) ekleyebilirsiniz. Şimdi örneğimizi uygulamak için ilgili adımlara başlayalım.

1-Projede Bazı Ayarlar

Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodu yerleştirerek Material Design kütüphanesini yüklüyoruz.

2- NavigationRailView’da Kullanılacak Menüyü Oluşturma

Uygulamada görünen yapı Android’deki menu yapısıyla oluşturulabilmektedir. Proje ana dizininde  app->src->main klasörünün içindeki res dizinine sağ tıklayıp  New->Android Resource Directory açın.Type olarak menu seçmelisiniz. İlgili dizin oluşturduktan sonra üstüne sağ tıklayıp New->Menu Resource File seçerseniz menu dosyanız oluşturulur. Ben oluşturduğum nav_menu dosyamdaki menu xml kodumu aşağıda paylaştım.

Üstteki xml’de her bir item’in başlığını ve uygulamada göstermek istediğiniz ikonu tanımladım. Şimdi ise bu menüyü NavigationRailView arayüz elementi ile bağlantı sağlamalıyız

3- Floating Action Button Oluşturma

NavigationRailView yapısında Floating Action Button ekleyebilmemizi de sağlamışlar.. Floating Action Button ekleyebilmek için bir layout xml i oluşturup aşağıdaki kodu eklemelisiniz. Sonrasında bu layout NavigationRailView’da kullanacağız.

 

3-NavigationRailView Oluşturulması

NavigationRailView Material Design kütüphanesinde barındığı için xml kodunu ekleyerek bu yapıyı oluşturacağız. Uygulamamızın ana sınıfında kullanacağınız xml dosyasında NavigationRailView arayüz elementi oluşturmayı tercih ettim.

NavigationRailView özellikleri;

  1. app:menu : Bu özelliğe daha önce oluşturduğumuz nav_menu xml dosyasını ekledim.
  2. app:menuGravity: Menüdeki item’ların NavigationRailView’da top,center ve bottom hızalamalarında bulunması sağlar.
  3. app:headerLayout: Alana FloatingActionButton eklemek isterseniz, bu özelliğe FloatingActionButton xml kodunun bulunduğu xml dosyasını eklemelisiniz.

4- Navigation Rail’de Etkileşim

NavigationRailView Badge özelliği bulunmaktadır. Badge, Alarm item’da kırmızı olarak gözüken bölümdür. Kullanıcıya bir tür bildirim göstermeniz gerekiyorsa bildirim sayısını Badge ile belirtebilirsiniz.

Badge özellikleri;

  1. number: Badge gözükecek sayı belirtilir.
  2. badgeGravity: Menü item’da gözükecek badge’ın yeri belirlenir. BOTTOM_END, TOP_END, BOTTOM_START, TOP_START şeklindeki tanımlar kullanılır.
  3. maxCharacterCount: Badge’da görüncek numaranın karakter sayısı belirtilir. Örneğimizde number değeri 999. maxCharacterCount değerini 2 verdiğimiz için 9+ şeklinde görünüyor.
  4. badgeTextColor: Badge’da görüncek değerin tazı rengini belirleyebiliriz.
  5. isVisible: Badge görünürlüğünü sağlar.
Projenin kodlarının tamamı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