A setting library for Jetpack Compose with Material You design

Overview

ComposeSetting

This is a basic Compose setting library that provides a basic Material3 setting components It also provides a persistent state system based on 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
repositories {
    maven {
        url 'https://jitpack.io'
    }
}
  1. Import the library
implementation 'com.github.re-ovo:compose-setting:<latest-version>'

Remember Preference

You should initialize the MMKV before using it.

// Call this function in your Application.onCreate()
initComposeSetting()

You can use rememberXXXPreference function, which can persist remember a certain value in Compose

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:

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

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

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

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

 SettingItemCategory(
    title = {
        Text(text = "Compose Yes")
    }
) {
    // Your Menu Items Here
}

You might also like...
New style for app design and Movies App with Movies API JetMaxMovies made in Jetpack Compose.๐Ÿ˜‰๐Ÿ˜Ž
New style for app design and Movies App with Movies API JetMaxMovies made in Jetpack Compose.๐Ÿ˜‰๐Ÿ˜Ž

JetMaxMovie New style for app design and Movies App with Movies API JetMaxMovies made in Jetpack Compose. ๐Ÿ˜‰ ๐Ÿ˜Ž (Navigation Compose,Dagger-Hilt, Mater

A sample of how to implement a design system in Jetpack Compose

[WIP] Sample Design System This project aims to hold an example of how to implement a design system with Jetpack Compose. At this moment it only has t

Fake Toss Design System with Jetpack Compose
Fake Toss Design System with Jetpack Compose

FTDS Fake Toss Design System Let's clone TDS with Jetpack Compose! TDS์˜ ๋ชจ๋“  ๋ฉด์„ ๋”ฐ๋ผ

ComposeLoginScreen - A sleek design of a simple login screen using Jetpack Compose
ComposeLoginScreen - A sleek design of a simple login screen using Jetpack Compose

ComposeLoginScreen A sleek design of a simple login screen using Jetpack Compose

Andromeda is a open-source design language system implemented in Jetpack Compose.
Andromeda is a open-source design language system implemented in Jetpack Compose.

Andromeda Andromeda is a open-source design language system implemented in Jetpack Compose. Catalog app Table of Contents About the Project Getting St

A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose
A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose

SlideTodo A simple 'Slide to Unlock' Material widget for Android, written in Jetpack Compose you can find source code here Getting Started allprojects

Material Motion for Jetpack Compose
Material Motion for Jetpack Compose

Material Motion for Jetpack Compose Jetpack Compose library for implementing motion system in Material Components for Android. ๐ŸŒˆ Core A library which

Material motion for jetpack compose
Material motion for jetpack compose

Material Motion system animations for Jetpack Compose(early stage) Who's using Compose Metaphor? ๐Ÿ‘‰ Check out who's using Compose Metaphor Include in

Jetpack Compose Boids | Flocking Insect ๐Ÿœ. bird or Fish simulation using Jetpack Compose Desktop ๐Ÿš€, using Canvas API ๐ŸŽจ
Jetpack Compose Boids | Flocking Insect ๐Ÿœ. bird or Fish simulation using Jetpack Compose Desktop ๐Ÿš€, using Canvas API ๐ŸŽจ

๐Ÿœ ๐Ÿœ ๐Ÿœ Compose flocking Ants(boids) ๐Ÿœ ๐Ÿœ ๐Ÿœ Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ๐Ÿš€ , usi

Releases(1.0.14)
Owner
RE
Kotlin/Compose ็‹‚็ƒญ่€…
RE
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
A Jetpack Compose implementation of Owl, a Material Design study

Owl sample This sample is a Jetpack Compose implementation of Owl, a Material De

Alexander 1 Feb 26, 2022
FullMangement - an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries, and MVVM design pattern.

Full Management is an application that helps you manage your tasks effectively. built with the latest tachs like Compose UI, Jetpack libraries and MVVM design pattern.

Amr algnyat 4 Nov 1, 2022
ToDo-Task-App - An Android App built to demonstrate the use of Jetpack Compose, Material You, Room Database, and MVVM

ToDo Task App ToDo Task App is a sample Android app built with Jetpack Compose.

null 0 Jan 17, 2022
Material You using Jetpack Compose

Material You using Jetpack Compose. How to keep M2 alongside with M3 in a project. Repo to play with Material Themes and MDC

Luis Barqueira 3 Jul 28, 2022
A library that enables reuse of Material themes defined in XML for theming in Jetpack Compose.

MDC-Android Compose Theme Adapter A library that enables reuse of Material Components for Android XML themes for theming in Jetpack Compose. The basis

Material Components 409 Dec 24, 2022
A lightweight library for using Material Colors in Android Jetpack Compose Project ๐Ÿš€๐Ÿš€๐Ÿš€

How To Use Step 1: Add the JitPack repository to your build file. Add it in your root build.gradle / build.gradle.kts at the end of repositories: Groo

Atick Faisal 9 Sep 9, 2022
New style for app design Online Flora Go Go App UI made in Jetpack Compose. ๐Ÿ˜‰ ๐Ÿ˜Ž

JetComposeLoginUI New style for app design Online Flora Go Go App UI made in Jetpack Compose. ?? ?? (Navigation Components, Dagger-Hilt, Material Comp

Arvind Meshram 95 Dec 22, 2022
New style for app design E-commerce Shop App UI made in Jetpack Compose.๐Ÿ˜‰๐Ÿ˜Ž

E-commerceShopAppUI-Android New style for app design E-commerce Shop App UI made in Jetpack Compose. ?? ?? (Navigation Components, Dagger-Hilt, Materi

Arvind Meshram 30 Jan 8, 2023
Recipes Mobile App UI Design in Jetpack Compose

Recipes Mobile App UI Design in Jetpack Compose Watch it on YouTube Beautiful android mobile Recipes App designed using Jetpack Compose. Single screen

Juraj Kusnier 21 Oct 14, 2022