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:
One response to “Building a Material Design App with the Android Design Support Library: Hack’n Break Codelab”
ลimdiye dek gรถrdรผฤรผm, material design konusunda en yalฤฑn Tรผrkรงe anlatฤฑmdฤฑ. Teลekkรผrler