Building a Material Design App with the Android Design Support Library: Hack’n Break Codelab

Building a Material Design App with the Android Design   Support Library: Hack’n Break Codelab

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.

Screen Shot 2016-09-04 at 22.19.06

ฤฐ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.ย 

Screen Shot 2016-09-04 at 22.23.24

Hemen aลŸaฤŸฤฑda ise Main Activity’nin resource dosyasฤฑnฤฑn iรงeriฤŸi yer almakta.ย Layoutda sadece bir relative layout bulunuyor.

Screen Shot 2016-09-04 at 22.24.50

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.

Screen Shot 2016-09-04 at 22.27.27

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.

Screen Shot 2016-09-04 at 22.40.335ffbda8697aa2b0f

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.

Screen Shot 2016-09-04 at 22.44.31

ลž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.ย 

Screen Shot 2016-09-04 at 22.45.53

TabLayoutu ekledik. ลžimdi gidip koddan da tablarฤฑ ekleyelim. Burada รถnemli olan setSupportActionBar diyerek toolbarฤฑmฤฑzฤฑ tanฤฑtmak aslฤฑnda.

Screen Shot 2016-09-04 at 22.46.37

ลž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.

Screen Shot 2016-09-04 at 22.50.03

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.

Screen Shot 2016-09-04 at 22.55.19

Ardฤฑndan da navigation bar iรงin bir layout oluลŸturuyoruz.

Screen Shot 2016-09-04 at 22.55.28

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.

Screen Shot 2016-09-04 at 22.56.11

Screen Shot 2016-09-04 at 22.56.23

ลž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. ๐Ÿ™‚

Screen Shot 2016-09-04 at 23.00.57

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”

  1. ลžimdiye dek gรถrdรผฤŸรผm, material design konusunda en yalฤฑn Tรผrkรงe anlatฤฑmdฤฑ. TeลŸekkรผrler

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.