[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
   

   View Slide

2. Wear history
   

   View Slide

3. #dfua
   ~2012
   

   View Slide

4. #dfua
   

   View Slide

5. What is Android Wear?
   

   View Slide

6. #dfua
   Android Wear
   Simplicity
   Context
   Extension
   

   View Slide

7. #dfua
   

   View Slide

8. View
   

   View Slide

9. #dfua
   

   View Slide

10. #dfua
    This class represents the basic building block for user interface components.
    

    View Slide

11. WearViewStub
    Golden View of Wear?
    

    View Slide

12. Problem?
    

    View Slide

13. #dfua
    WearViewStub
    
    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">
    
    

    View Slide

14. WearViewStub
    

    View Slide

15. #dfua
    WearViewStub
    Is it perfect?
    

    View Slide

16. WearViewStub
    

    View Slide

17. BoxInsetLayout
    Mind your corners!
    

    View Slide

18. BoxInsetLayout
    

    View Slide

19. #dfua
    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">
    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" >
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="@string/text_long"/>
    
    
    

    View Slide

20. CircledImageView
    Circle-shape all the things!
    

    View Slide

21. #dfua
    CircledImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">
    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"/>
    
    

    View Slide

22. CircledImageView
    

    View Slide

23. DismissOverlayView
    Keep on dismissing!
    

    View Slide

24. #dfua
    WindowSwipeToDismiss = false
    <br/><item name="android:windowSwipeToDismiss"<br/>>false</item><br/>
    

    View Slide

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:id="@+id/dismiss_plain"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
    

    View Slide

26. DismissOverlayView
    

    View Slide

27. DelayedConfirmationView
    Not so fast!
    

    View Slide

28. DelayedConfirmationView
    

    View Slide

29. 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"/>
    

    View Slide

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();
    }
    

    View Slide

31. DelayedConfirmationView
    

    View Slide

32. GridViewPager
    Own card structure!
    

    View Slide

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()));
    

    View Slide

34. #dfua
    GridViewPager
    
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
    

    View Slide

35. GridViewPager
    

    View Slide

36. CardFragment
    Fill our card structure!
    

    View Slide

37. #dfua
    CardFragment
    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">
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_box="bottom">
    
    
    

    View Slide

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();
    }
    

    View Slide

39. CardFragment
    

    View Slide

40. App that rocks!
    

    View Slide

41. Thank you
    @tajchert
    google.com/+MichalTajchert
    github.com/tajchert
    tajchert.pl
    twitter
    g+
    github
    www
    

    View Slide