{"id":636,"date":"2020-08-27T14:42:39","date_gmt":"2020-08-27T21:42:39","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=636"},"modified":"2021-10-07T13:25:50","modified_gmt":"2021-10-07T20:25:50","slug":"noteworthy-new-app-sample-twonote","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/noteworthy-new-app-sample-twonote\/","title":{"rendered":"Noteworthy new Surface Duo app sample"},"content":{"rendered":"

Hello\u00a0Microsoft\u00a0Surface Duo developers,<\/p>\n

Parker and I are just about to finish up our internship on the Surface Duo Developer Experience team and we\u2019ve had a great time! Throughout the past 12 weeks, we\u2019ve worked on building sample apps, contributing to documentation, supporting internal and external customers, and just learning a lot about working with Android and the Surface Duo!<\/p>\n

Before we leave, we wanted to give you one last sample that highlights how to enhance your apps for dual-screen devices. Since the Surface Duo is productivity-focused, we decided to integrate various dual-screen features (including dual-screen app patterns, drag and drop, and pen events) into an open-source note-taking app.<\/p>\n

For this sample, we took a lot of inspiration from existing note-taking apps and decided to pay homage to both OneNote and dual-screen devices by naming our sample TwoNote \ud83d\ude0a. You can download the code or view the source on GitHub from the Microsoft Samples Browser<\/a>.<\/p>\n

It’s been great to watch TwoNote grow from a simple concept pitched by our team, through the mockups, and eventually become a complete app. It’s been even greater to see you all visiting and cloning our app samples GitHub repo<\/a>, and we hope our work will continue to be useful to you after we’ve completed our internship at Microsoft!<\/p>\n

\"TwoNote<\/p>\n

Figure 1. Initial mockups for TwoNote<\/em><\/p>\n

Note-able features<\/h2>\n

We created TwoNote first and foremost to show developers the different ways you can enhance your apps for the Surface Duo, especially for pen support. If you\u2019re looking for a truly great dual-screen note-taking experience, be sure to check out OneNote<\/a> when your preordered Surface Duo<\/a> arrives \ud83d\ude09 The TwoNote sample provides basic note-taking functionality, enabling users create notes and note categories to keep everything organized. Within each note, users can add content via the three editing modes: text mode, image mode, and ink mode. Editing modes are selected using the icons on the right of the navigation bar.<\/p>\n

Pen support<\/h3>\n

Building on the pen events blog post<\/a> and hinge angle sample<\/a>, we developed a pressure-sensitive inking experience in this sample that allows for smoother writing. When in ink mode, users can control stroke color and thickness to add more realistic writing and drawings to their notes. We also added highlighting, erasing, and undo functionality.<\/p>\n

\"List-detail<\/p>\n

Figure 2. Inking features in TwoNote include pressure-sensitive writing, highlighting, erasing, color selection, and variable stroke thicknesses<\/em><\/p>\n

To create a pressure-sensitive pen experience, we built a custom Stroke<\/a> class that\u2019s made up of a list of individual Paths. Since the Path<\/a> class provided by Android can only draw lines with fixed widths, we used these as building blocks to construct variable-thickness Strokes that simulated the brush strokes of a paintbrush. In the code snippet below, you can see how, when different pressures are detected, new Paths are continuously added to the Stroke, causing the writing to appear smoother and more natural:<\/p>\n

fun continueDrawing(x: Float, y: Float, pressure: Float) {\r\n    if (pressure == prevPressure && pathList.isNotEmpty())\r\n        continuePath(x, y)\r\n    else\r\n        addPath(x, y, pressure)\r\n}\r\n\r\nprivate fun addPath(x: Float, y: Float, pressure: Float) {\r\n    finishPath()\r\n    initPath()\r\n\r\n    val path = Path()\r\n    path.moveTo(xCoord, yCoord)\r\n    path.lineTo(x, y)\r\n    pathList.add(path)\r\n    pathBounds.add(RectF())\r\n\r\n    updateValues(x, y, pressure)\r\n}<\/pre>\n
Drag and drop<\/h3>\n
When in text or image modes, users can import data to the note through drag and drop. Once imported, text can be added or deleted as desired, and images can be resized, moved, or deleted within the note. For other examples of drag and drop, check out this drag and drop sample<\/a> or our other sample apps, SourceEditor<\/a> and PhotoEditor<\/a>.<\/p>\n
\"Gif<\/p>\n
Figure 3. After dragging an image into a note, it can then be moved around and resized<\/em><\/p>\n
List-detail and extended canvas<\/h3>\n
Instead of only focusing on one dual-screen app pattern, this time we incorporated multiple patterns into the sample. The list-detail<\/a> pattern is used when the app is in dual-portrait mode, which allows the user to simultaneously view a list of existing notes and a more detailed view of a selected note.<\/p>\n
\"List-detail<\/p>\n
Figure 4. List-detail view in TwoNote<\/em><\/p>\n
When rotating the app into dual-landscape mode, however, the app switches to the extended canvas<\/a> pattern. This increased screen real estate is useful when editing note contents as it provides more space for typing, manipulating images, and drawing.<\/p>\n
\"Extended<\/p>\n
Figure 5. Extended canvas view in TwoNote<\/em><\/p>\n
Feedback<\/h2>\n
We hope this sample is useful and shows you how multiple dual-screen enhancements can be integrated into your apps! We also hope this helps you get started with using our new dual-screen controls<\/a> and incorporating pen support into your apps.<\/p>\n
We\u2019d love to hear from you! Please leave us feedback\u00a0or just share your testing tips\u00a0using\u00a0our\u00a0feedback forum<\/a>,\u00a0or message us on\u00a0Twitter<\/a>, Github (Kristen)<\/a>, or Github (Parker)<\/a>.<\/p>\n
Postscript<\/h2>\n
As summer comes to a close, it\u2019s time for our interns Kristen and Parker to return to their academic careers. All of us on the Surface Duo Developer Experience team would like to acknowledge their hard work and contributions to the team and ultimately, to our customers, by helping us develop and enhance awesome experiences for the Surface Duo. If getting involved in cutting-edge product development is something you\u2019d also be interested in, and you\u2019re a student or recent graduate, we invite you to visit our student careers site<\/a> to learn more about internship and job opportunities at Microsoft! – Craig<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Hello\u00a0Microsoft\u00a0Surface Duo developers, Parker and I are just about to finish up our internship on the Surface Duo Developer Experience team and we\u2019ve had a great time! Throughout the past 12 weeks, we\u2019ve worked on building sample apps, contributing to documentation, supporting internal and external customers, and just learning a lot about working with Android […]<\/p>\n","protected":false},"author":72597,"featured_media":662,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,473,366,45],"class_list":["post-636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-kotlin","tag-pen","tag-surface-duo-sdk"],"acf":[],"blog_post_summary":"
Hello\u00a0Microsoft\u00a0Surface Duo developers, Parker and I are just about to finish up our internship on the Surface Duo Developer Experience team and we\u2019ve had a great time! Throughout the past 12 weeks, we\u2019ve worked on building sample apps, contributing to documentation, supporting internal and external customers, and just learning a lot about working with Android […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/72597"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=636"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/636\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/662"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}