Giter VIP home page Giter VIP logo

surface-duo-compose-sdk's Introduction

build-test-check Compose Version

Surface Duo Jetpack Compose SDK

This repo contains components built with Jetpack Compose for the Microsoft Surface Duo and other large screen and foldable devices.

Please read the code of conduct and contribution guidelines.

Prerequisites

  • Jetpack Compose version: 1.4.3
  • Jetpack Window Manager version: 1.1.0-beta02
  • Android Studio version: Flamingo 2022.2.1

Getting Started

When importing the component source code into Android Studio, use the specific component folder (ex: TwoPaneLayout) as the base directory of the 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.

Contents

A UI component that helps you build two-pane layout for dual-screen, foldable, and large-screen devices.

Latest Update: 1.0.1-alpha07 (May 23rd, 2023)

A utility component that helps you easily get details about the window state of dual-screen, foldable, and large-screen devices.

Latest Update: 1.0.0-alpha09 (May 4th, 2023)

Helper functions that help you easily test your application on the dual-screen, foldable and large screen devices.

Latest Update: 1.0.0-alpha09 (May 5th, 2023)

A Compose component that helps you build drag and drop feature on any Android devices, especially dual-screen, foldable and large-screen devices.

Latest Update: 1.0.0-alpha05 (May 5th, 2023)

Social links

Blog post Video
Improved navigation support in TwoPaneLayout N/A
Blossoming love for Compose animation Twitch #105: Jetpack Compose animations
Blooming love for Compose animation see above
Budding love for Compose animation see above
JetchatGPT improvements: error handling and animations Twitch #104: Working with OpenAI on Android and building JetchatGPT
Jetchat with OpenAI on Android see above
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.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

surface-duo-compose-sdk's People

Contributors

cesarvaliente avatar joyl1216 avatar khalp avatar microsoft-github-operations[bot] avatar microsoftopensource 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

surface-duo-compose-sdk's Issues

TwoPaneLayoutNav can find route for pane1 but not for pane2

Hi team, 
long time no see but here I'm with another problem which is properly caused by not understanding the API.

I use the version:

implementation("com.microsoft.device.dualscreen:twopanelayout:1.0.1-alpha06")

My code
Based on the tutorial, I tried to get my TwoPaneLayoutNav working.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()

            TwoPaneLayoutNav(
                navController = navController,
                singlePaneStartDestination = "regions",
                pane1StartDestination = "regions",
                pane2StartDestination = "regions"
            ) {
                composable("regions") {
                    RegionsScreen(
                        navigateToRegion = { id -> navController.navigate("regions/${id}")}
                    )
                }
                composable("regions/{id}") { backStackEntry ->
                    val id = backStackEntry.arguments?.getString("id")
                    RegionScreen(regionId = id ?: "A")
                }
            }
        }
    }
}

*The problem *
But as soon as I span the app across both screens, the app crashes with the following error:

java.lang.IllegalArgumentException: Invalid route regions, not present in list of routes []

I tried not just regions but regions/a, too. Both does not work. If I introduce another path like "test" is also does not work. In single screen mode, everything works as expected.

Thanks for your help!

Navigation Rail

I have a Scaffold in the MainActivity which shows a NavigatioRail or a Bottom Bar component depending on whether the app is spanned or it's a foldable Expanded device or it's a Compact/Medium display (i just used WindowsState as stated in some other Windows example projects). The NavigationRail is wrapped as a Component into a Row layout into the Scaffold and I noticed that when it's laid out Horizontally, the first pane just gets cut out at the very end whilst the second pane is laid out correctly.
One more thing: I didn't assign a weight to none of the 2 panes.
Could you please fix this? Thanks

[BUG] Current DragAndDrop API is unworkable

🐛 Describe the bug

The DragAndDrop API in its current form is not possible to use.

⚠️ Current behavior

Functions have dubious naming:

  • DragContainer and DropContainer sound like counterparts but they are not. DragTarget is the current counterpart for DropContainer. Try to use them by their current naming and it doesn't even layout correctly - DragContainer does something to break the component being added to layouts.
  • DragTarget makes no sense because "target" refers to where you are dropping the thing. Usually we refer to the place where you start the operation as the "drag source".
  • What DragContainer actually appears to be for is... just drawing the overlay? So maybe a good name would be DragAndDropOverlay or something to that effect.

Next issue is, the MIME type system isn't flexible enough to actually use, real data transfer pretty much lets you have anything you want.

Last issue is major, the current API requires the draggable data to be constructed in order to declare the drag target. You don't want to eagerly instantiate the draggable data for every item in the application. That's how you make an application run out of memory. Instead, there should be some kind of callback to create the draggable data which would be one of the parameters for the drag source.

I also expected some kind of method for consuming the thing when it was dropped but I couldn't find it at all. Actually I'd expect two callbacks. One for the drop target to inform it that some data has been dropped, and another for the drag source to inform it that the data has been dragged out (at the time when the drop happens, though, not as soon as it's picked up, otherwise when the user cancels the drag by hitting Escape, they will find out they have nothing left).

So all up I don't think this library is usable to implement drag and drop, but it does give good, solid examples of how the different bits have to be fit together to make drag and drop work, which is helpful anyway.

✔️ Expected behavior

The library can be used without hassle, the API makes sense and things generally work.

🪜 Steps to reproduce

📷 Screenshots

📱 Tech info

  • Name of the library:
  • Library/sample version:
  • Device/emulator version/model:
  • OS:

[BUG] [1.0.1-alpha07] Incompatibility with "androidx.navigation:navigation-compose:2.6.0"

🐛 Describe the bug

I found that after updating the navigation-compose dependency to 2.6.0 the navigateToPane2() function crashes with the following log:

FATAL EXCEPTION: main Process: com.xxx.xxx, PID: 12507 java.lang.NoSuchMethodError: No virtual method getBackQueue()Lkotlin/collections/ArrayDeque; in class Landroidx/navigation/NavHostController; or its super classes (declaration of 'androidx.navigation.NavHostController' appears in /data/app/~~phM2qZ5vae1iOopB_iXCPg==/com.xxx.xxx-QMpXgWBhbZ6qhfai2lCApw==/base.apk!classes15.dex) at com.microsoft.device.dualscreen.twopanelayout.twopanelayout.TwoPaneLayoutCoreKt$SinglePaneContainer$3.invoke(TwoPaneLayoutCore.kt:72) at com.microsoft.device.dualscreen.twopanelayout.twopanelayout.TwoPaneLayoutCoreKt$SinglePaneContainer$3.invoke(TwoPaneLayoutCore.kt:71)

⚠️ Current behavior

FATAL EXCEPTION: main Process: com.xxx.xxx, PID: 12507 java.lang.NoSuchMethodError: No virtual method getBackQueue()Lkotlin/collections/ArrayDeque; in class Landroidx/navigation/NavHostController; or its super classes (declaration of 'androidx.navigation.NavHostController' appears in /data/app/~~phM2qZ5vae1iOopB_iXCPg==/com.xxx.xxx-QMpXgWBhbZ6qhfai2lCApw==/base.apk!classes15.dex) at com.microsoft.device.dualscreen.twopanelayout.twopanelayout.TwoPaneLayoutCoreKt$SinglePaneContainer$3.invoke(TwoPaneLayoutCore.kt:72) at com.microsoft.device.dualscreen.twopanelayout.twopanelayout.TwoPaneLayoutCoreKt$SinglePaneContainer$3.invoke(TwoPaneLayoutCore.kt:71)

✔️ Expected behavior

No crash

🪜 Steps to reproduce

  1. Add the following dependencies
    androidx.navigation:navigation-compose:2.6.0
    com.microsoft.device.dualscreen:twopanelayout:1.0.1-alpha07
  2. Use the function navigateToPane2()
  3. App crashes

📱 Tech info

  • Name of the library: com.microsoft.device.dualscreen:twopanelayout
  • Library/App version: 1.0.1-alpha07
  • Device/emulator version/model: Pixel 6
  • OS: SDK 34

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.