Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/esafirm/compose-ui-book
UI Component Explorer for Android
https://github.com/esafirm/compose-ui-book
android hacktoberfest showcase ui ui-explorer
Last synced: about 2 months ago
JSON representation
UI Component Explorer for Android
- Host: GitHub
- URL: https://github.com/esafirm/compose-ui-book
- Owner: esafirm
- License: mit
- Created: 2021-04-25T07:18:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-23T04:25:06.000Z (about 2 years ago)
- Last Synced: 2023-08-06T04:42:02.224Z (over 1 year ago)
- Topics: android, hacktoberfest, showcase, ui, ui-explorer
- Language: Kotlin
- Homepage: https://dashing-concha-94e896.netlify.app/
- Size: 1.42 MB
- Stars: 67
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Compose UI Book
Simple and extensible UI component explorer for Jetpack Compose and Android View
You can check the demo video here
## Getting Started
Usually the UI component explorer is separated from the main app despite you have Android only or KMP project.
So the first thing you should do is to create a module with this `build.gradle.kts` (or `build.gradle` if you're using
Groovy)
### Setup Module - KMP
```kotlin
plugins {
id("com.android.application")
id("org.jetbrains.kotlin.multiplatform")
id("org.jetbrains.compose")
id("com.google.devtools.ksp")
}
// This could be in settings.gradle or root build.gradle
repositories {
mavenCentral()
}
kotlin {
jvm("desktop")
android()
sourceSets {
named("commonMain") {
dependencies {
implementation("io.github.esafirm.uibook:browser-app:x.y.z")
}
}
named("androidMain") {
dependencies {
// This is optional. If you use app compat then include this
implementation("androidx.appcompat:appcompat:1.3.1")
implementation("com.google.android.material:material:1.4.0")
}
}
named("desktopMain") {
dependencies {
// This is mandatory as the current OS is not packaged in POM file
implementation(compose.desktop.currentOs)
}
}
}
}
android {
// Insert Android related configuration in here
}
compose.desktop {
// Insert compose desktop related configuration in here
}
dependencies {
val processorDep = "io.github.esafirm.uibook:annotations-processor:x.y.z"
add("kspAndroid", processorDep)
add("kspDesktop", processorDep)
}
```
> :heavy_exclamation_mark: **Info**: Please check the [minimum KMP example](/examples/minimum-kmp) for more complete
> setup.
### Setup Module - Android Only
```kotlin
plugins {
id("com.android.application")
id("org.jetbrains.compose")
id("com.google.devtools.ksp")
kotlin("android")
}
android {
// Insert Android related configuration in here
}
dependencies {
implementation("io.github.esafirm.uibook:browser-app:x.y.z")
implementation("androidx.appcompat:appcompat:1.3.1")
implementation("com.google.android.material:material:1.4.0")
ksp("io.github.esafirm.uibook:annotations-processor:x:y:z")
}
```
> :heavy_exclamation_mark: **Info**: Please check the [minimum android example](/examples/minimum-android) for more
> complete setup.
change `x.y.z` to version in the [release page](https://github.com/esafirm/android-ui-book/releases)
### Create First Book
To create book simple create an extension function that extend `BookHost` and give the function `@UIBook`
annotation.
In this case I will create a Kotlin file with name `Catalogue.kt` and then create this function:
```kotlin
@UIBook(name = "Compose Button")
@Composable
fun BookHost.SimpleCouter() {
val (count, setCount) = remember { mutableStateOf(0) }
Button(onClick = { setCount(count + 1) }) {
Text(text = "Counter $count")
}
}
```
That's it now run the new module that you just created.
### Android View Support
For Android target, it supports the Android `View`, just add the return type to the function
```kotlin
@UIBook(name = "Android TextView")
fun BookHost.SimpleTextView(): TextView {
/**
* This will draw text
*/
return TextView(context).apply {
text = "Hello World"
}
}
```
## Advanced
You can check the [demo module](/examples/demo) for complete features.
## Development
To develop the project, you need to use Android Studio Dolphin above.
It have some strange issue with IntelliJ Idea 2022.3 EAP.
### Running the Demo
To run the Android sample run this command:
```bash
./gradlew :examples:demo:installDebug
```
To run the Desktop sample run this command:
```bash
./gradlew :examples:demo:run
```
## Support
## License
Esa @ MIT