[Michal Tajchert] Wearables Views

[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/

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 25, 2014
Tweet

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