Applying L Design in EZTABLE APP

Transcript

1. Applying L Design in EZTABLE APP Mike Wu
2. Applying Part of (L Design) in EZTABLE APP Mike Wu
3. Hello, I`m Mike Wu Android Developer, EZTABLE Inc.
4. The behide story June 25 ~ 26 L design 釋出 designer: try it designer: try it 經驗分享 踏出第一步 designer: 你應該看 L guideline
5. Material Design
6. Material Design • 平台一致性 • 有意義的動畫 • 頁面的連續性 • 實體物件的感覺 紙張(paper): 重疊、深度、回饋
7. Google I/O 2014 App
8. Google I/O 2014 App: New Drawer
9. Google I/O 2014 App: New Drawer
10. New Drawer: How to Theme => material theme Layout => ? Code => ?
11. Material Theme Theme.Holo Theme.Holo.Light Theme.Holo.Light.DarkActionBar Theme.Material Theme.Material.Light Theme.Material.Light.DarkActionBar
12. Material Theme <style name="EZTABLE_theme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorPrimaryDark">@color/primary_dark</item> <item name="android:colorAccent">@color/accent</item> ... </style>
13. Drawer DrawerLayout DrawerToggle
14. Drawer DrawerLayout DrawerToggle
15. Drawer DrawerLayout DrawerToggle
16. How to? Basic concept
17. How to? Basic concept
18. How to? ToolBar New! Package android.widget.Toolbar New! Activity.setActionBar(Toolbar) > 新的container元件 > 可替代 ActionBar
19. Goal: Fake ActionBar • Layout way • Code
20. How to? layout way <?xml version="1.0" encoding="utf-8"?> <DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> </DrawerLayout>
21. How to? layout way <?xml version="1.0" encoding="utf-8"?> <DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> </DrawerLayout> <LinearLayout style="@style/HeaderBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/toolbar_actionbar" /> </LinearLayout>
22. How to? layout way <?xml version="1.0" encoding="utf-8"?> <DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> </DrawerLayout> <LinearLayout style="@style/HeaderBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/toolbar_actionbar" /> </LinearLayout>
23. How to? layout way: background // defined in style.xml <style name="HeaderBar"> <item name="android:elevation">2dp</item> <item name="android:background">?android:colorPrimary</item> </style>
24. How to? layout way: toolbar // defined in toolbar_actionbar.xml <Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:theme="@style/ActionBarThemeOverlay" android:id="@+id/toolbar_actionbar" android:layout_width="match_parent" android:layout_height="?android:actionBarSize" />
25. How to? Hide Old ActionBar <style name="EZTABLE_theme" parent="android:Theme.Material.Light.DarkActionBar"> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorPrimaryDark">@color/primary_dark</item> <item name="android:colorAccent">@color/accent</item> … <item name="android:windowActionBar">false</item> </style>
26. How to? in Code initialize toolbar // in onCreate() newActionBar = (Toolbar) findViewById(R.id.toolbar_actionbar); if (newActionBar != null) { setActionBar(newActionBar); }
27. How to? in Code set click event for toolbar newActionBar.setNavigationIcon(R.drawable.ic_drawer); newActionBar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (mDrawerLayout.isDrawerOpen(Gravity.START)) { mDrawerLayout.closeDrawer(Gravity.START); } else { mDrawerLayout.openDrawer(Gravity.START); } } });
28. Result
29. Activity Animation Transition Step 1: <style name=”EZTABLE_theme.Page” parent=”EZTABLE_theme”> … <item name="android:windowContentTransitions">true</item> <item name="android:windowSharedElementEnterTransition"> @transition/move_image/> <item name="android:windowSharedElementExitTransition"> @transition/move_image</item> ... </style>
30. Activity Animation Transition Step 2: ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(getActivity(), image, "photo"); getActivity().startActivity(i, options.toBundle());
31. Activity Animation Transition 設定viewName // layout on Activity 1 android:viewName="photo" // layout on Activiy 2 android:viewName="photo"
32. Activity Animation Transition 設定viewName 注意! For ListView // ith item of ListView on Activity 1 android:viewName="photo?" // ?：請塞unique id, e.g: position // layout on Activiy 2 android:viewName="photo"
33. reference android google I/O 2014 https://github.com/google/iosched.git material witness https://github.com/romainguy/google-io-2014.git
34. Demo
35. 招募 Android Developer 歡迎投遞履歷到 career@eztable.com