Material Design (2)

AIDE ေပၚမွာ Material design app ေတြဖန္တီးဖို႔ Library ၆ မ်ိဳး လိုအပ္ပါတယ္။ အဲဒါေတြကေတာ့

၁။ android support v4
၂။ android support v7 (appcompat)
၃။ android annotations
၄။ cardview v7
၅။ recyclerview v7
၆။ android support design

ျဖစ္ပါတယ္။

AIDE ကို သံုးရာမွာ Gradle ကို သံုးသြားပါမယ္။ အထက္က ေျပာခဲ့တဲ့ Library ေတြကို AIDE မွာ add လုပ္ေပးဖို႔ နည္းလမ္း ၂မ်ိဳး ရွိပါတယ္။

အခု post မွာေတာ့ ပထမ နည္းလမ္းကို ေျပာျပပါမယ္။ (ဒီနည္းလမ္းနဲ႔ အဆင္မေျပရင္၊ AIDE ကေန လိုအပ္တဲ့ library ေတြကို download ခ်ဖို႔ အဆင္မေျပရင္ ဒုတိယ နည္းလမ္းကို သံုးပါ။)

အရင္ဆံုး AIDE ကေန Gradle project တခုကို ဖန္တီးပါ။ အခု Tutorial မွာေတာ့ MaterialTutorial လို႔ အမည္ေပးထားပါတယ္။ Package name ကို nnl.aide.lessons လို႔ ေပးထားပါတယ္။

(ပံု)

Gradle project ဖြဲ႕စည္းပံုေတြကို ပံုမွာ ေလ့လာၾကည့္ပါ။

(ပံု)

လိုအပ္တဲ့ Library ေတြကို ထည့္သြင္းဖို႔အတြက္ AppProjects/MaterialTutorial/app/ folder ေတြထဲကို အဆင့္ဆင့္ ၀င္သြားလိုက္ပါ။ ပံုထဲကအတိုင္း ေတြ႕ပါမယ္။

(ပံု)




ထိပ္ဆံုးနားက "Add to Project..." ဆိုတာကို ႏွိပ္လိုက္ပါ။

(ပံု)







ဒါဆိုရင္ ထည့္သြင္းႏိုင္တဲ့ Libraries ေတြရဲ့ List ေပၚလာပါမယ္။ အဲဒီထဲကေန အေပၚမွာတုန္းက ေျပာခဲ့တဲ့ Library ၆မ်ိဳးကို တခုခ်င္း ေရြးခ်ယ္ၿပီး Add ေပးသြားပါ။ ကိုယ့္ရဲ့ AIDE ထဲမွာ အဲဒီ Library ေတြ မရွိေသးရင္ Download ခ်မွာမို႔ Internet ဖြင့္ေပးထားဖို႔ လိုပါမယ္။ လိုင္းလဲ ေကာင္းဖို႔ လိုတယ္။ Download data size လဲ မ်ားပါတယ္။ ဒီအဆင့္မွာ အခက္အခဲ ရွိရင္ေတာ့ ဒုတိယ နည္းကို ေျပာင္းသံုးပါ။

(ပံု)

Libraries ေတြ Add ၿပီး ရင္ Project properties ကို ပံုထဲကလို စစ္ၾကည့္ပါ။

(ပံု)

build.gradle ကို ႏွိပ္ၾကည့္ရင္လဲ dependencies ေတြကို အလိုအေလ်ာက္ ထည့္ေပးထားတာကို ေတြ႕ရပါမယ္။

(ပံု)

ဒီအဆင့္ထိ အားလံုးအဆင္ေျပသြားၿပီ ဆိုရင္ေတာ့ Libraries ေတြကို ေအာင္ျမင္စြာ Add လုပ္ၿပီးသြားပါၿပီ။ Run ၾကည့္လိုက္ပါ။ Hello world Activity ေလး တက္လာၿပီဆိုရင္ Material design application စတင္ ဖန္တီးဖို႔ အသင့္ ျဖစ္သြားပါၿပီ။

(ပံု)

============

အတိအက် လိုက္လုပ္ၾကည့္ပါ။ အခက္အခဲရွိရင္ ေျပာပါ။

ဒုတိယ နည္းလမ္းကို ဆက္ၿပီး ေျပာျပေပးပါမယ္။

Material Design (1)

Meterial design ဆိုတာကေတာ့ Android application ေတြ၊ Web page ေတြ ဖန္တီးတဲ့ အခါမွာ အသံုးျပဳတဲ့ ဒီဇိုင္း ပံုစံ ျဖစ္ပါတယ္။ ဒီ design ကို သံုးတဲ့ အခါမွာ လိုက္နာသင့္တဲ့ အခ်က္ေတြကို Google က လမ္းၫႊန္ခ်က္ Guideline ေတြ ခ်မွတ္ေပးထားပါတယ္။ ေအာက္က Link မွာ နမူနာ ၾကည့္ႏိုင္ပါတယ္။

https://material.google.com/

https://developer.android.com/training/material/theme.html#fig3

သေဘာတရား အက်ဥ္းခ်ဳပ္
==================

၁။ အသံုးျပဳတဲ့ View ေတြ၊  component ေတြဟာ 3D ျဖစ္ရမယ္။ ေအာက္ခံေပၚမွာ အရိပ္ကေလး က်ေနရမယ္။

၂။ အစိုင္အခဲပံုစံ solid ျဖစ္ရမယ္။ တခုနဲ႔ တခု ထိုးေဖာက္ မသြားရဘူး။

၃။ ေဖာ္ႏိုင္၊ ေဖ်ာက္ႏိုင္ရမယ္။

၄။ ဘယ္ညာ ထက္ေအာက္ ေရြးလ်ားမႈကို ျပဳလုပ္ႏိုင္ရမယ္။

၅။ အရြယ္အစား ႀကီးလာတာ၊ ေသးသြားတာမ်ိဳး လုပ္ႏိုင္ရမယ္။

Google က ဒီ component ေတြရဲ့ အေရာင္ေတြက ဘယ္လိုအေရာင္ေတြ ျဖစ္သင့္တယ္၊ icon ေတြရဲ့ အ႐ြယ္အစားက ဘယ္လို ျဖစ္သင့္တယ္၊ margin ေတြက ဘယ္ေလာက္ ျဖစ္သင့္တယ္၊ တခုနဲ႔ တခု အကြာအေ၀း ဘယ္ေလာက္ ျဖစ္သင့္တယ္၊ အေပၚကို ၾကြေနတဲ့ အရိပ္ အေနအထားက ဘယ္လို ျဖစ္သင့္တယ္၊ Application ရဲ့ theme ေတြက ဘယ္လို ျဖစ္သင့္တယ္၊ စာလံုးေတြရဲ့ အ႐ြယ္အစားနဲ႔ အေရာင္ေတြက ဘယ္လို ျဖစ္သင့္တယ္၊ animation ေတြက ဘယ္လို ပံုစံ ျဖစ္သင့္တယ္  စသည္ျဖင့္ အေသးစိတ္ လမ္းၫႊန္ခ်က္ေတြကို ေဖာ္ျပေပးထားပါတယ္။

Android programmer က ဒီအခ်က္ေတြကို အတိအက် လိုက္နာၿပီး ဒီဇိုင္း ေရးဆြဲသြားမယ္ ဆိုရင္ လွပၿပီး ဆြဲေဆာင္မႈ  ရွိတဲ့ application ေတြကို ဖန္တီးႏိုင္မွာ ျဖစ္ပါတယ္။

ဒီလို ဒီဇိုင္း သတ္မွတ္ခ်က္ေတြကို Android 5.0 (Lollipop) မွာ စတင္ ထည့္သြင္းေပးခဲ့ပါတယ္။ Programmer က Layout ေတြ၊ View ေတြ၊ Animation ေတြ ထည့္သြင္းလိုက္တဲ့အခါ Android SDK က ဒီသတ္မွတ္ခ်က္ေတြ အတိုင္း Material design နဲ႔ အလိုအေလ်ာက္ ပံုေဖာ္ ေပးသြားပါတယ္။

Android 5.0 မတိုုင္မီ SDK ကို အသံုးျပဳသူေတြအတြက္ Material design ကို ထည့္သြင္း အသံုးျပဳႏိုင္ဖို႔အတြက္ Backward compatible ျဖစ္ႏိုင္ဖို႔အတြက္လဲ android.support.design ဆိုတဲ့ Library ကိုဖန္တီး ျဖန္႔ေ၀ေပးခဲ့ပါတယ္။

အခု Tutorial series ကေတာ့ Android 5.0  ထက္ နိမ့္တဲ့ android devive အသံုးျပဳေနသူေတြ အတြက္ပါ Matetial design ပံုစံ ေပၚေစဖို႔အတြက္ android.support.design library ကိုသံုးၿပီး AIDE ေပၚမွာ ေရးသားဖန္တီးနည္းေတြကို ျပေပးသြားမွာ ျဖစ္ပါတယ္။

Material design ရဲ့ သိသာလြယ္တဲ့ ပံုစံမ်ား
==========

1. Activity ထိပ္က Toolbar
2. Toolbar ဘယ္ဘက္စြန္း က Home button
3. ထူးျခားတဲ့ Theme အေရာင္ေတြ
4. Text ေတြရဲ့ အရြယ္အစား နဲ႔ အေရာင္
5. Navigation drawer
6. Ripple button
7. ထူးျခားတဲ့ CheckBox
8. Floating Action Button
9. Swipe refresh
10. SnackBar
11. ထူးျခားတဲ့ Progress bar/circle
12. ထူးျခားတဲ့ Dialog box ပံုစံ
13. RecyclerView
14. CardView
15. Switches

အမ်ားႀကီးရွိပါေသးတယ္။