[Michal Tajchert] Wearables Views

Presentation from GDG DevFest - the biggest Google related event in Ukraine. October 24-25, Lviv. Learn more at http://devfest.gdg.org.ua/

Transcript

1. Android Wear Views #AndroidWear Michał Tajchert Polidea, Software Engineer
2. Wear history
3. #dfua ~2012
4. #dfua
5. What is Android Wear?
6. #dfua Android Wear Simplicity Context Extension
7. #dfua
8. View
9. #dfua
10. #dfua This class represents the basic building block for user interface components.
11. WearViewStub Golden View of Wear?
12. Problem?
13. #dfua WearViewStub <?xml version="1.0" encoding="utf-8"?> <android.support.wearable.view.WatchViewStub xmlns:android="http://schemas.android. com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/watch_view_stub" android:layout_width="match_parent" android:layout_height="match_parent" app:rectLayout="@layout/rect_activity_stub" app:roundLayout="@layout/round_activity_stub" tools:context=".StubActivity" tools:deviceIds="wear"> </android.support.wearable.view.WatchViewStub>
14. WearViewStub
15. #dfua WearViewStub Is it perfect?
16. WearViewStub
17. BoxInsetLayout Mind your corners!
18. BoxInsetLayout
19. #dfua BoxInsetLayout <?xml version="1.0" encoding="utf-8"?> <android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:orientation="horizontal" app:layout_box="all" > <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/text_long"/> </LinearLayout> </android.support.wearable.view.BoxInsetLayout>
20. CircledImageView Circle-shape all the things!
21. #dfua CircledImageView <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white"> <android.support.wearable.view.CircledImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:src="@drawable/ic_launcher" app:circle_border_color="#999999" app:circle_border_width="1dp" app:circle_color="#000" app:circle_radius="50dp"/> </FrameLayout>
22. CircledImageView
23. DismissOverlayView Keep on dismissing!
24. #dfua WindowSwipeToDismiss = false <style name="ThemeNoDismiss" parent="@android: style/Theme.DeviceDefault.Light"> <item name="android:windowSwipeToDismiss" >false</item> </style>
25. #dfua DismissOverlayView dismissOverlayView = (DismissOverlayView) findViewById(R.id.dismiss_plain); gestureDetector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() { @Override public void onLongPress(MotionEvent e) { dismissOverlayView.show(); } }); <android.support.wearable.view.DismissOverlayView android:id="@+id/dismiss_plain" android:layout_width="fill_parent" android:layout_height="fill_parent"/>
26. DismissOverlayView
27. DelayedConfirmationView Not so fast!
28. DelayedConfirmationView
29. DelayedConfirmationView <android.support.wearable.view.DelayedConfirmationView android:id="@+id/delayed_confirmation" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:src="@drawable/ic_launcher" app:circle_color="@color/blue" app:circle_radius="@dimen/circle_radius" app:circle_radius_pressed="@dimen/circle_radius_pressed" app:circle_padding="@dimen/circle_padding" app:circle_border_width="@dimen/circle_border_normal_width" app:circle_border_color="@color/white"/>
30. #dfua DelayedConfirmationView delayedConfirmationView = (DelayedConfirmationView) findViewById(R.id.delayed_confirmation); delayedConfirmationView.setTotalTimeMs(2000); delayedConfirmationView.setListener(ConfirmationOverlayActivity.this); ... implements DelayedConfirmationView.DelayedConfirmationListener{...} @Override public void onTimerFinished(View view) { view.setPressed(false); } @Override public void onTimerSelected(View view) { view.setPressed(true); delayedConfirmationView.start(); }
31. DelayedConfirmationView
32. GridViewPager Own card structure!
33. #dfua GridViewPager final Resources res = getResources(); final GridViewPager pager = (GridViewPager) findViewById(R.id.pager); pager.setOnApplyWindowInsetsListener(new View.OnApplyWindowInsetsListener() { @Override public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) { final boolean round = insets.isRound(); int rowMargin = res.getDimensionPixelOffset(R.dimen.card_margin); int colMargin = res.getDimensionPixelOffset(round ? R.dimen.padding_round : R.dimen. padding_rect); pager.setPageMargins(rowMargin, colMargin); return insets; } }); pager.setAdapter(new GridViewPagerCustomAdapter(this, getFragmentManager()));
34. #dfua GridViewPager <?xml version="1.0" encoding="utf-8"?> <android.support.wearable.view.GridViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" />
35. GridViewPager
36. CardFragment Fill our card structure!
37. #dfua CardFragment <android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android. com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="@drawable/robot_background" android:layout_height="match_parent" android:layout_width="match_parent"> <FrameLayout android:id="@+id/frame_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_box="bottom"> </FrameLayout> </android.support.wearable.view.BoxInsetLayout>
38. #dfua CardFragment protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear_activity2); FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); CardFragment cardFragment = CardFragment.create(getString(R.string.cftitle), getString(R.string.cfdesc),R.drawable.p); fragmentTransaction.add(R.id.frame_layout, cardFragment); fragmentTransaction.commit(); }
39. CardFragment
40. App that rocks!
41. Thank you @tajchert google.com/+MichalTajchert github.com/tajchert tajchert.pl twitter g+ github www