Android Material Design — NavigationDrawer

Navigation Drawer , toggle menüye tıkladığımızda slide şeklinde açılıp bizi karşılayan menü diyebiliriz. Açılır menü diyen var, kayan menü diyen var. Türkçeleştirme konusunda genelde kafamız karışık. :)

Android Studio’da yeni bir proje başlattığımızda bir kaç yönerge sonrası “Add an Activity to Mobile” kısmı gelmekte tam da bu kısımda uygulamamıza “Navigation Drawer Activity” eklersek uygulamamıza NavigationDrawer otomatik olarak eklemiş oluyoruz. Bu yazımızda bu oluşumdan sonra varsayılan olarak gelen layout hiyerarşisini anlatıp, ufak değişimlerle neler yapabiliriz onlara bakacağız. Sadece design kısmıyla ilgileneceğimizden Fragment kısmına hiiiiç girmeyeceğim. Ona başka bir yazımızda yer vermeyi düşünüyorum.


Uygulamamıza Navigation Drawer eklediğimizde bizi karşılayan hiyerarşi şu şekilde:

Görselimizde yer alan layout klasörümüzde “nav_header_main.xml”, “activity_main.xml” ve menu klasöründe yer alan “activity_main_drawer.xml” ilgileneceğimiz xml dosyalarımız olacak. Peki bunlar navigation drawer yapımızda nerelere etki edecek. Onu da şu görselde gösterdim:

Evet, şimdi bu ponçik tasarımımızı oluşturmak için kodlara nasıl müdahalelerde bulunduk. Sırayla inceleyelim.

İlk olarak “nav_header_main.xml” dosyamızda kodlarımızı görüp açıklayalım.

6. satırda LinearLayoutumuza nitelik olarak arkaplan rengine sarı verdim. Bu rengi colors.xml’de colorNavBar adında oluşturmuştum. Daha sonra koalamızın resmi için ImageView componentini kullandım.Bunun için drawable klasörüme “koala” adında bir resim ekledim. 19. satırda da resmi ortalayan gravity center özelliği atadım. 
İkinci eklediğim component TextView burada da “Koalaları Koruma Vakfı” yazımızı ekledim.


Şimdi “activity_main_drawer.xml” de Vakıf Kuralları, Galeri ve Bize Yazın menülerimizi oluşturup bunlara icon ekleyeceğiz. Kodlarımızı görelim ve açıklayalım.

Burada java kısmında menülerimizin click olaylarının kontrolü için id, iconlarımız için icon, ve menü isimleri için title niteliğini kullandık ve üç adımda bir menü ögemizi tamamlamış olduk. Bir de Genel kısmı yeni bir grup oluşturduk. Bu sayede menüleri kendi içerisinde gruplayabiliriz.


Son olarak “activity_main.xml” dosyamız var. Bu kısımda DrawerLayout widgetını kullancağız.Kodlarımız üzerinden açıklamalarımızı yapalım.

“activity_main.xml” dosyamızda header kısmı için ilk olarak oluşturduğumuz “nav_header_main” ekliyoruz. Bunun için 25. satırda olduğu gibi headerLayoutumuza xml dosyamızın yolunu yazıyoruz. Aynı şekilde menü içinde 26. satırda gördüğümüz gibi “activity_main_drawer.xml” yolunu veriyoruz. 
 Burada iconlarımızın rengini değiştirmek için itemIconTint niteliğini kullanıyoruz.


Java kısmında ise sadece click olayları için Toast mesajı vererek menü adını gösterdim. Başlangıçta bahsettiğim gibi yazı çok uzayacağından Fragment kısmına girmedim. Eksik ve hatalarım için geri dönüşlerinizi beklemekteyim. Kodların tamamına şuracıktan erişebilirsiniz.

Bol kodlu günler dilerim. :)

Show your support

Clapping shows how much you appreciated Hasibe Zafer’s story.