Türkiye’deki ilk açık inovasyon kampı fikriyle doğan ve İzmir’de yaklaşık bir hafta sürerek çok sayıda konuşma, lab ve hackothanlarla devam eden katılanlara hem deniz kenarında kamp yapıp hem de kendilerini geliştirme imkanı sunan Hack’n Break‘e Google’ın da katılımıyla ben de Murat Can Bur ve Semih Bozdemir’le gerçekleştirdiğimiz Android Codelab’iyle katılma fırsatı buldum. Codelab’in büyük bir kısmını Android Design Support Library’yle sıfırdan hep beraber yazdığımız app kapsadı. Bu yazıda anlattıklarımızın bir kere daha üstünden geçip, takılınan nokta varsa da klavuzluk etmeyi amaçlıyorum. Codelab google.developers sunduğu codelab ve örnek kodlar temel alınarak gerçekleştirilmiştir.

İzmir’de gerçekleştirilen, ilk olan, sıcak yaz günlerine rağmen ilgili bir kalabalığa workshop gerçekleştirmenin mutluluğu yanında, yaz ortası Android’de Google Developer Expert olmanın ardından gerçekleştirdiğim ilk tech event olması açısından bu workshop benim için ayrı bir önemdeydi. 🙂

Peki bugün ilk lab’da neler öğrendik dersek, tabi ki Android Design Support Library’i nasıl kullanacağımızı, Vector drawable’ları nası kullanacağımızı, uygulamamıza material design prensiplerini nasıl uygulayabileceğimizi, ve bazı temel design component’leri ve principleri hakkında da uygulama yaptık. Bunlar da tema ve renklerin kullanımı, app layout’la ilgili best practise’ler ve son olarak da animasyonlardı.

Lab’ın gerçekleştirilebilmesi için ön koşul, Android Studio için en az 2.1 olan bir versiyon ve java8’di.  En az 4.1 bir test cihazı iyi ya da emulatör de kullanılabilir. Geliştirmeleri 2.3 üstü herhangi bir cihazda da görülebilir ancak material’ın bazı özellikleri sadece 4.4 üzerinde görünmekte. 

Material Design nedir?

Material Design ilk defa 2014 yılı Google I/O konferansında tanıtılan Google’ın uygulamalar, cihazlar, platformlar arası geçişte ortak bir görsel, his ve kullanım sağlamak için ortaya çıkardığı çok geniş kapsamlı bir tasarım klavuzudur aslında. Android L’yle beraber geldi ancak support library sayesinde belli başlı özellikler için backward compatible. Biz de aslında codelab’de bunu deneyimlemeye çalıştık.

Material design öncesinde Android’de kesin tanımlanmış bir guide yoktu bu yüzden aslında bir uygulamada tamamen farklı bir kullanımla karşılaşırken başka bir uygulamaya geçerken de tamamen farklı bir kullanıma alışmak zorunda kalınıyordu. Bunun benzeri Microsoft’da metro design, IOS’de 7’yle gelen flat design.

Aslında böylece material’ın amacından konuşmuş olduk. Biraz da material design prensiplerinden biraz bahsedersek; aslında aşağıda gördüğünüz 3 imaj material design’ın 3 prensibini ifade etmekte.

İlk olarak material design gerçek dünyayla aramızda bir metafor aslında. (ilk imaj) Artık butonlar parlak olmak zorunda değil örneğin. Kağıt ve mürekkepten esinlenerek tasarlanmış, fiziksel dünyayla kullanıcıyı buluşturan bir tasarımdan bahsediyoruz.

İkincisi, bold, grafik and intentional. (ortadaki imaj) Yani print-based tasarımın elementleri olan tipografi, gridler, oran, renk, hayal gücünün kullanımı gibi elementler gözün gördüğünden daha fazlasını vererek, basitleştirerek kullanıcıyı yormadan neyin nasıl yapılacağı konusunda basitçe yönlendirmiş oluyor.

Son olarak da motion provides meaning (en sağdaki imaj). Yani aslında kod yazmaya başladığımızda ve componentleri gördüğümüzde daha net anlaşılacak ama iyi tasarlanmış, yumuşak geçişlerle kullanıcının nereye focuslanmasını gerektiği verilmeye çalışılıyor.

İlk olarak adresindeki sample uygulama altında Base olanı çalıştırıp inceledik. Aşağıdaki imajda örnek uygulamada yer alan Manifest dosyasını görüyorsunuz. 

Hemen aşağıda ise Main Activity’nin resource dosyasının içeriği yer almakta. Layoutda sadece bir relative layout bulunuyor.

Bu noktaya kadar amaç aslında daha önceden deneme fırsatı olmayanlar için AndroidStudio, Gradle sync ve varolan bir uygulamayı çalıştırmakla ilgili sorunları aşmaktı. Bunun ardından yavaş yavaş componentleri ekleyerek uygulamamızı yazmaya başladık.

Bu noktada File–>New Project’le ilerleyebiliriz. Aşağıdaki screenshotda da görüldüğü gibi aslında Android Studio’nun hazır templateleri birçok componentin default olarak gelmesini nerdeyse bir iki yere tıklayarak hazır bir uygulama üretmemize olanak sağlıyor. Ancak bir burada componentleri ve attributelerini tek tek inceleyeceğimiz için Empty Activity seçeneğiyle ilerledik. Paralelde adımları izleyip kendi uygulamasını yazmayı düşünen varsa aynı seçenekle ilerlemesini tavsiye ederm.

Yeni projenizi yarattıktan sonra bir kere build ve run edip, bir sorun olup olmadığına bakabilirsiniz. Gradle versiyonuyla ilgili sorun yaşanırsa 2.1.0’a çekilebilir.

Aslında yaratılan yeni uygulama az önce incelediğimiz sample app’le aynı nitelikte. Android Studio bizim için “Hello World” yazan bir uygulama yarattı.

İlk olarak temalardan başlamıştık. Ama temaları görebilmek için componentleri kullanmaya başlamak lazım.

Bu noktada TexInputLayout kullanımıyla başlayabiliriz. Material design library’le gelen yeni componentlerden biri de TextInputLayout. TextInputLayout ne sağlıyor dersek, aslında varoluş sebebi EditText’i wrap etmek. Böylece EditText’in özelliklerini genişletebiliyoruz. Ne gibi ek özellikler geliyor dersek de hint alandaki yazı floating label olarak geliyor. Ayrıca setErrorEneabled(true) deyip, error set edersek de hatayı görebiliyoruz. Bir diğer özellik ise eğer istersek, kaç karakter yazıldığını setCounterEnabled(true) dediğimizde göstermesi.

Uygulamayı yarattığımızda aslında yeni bir style yaratarak bunun içindeki değerleri Manifest dosyasında da kullandı. Bu değerleri değiştirerek uygulamamızın farklı yerlerinin nasıl renklendiğini inceleyebiliriz.

Aşağıda style ve hangi alanın nereye denk geldiğini gösteren görselleri bulabilirsiniz.

Style’ları öğrendikten sonra componentleri daha derinden incelemeye koyulduk.

android.support.v7.widget.Toolbar

Şimdi bir toolbar ekleyelim. Ama kendi yarattığımız toolbarı kullanabilmek için gidip temamızı noActionbar yapmamız lazım. Toolbar kullanmanın default AppBar’a göre ne gibi faydaları var derseniz de: Navigation button ekleyebiliriz. Bu back olabilir, done olabilir. Ne olacağı bize kalmış aslında. Brand image ekleyebiliriz. Toolbar’a childview’ler eklenebilir. Ve tabi ActionMenu de ekleyebiliriz.

Şimdi bir de tabLayout ekleyelim. Bu noktada tepedeki RelativeLayout olan Container viewimizi de değiştirip CoordinatorLayout yapıyor olacağız.

CoordinatorLayout,  super-powered  bir FrameLayout. Touch ripples, meaningful transitions gibi motion’ın bir çok parçasını içeren DesignLibrary bu ihtiyaçlardan dolayı CoordinatorLayoutu çıkarmıştır. CoordinatorLayout childview’ler üzerinde additional bir control sağlar.(design library’nin avantajı olarak.)

Bu noktada scrolling behaviourları yönetebilmek için AppBarLAyout ekliyor olucaz. AppBarLayout aslında teknik olarak vertical bir LinearLayout’tur. Childview’ler scrollingbehaviourlarını verebilirler. Burada önemli olan AppBarLayout’un CoordinatorLayout içinde olmasıdır. Eğer normal bir viewgroup içinde olursa çoğu özeliğini kullanamayız. 

TabLayoutu ekledik. Şimdi gidip koddan da tabları ekleyelim. Burada önemli olan setSupportActionBar diyerek toolbarımızı tanıtmak aslında.

Şimdi de ViewPager’ların içerisine fragment ekleyelim. 3 farklı fragment create edelim. Böylece tabları swipe ettiğimizde farklı datalar görebiliriz. Bu noktada aslında yapılacak iş çok mekanik olduğu için başlangıçta paylaşılan örnek kodlar incelenerek ViewPager ve Fragmentler sayfaya eklenebilir.

Aslında CoordinatorLayoutu view’ler arasındaki koordinasyon için ekledik denebilir ancak, AppBarLayout ya da FloatingActionButton için kendiliğinden gelen bir behaviour eklemez. İstediğimiz behaviour’ı bizim tanımlamamız gerekir. Mesela az önce viewPager’a appbarscrollingviewbehaviour diyoruz.

Şimdi biraz başa dönecek olursak, coordinator layout dedik ki aslında bir super power frame layout. AppBarLayout da aslında vertical bir LinearLayout. CoordinatorLayout’un içerisinde AppBarLayout kullandığımızda. NestedScroll’a benzer bir yaklaşımı da eğer istersek yönetebiliyoruz. AppBarLayout’la beraber ekranın tümünü kapsayacak olan layouta bu örnekte viewPager’dı. LayoutBehaviour tanımlıyoruz. Ve toolbara tabsLayoutda verdiğimiz scrolling davranışlarıyla ekranın farklı şekillerde çalışmasını sağlayabiliyoruz. Bu ne olabilir dersek, mesela tabbar toolbar sabit kalablir. Ekranla beraber scrol edip sonrasında alt kısım scroll etmeye başlayabilir. 

RecylerView

Şimdi yine DesignLibrary’yle gelen çok önemli componentlerden biri de RecyclerView. RecyclerView aslında ListView’in performans problemleri çözülmüş hali gibi düşünebilir.

Recyclerview’i kullanabilmek için, gradle’da tanımlamamız gerekli. RecyclerView’le beraber aslında CardView’leri de kullanıyor olacağız bu örnekte. O yüzden ikisini beraber tanımlamıştık, yine yazıyla paralel kodlayan varsa bu şekilde ilerleyebilir.

ListView’dekin adapter’e benzer bir şekilde Recylerview’de viewholder ve RecyclerView.Adapter’ler bulunmakta. Görünecek olan view’leri ve datayı bunlar yardımıyla bağlıyoruz. ViewHolder’da res’imiz inflate edilirken Adapter’de yer alan Bind methodunda ise data bu res’lere bağlanmış oluyor.

Vektör Assets

Vektor drawable’lar aslında Lolipopla beraber duyurulmuştu. SVG’ye benzer ama daha basit bir yapısı var. Vector asset directory’den varolan imajlardan seçip, drawable’lara ekleyebiliyor ya da elimizdeki svg lerden convert edebiliyoruz. Vektör drawable’lar api level 21 üstünde destekleniyor ancak 21 altı için de gradle imaj create edebiliyor. Ancak bu şekilde ilerlenilecekse size’ı da daha fazla arttırmamak için 21 altı ve üstü olmak üzere 2 farklı apk’yla ilerlemekte fayda var. Backward compatibility’de her ekran çözünürlüğü için imaj create ediliyor.

İlk olarak bunun için gradle dosyasına vectorDrawables.useSupportLibrary = true diyoruz. Sonrasında drawable’ları sağ tıklayıp New->VectorAsset diyerek projemize vector asset ekleyebiliyoruz.

PageElements

Vektör drawable’ları da tamamladığımıza göre bir sonraki componentimiz NavigationDrawer. Artık standart olarak Google’ın tüm applerinde de var olan bir component aslında. Design support library öncesi bu geliştirmeyi kendimiz yapmamız gerekiyordu. Şimdi ise çok daha kolay bir şekilde uygulamamıza ekleyebiliyoruz.

Bunun için ilk önce bir menu xml dosyası yaratıyoruz.

Ardından da navigation bar için bir layout oluşturuyoruz.

Sonrasında mainActivity’ye tamamen çevreleyecek bir navigationbarLayout eklenmesi gerekli. Bu sayede drawer view’ler kenarından çekildiğinde gelebilecek.

Ardından coordinator layoutun dışına bir navigation view ekliyoruz.

Şimdi son component olarak bir de FloatingActionButton ekleyelim. FloatingAction buttonlar primary bir aksiyon olduğunda bunu kullanıcıya vurgulamak için kullanılırlar. Her uygulamada olma zorunluluğu yoktur. Ekranın altında olabileceği gibi üstte, diğer tarafta ekranın herhangi bir yerinde olabilir. Default’dan daha küçük de olabilir. Önerilen bir ekranda birden fazla floating action button olmamasıdır.

Floating action buttona da tıklanınca bir snackbar çıkaralım. 🙂

Umarım faydalı bir yazı olmuştur. Yorumlarınız ve yıldızlarınızla feedback’lerinizi her zaman bekliyorum.

Referanslar:

• https://codelabs.developers.google.com/codelabs/material-design-style/index.html?
• https://material.google.com/#introduction-principles