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

Feel free to ping me 😉

📝 License

Copyright © 2023 - DawinderGill