https://github.com/re-ovo/compose-setting
A setting library for Jetpack Compose with Material You design
https://github.com/re-ovo/compose-setting
android jetpack-compose kotlin material-you setting
Last synced: 2 days ago
JSON representation
A setting library for Jetpack Compose with Material You design
- Host: GitHub
- URL: https://github.com/re-ovo/compose-setting
- Owner: re-ovo
- License: mit
- Created: 2022-04-20T08:54:37.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-30T09:14:53.000Z (almost 3 years ago)
- Last Synced: 2025-05-07T02:05:23.066Z (10 months ago)
- Topics: android, jetpack-compose, kotlin, material-you, setting
- Language: Kotlin
- Homepage:
- Size: 246 KB
- Stars: 18
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ComposeSetting
This is a basic Compose setting library that provides a basic [Material3](https://m3.material.io) setting components
It also provides a persistent state system based on [MMKV](https://github.com/Tencent/MMKV).
Compared with SharedPreference/DataStore, it can **support synchronous reading without loss of performance**
## Features
* Remember Preference
* Material3 Setting Component
* High Performance
* Support Synchronous Reading/Writing
## Screenshot
## Import to your project
1. Import jitpack to your repository
```groovy
repositories {
maven {
url 'https://jitpack.io'
}
}
```
2. Import the library 
```groovy
implementation 'com.github.re-ovo:compose-setting:'
```
## Remember Preference
You should initialize the MMKV before using it.
```kotlin
// Call this function in your Application.onCreate()
initComposeSetting()
```
You can use `rememberXXXPreference` function, which can **persist** remember a certain value in Compose
```kotlin
val booleanPreference by rememberBooleanPreference(
key = "boolean_preference",
default = false
)
```
Other types of preference can be used as well, such as
* `rememberStringPreference`
* `rememberIntPreference`
* `rememberLongPreference`
* `rememberFloatPreference`
* `rememberDoublePreference`
* `rememberStringPreference`
* `rememberStringSetPreference`
If you want to read/write the preference synchronously without Compose context, you can use `mmkvPreference`
to do that:
```kotlin
mmkvPreference.getBoolean("boolean_preference", false)
mmkvPreference.putBoolean("boolean_preference", true)
...
```
## Setting Components
This library provides several out-of-the-box setting item components
### SettingBooleanItem
This component is used to display a setting item with a boolean value
```kotlin
val booleanPref = rememberBooleanPreference(
key = "boolean_preference",
defaultValue = false
)
SettingBooleanItem(
state = booleanPref,
title = {
Text("Network")
},
text = {
Text("This is the description")
},
icon = {
Icon(Icons.Outlined.Notifications, null)
}
)
```
### SettingStringItem
This component is used to display a setting item with a string value
```kotlin
val stringPref = rememberStringPreference(
key = "string_preference",
defaultValue = "default"
)
// Pick Based
SettingStringPickerItem(
state = stringPref,
title = {
Text("Set Phone Brand")
},
text = {
Text("Select your phone brand")
},
icon = {
Icon(Icons.Outlined.Phone, null)
},
stateRange = setOf(
"Xiaomi", "Google", "Oppo"
)
)
// Input Field Based
SettingStringInputDialogItem(
state = stringPref,
title = {
Text("Set Phone Brand")
},
icon = {
Icon(Icons.Outlined.Phone, null)
},
validator = { value ->
value.length >= 3
},
invalidMessage = {
Text("Invalid Phone Brand")
},
confirmText = {
Text("Confirm")
},
dismissText = {
Text("Dismiss")
}
)
```
### SettingLinkItem
This component is used to display a basic setting item
```kotlin
SettingLinkItem(
title = {
Text("Network")
},
text = {
Text("This is the description")
},
icon = {
Icon(Icons.Outlined.Notifications, null)
},
onClick = {
// do something by yourself
}
)
```
### SettingItemCategory
This component is used to display a category of setting items
```kotlin
SettingItemCategory(
title = {
Text(text = "Compose Yes")
}
) {
// Your Menu Items Here
}
```
