$30 off During Our Annual Pro Sale. View Details »

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

Google Developers Group Lviv

October 25, 2014
Tweet

More Decks by Google Developers Group Lviv

Other Decks in Programming

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