Coder Social home page Coder Social logo

dawindergill / adaptiveui-jetpackcompose Goto Github PK

View Code? Open in Web Editor NEW
6.0 1.0 1.0 559 KB

Adaptive UI Jetpack Compose: Open-source project showcasing adaptive designs for phones, tablets, and folding devices using Jetpack Compose. Empowers developers to create user-friendly Android applications with responsive interfaces.

Home Page: https://medium.com/@dawinderapps/311bc6136748

Kotlin 100.00%
adaptive-design adaptive-layouts android-application androiddevchallenge-compose androiddeveloper androiddevelopment jetpack-android jetpack-compose jetpack-navigation jetpackcompose

adaptiveui-jetpackcompose's Introduction

CodeStyle Compose Kotlin Android API License Apache 2.0

Jetpack Compose Adaptive UI

(Phones, Tablets & Folding Devices)

Adaptive UI Jetpack Compose is a demo open-source project that showcases how to create adaptive designs using Jetpack Compose for different screen sizes, including phones, tablets, and folding devices.

The project demonstrates best practices and techniques for building responsive user interfaces that adapt to various device form factors and postures. It covers topics such as window layout information tracking, handling folding features, and implementing different navigation patterns based on the device's capabilities.

You can read the step by step guide in my medium story.

๐ŸŒณ Environment

Android Studio verison used : Android Studio Hedgehog | 2023.1.1 Canary 11

๐Ÿ–ผ๏ธ Demo Screens

Phone Portrait
( Screen Size : Compact)
(< 600 dp)
Phone Landscape
( Screen Size : Medium)
(600 - 840 dp)
Tablet Portrait
( Screen Size : Medium)
(600 - 840 dp)
Tablet Landscape
( Screen Size : Expanded)
(> 840 dp)
Folding Device Closed
( Screen Size : Compact)
(< 600 dp)
Folding Device Opened
( Screen Size : Medium)
(600 - 840 dp)
Folding Device Portrait Closed
( Screen Size : Medium)
(600 - 840 dp)
Folding Device Portrait Opened
( Screen Size : Medium)
(600 - 840 dp)
Folding Device Landscape Closed
( Screen Size : Compact)
(< 600 dp)
Folding Device Landscape Opened
( Screen Size : Expanded)
(> 840 dp)

๐Ÿ’ฐ Bonus Knowledge

In this project, we have utilized TOML (Tom's Obvious, Minimal Language) as a configuration file format for managing Gradle dependencies and plugins. TOML provides a clean and easy-to-read syntax, making it simpler to manage and maintain the project's dependencies.

By using a TOML file, we can define and organize our Gradle dependencies and plugins in a structured manner. This approach enhances the readability and maintainability of our build configuration.

The TOML file in this project serves as a centralized location to specify the required dependencies and plugins, ensuring consistency across different build scripts. By utilizing TOML, we have streamlined the process of managing dependencies and plugins, making the project more efficient and easier to maintain.

Here is a basic example of what you can achieve with TOML:

From

// Top-level `build.gradle.kts` file
plugins {
   id("com.android.application") version "7.4.1" apply false

}

// Module-level `build.gradle.kts` file
plugins {
   id("com.android.application")

}
dependencies {
    implementation("androidx.core:core-ktx:1.9.0")

}

To

// Top-level build.gradle.kts
plugins {
   alias(libs.plugins.android.application) apply false

}

// module build.gradle.kts
plugins {
   alias(libs.plugins.android.application)

}
dependencies {
   implementation(libs.androidx.ktx)

}

By adding code like this in libs.versions.toml

[versions]
ktx = "1.9.0"
androidGradlePlugin = "7.4.1"

[libraries]
androidx-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "ktx" }

[plugins]
android-application = { id = "com.android.application", version.ref = "androidGradlePlugin" }

Feel free to explore the TOML configuration file in this project and adapt the approach to fit your own build management needs. You can find this file in project gradle folder with this name libs.versions.toml.

๐Ÿค Contributing

Contributions are what make the open-source community such a fantastic place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you would like to contribute, please follow these steps:

  1. Open an issue first to discuss what you would like to change.
  2. Fork the Project
  3. Create your feature branch (git checkout -b feature/amazing-feature)
  4. Commit your changes (git commit -m 'Add some amazing feature')
  5. Push to the branch (git push origin feature/amazing-feature)
  6. Open a pull request

Please make sure to update tests as appropriate.

โœ๏ธ Author

๐Ÿ‘ค DawinderGill

Linkedin Google Play Medium

Feel free to ping me ๐Ÿ˜‰

๐Ÿ“ License

Copyright ยฉ 2023 - DawinderGill

adaptiveui-jetpackcompose's People

Contributors

dawindergill avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

fhchina

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.