Giter VIP home page Giter VIP logo

surface-duo-compose-samples's Introduction

page_type name languages products description urlFragment
sample
Surface Duo - Jetpack Compose samples
kotlin
surface-duo
Samples showing how to use Jetpack Compose to achieve dual-screen user interface patterns.
all

build-test-check Compose Version

Surface Duo Jetpack Compose Samples

This repo contains samples built with Jetpack Compose for the Microsoft Surface Duo and other large screen and foldable devices. These samples demonstrate our dual-screen user interface patterns with the new UI framework.

Please read the code of conduct and contribution guidelines.

Getting Started

When importing the code samples into Android Studio, use the repository directory as the base directory of the project. This lets you access and run all of the sample modules from within the same project.

To learn how to load apps on the Surface Duo emulator, see the documentation, and follow our blog.

Please check out our page on Jetpack Compose for Microsoft Surface Duo for more details.

Prerequisites

  • Jetpack Compose version: 1.3.3

  • Jetpack WindowManager version: 1.1.0-alpha04

  • Android Studio version: Dolphin 2021.3.1

Microsoft Compose Libraries

The samples are built with Microsoft Compose libraries, TwoPaneLayout, WindowState, ComposeTesting and DragAndDrop.

Contents

Sample Description
ComposeGallery ComposeGallery app icon Sample with a Microsoft Surface Duo theme that shows how to use the List Detail app pattern.
CompanionPane CompanionPane app icon Photo editor sample that shows how to build the Companion Pane app pattern in Jetpack Compose.
ExtendedCanvas ExtendedCanvas app icon Map sample that shows how to build the Extended Canvas app pattern in Jetpack Compose.
ListDetail ListDetail app icon Photo gallery sample that shows how to build the List Detail app pattern in Jetpack Compose.
DualView DualView app icon Restaurant finder sample that shows how to build the Dual View app pattern in Jetpack Compose.
DyAdd DyAdd app icon Calculator sample that uses the Extended Canvas app pattern in Jetpack Compose.
Two Page TwoPage app icon E-reader sample that shows how to build the Two Page app pattern in Jetpack Compose.
NavigationRail NavigationRail app icon Nature-themed sample that shows how to use a combination of NavigationRail and BottomNavigation when building apps for large screen and foldable devices in Jetpack Compose.
SourceEditor Source editor sample that shows how to build the Dual View app pattern in Jetpack Compose.
VideoPlusChat Video streaming platform sample that displays a video and accompanying chat in a Companion Pane app pattern.
DragAndDrop DragAndDrop app icon Drag and Drop sample that shows how to implement drag and drop in your Android app, following the Android drag and drop guidance in Jetpack Compose.
Diary Diary app sample that encorporates Calendar view on one pane and diary editor for the selected date on the other pane, following the Android Companion Pane app pattern.

Social links

Blog post Video
Relay Anchor Leg: Overall impressions Twitch #102: Relay for Jetpack Compose
Relay Leg 2: Tips and tricks see above
Pass the design baton with Relay see above
Compose TwoPaneLayout updates Twitch #100: Compose TwoPaneLayout updates
Jetpack Compose Accompanist TwoPane Twitch #89: Jetpack Compose Accompanist TwoPane
Improving app accessibility with Jetpack Compose Twitch #88: Jetpack Compose Accessibility
Dual-screen example adds Jetpack Compose to the experience Twitch #86: Adding Jetpack Compose to existing apps
Source Editor & Diary samples for Jetpack Compose Twitch #79: More new Jetpack Compose samples
Video+Chat and Calculator samples for Jetpack Compose Twitch #77: New Jetpack Compose samples
Jetpack Compose TwoPaneLayout update Twitch #76: Jetpack Compose TwoPaneLayout update
Write foldable tests quickly with Test Kit Twitch #63: Test Kit for foldable apps
Jetpack Compose UI testing Twitch #59: Jetpack Compose testing
Jetpack Compose WindowState preview Twitch #53: Jetpack Compose WindowState for foldable devices
Get started with Jetpack Compose Twitch #44: Get started with Jetpack Compose
Jetpack Compose Navigation Rail Twitch #42: Jetpack Compose Navigation Rail
New TwoPaneLayout Compose library preview Twitch #25: TwoPaneLayout preview for Jetpack Compose
Jetpack Compose foldable and dual-screen development Twitch #9: Jetpack Compose samples
Jetpack Compose on Microsoft Surface Duo N/A

Related links

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

License

Copyright (c) Microsoft Corporation.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

surface-duo-compose-samples's People

Contributors

alinargeanu avatar cesarvaliente avatar joyl1216 avatar khalp avatar leviortega avatar mairwunnx avatar microsoftopensource avatar unmeshpadhye avatar whitescent avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

surface-duo-compose-samples's Issues

[Diary] Edit Diary has same content after change of date

๐Ÿ› Describe the bug

Need to clear the editor after the diary is saved, or the date is changed

โš ๏ธ Current behavior

Content stays the same in editor

โœ”๏ธ Expected behavior

Clearning the editor to default placeholder text every time we change the date or save the diary

๐Ÿชœ Steps to reproduce

๐Ÿ“ท Screenshots

๐Ÿ“ฑ Tech info

  • Name of the sample:
  • Latest repo commit:
  • Device/emulator version/model:
  • OS:

[TwoPaneLayout] Update Compose version

Update TwoPaneLayout to use Compose version 1.0.3 or the latest stable release. This also means that TwoPaneLayout will have to be updated to version alpha-09. Check out this PR to see all the places where the version may need to be changed! It's possible that androidx.activity:activity-compose and/or android.navigation:navigation-compose may also need updating.

Once this has been merged, our team can update GitHub and Maven Central with the new release.

Kotlen Error

Hi i am a new in code i am taking a course on Kotlin and i have an issue i download a Kotlin in vscode and when i run a simple code its give me an error as i know i download the latest
java 17 and add it to path this is my code i want to understand what i missing and how i do solve the error and thank you.

fun main() {
println("Hello World")
}
and this is the output

[Running] cd "c:\Users\tariq\Desktop" && kotlinc Hello World.kt -include-runtime -d Hello World.jar && java -jar Hello World.jar
error: source file or directory not found: Hello
error: source file or directory not found: World.kt
error: source file or directory not found: World.jar

[Done] exited with code=1 in 2.459 seconds

[Video Plus Chat] Animate Layout Changes

๐Ÿ’ก Describe the feature

The views sample of this project has animations because of motion layout, so if we could use Constraint Layout to animate through the composable changes it would look good.

๐Ÿ†• New component or addition to an existent one?

Addition

๐Ÿ–ผ๏ธ Support images

๐Ÿ™‹โ€โ™€๏ธ Do you want to build the feature?

  • Yes
  • No

[ComposeSamples] Update Compose version

PREQUISITE: TwoPaneLayout PR needs to be merged and released on Maven Central

Update all of the Compose samples to use Compose version 1.0.3 or the latest stable release. Check out this PR to see all the places where the version may need to be changed! It's possible that androidx.activity:activity-compose and/or android.navigation:navigation-compose may also need updating.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.