Common preference/settings Composables for Jetpack Compose.

Overview

ComposePrefs

ComposePrefs is a preferences library for Jetpack Compose which makes it easy to implement preferences/settings in your Compose Android app. Preferences are created and positioned using an intuitive and easy to use API which follows a similar design to the existing Material Composables. Currently, the library uses the Composables available from M2 as M3 is not quite stable enough to use. ComposePrefs uses DataStore to store the actual preference data.

This repository provides a sample application in which creation and use of each preference composable is demonstrated. The main settings screen can be found here.

Currently supported preference composables

  • TextPref: Basic preference which only displays text and can be clicked on.
  • CheckBoxPref: Preference with a trailing CheckBox which can be (un)checked.
  • SwitchPref: Preference with a trailing Switch which can be (un)checked.
  • EditTextPref: Preference which opens a TextField in a dialog for textual user input.
  • SliderPref: Preference which displays a Slider to allow for inline numerical user input.
  • DropDownPref: Preference which shows entries in a dropdown menu and allows for user selection.
  • ListPref: Preference which opens a list of items in a dialog from which the user can select a single entry.
  • MultiSelectListPref: Preference which opens a list of items in a dialog from which the user can select multiple entries at once.

There is also support for Groups/Categories which can be created using the prefsGroup function. Usage is shown below.

Usage

First create a DataStore, for example in your MainActivity.kt:

val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = "settings")

Next in your actual Preferences/Settings screen, you can create a PrefScreen and pass in your DataStore as you would any other Composable:

PrefsScreen(dataStore = LocalContext.current.dataStore) {
    ..
}

Within the PrefsScreen, you can add individual preference items using prefsItem or add a group with prefsGroup:

prefsItem { TextPref(title = "Just some text", summary = "Here is some summary text") }


prefsGroup("CheckBoxPref") {
    prefsItem { CheckBoxPref(key = "cb1", title = "Simple checkbox 1") }
    prefsItem { TextPref(title = "Just some text", summary = "Here is some summary text") }
    prefsItem { SwitchPref(key = "sw1", title = "Simple switch 1") }
}

Composables

Each composable excluding TextPref has a mandatory key parameter. This is the key that will be used in the DataStore and is equivalent to the key used in previous Android preference libraries.

You should be using unique keys for each preference. Using the same key for different preferences of the same type will result in their values being the same. Using the same key for different preferences of different types may result in unexpected behaviour.

TextPref

TextPref(title = "Just some text", summary = "But now with a summary")

CheckBoxPref

CheckBoxPref(
    key = "cb1",
    title = "Simple checkbox",
    summary = "But with a leading icon and summary",
    leadingIcon = { Icon(Icons.Filled.Person, "Person") }
)

SwitchPref

SwitchPref(
    key = "sw4",
    title = "Simple switch",
    summary = "But with a leading icon and summary",
    leadingIcon = { Icon(Icons.Filled.Home, "Home") }
)

EditTextPref

EditTextPref(
    key = "et1",
    title = "EditText example",
    summary = "But it has a dialog title and message",
    dialogTitle = "Dialog Title",
    dialogMessage = "Dialog Message"
)

SliderPref

SliderPref(
    key = "sp1",
    title = "Slider example with custom range and value shown on side",
    valueRange = 50f..200f,
    showValue = true
)

DropDownPref

DropDownPref(
    key = "dd1",
    title = "Dropdown with currently selected item as summary",
    useSelectedAsSummary = true,
    entries = mapOf(
        "0" to "Entry 1",
        "1" to "Entry 2",
        "2" to "Entry 3"
    )
)

ListPref

ListPref(
    key = "l1",
    title = "ListPref example",
    summary = "Opens up a dialog of options",
    entries = mapOf(
        "0" to "Entry 1",
        "1" to "Entry 2",
        "2" to "Entry 3",
        "3" to "Entry 4",
        "4" to "Entry 5"
    )
)

MultiSelectListPref

MultiSelectListPref(
    key = "msl1",
    title = "MultiSelectListPref",
    summary = "Pick multiple entries at once",
    entries = mapOf(
        "0" to "Entry 1",
        "1" to "Entry 2",
        "2" to "Entry 3",
        "3" to "Entry 4",
        "4" to "Entry 5"
    )
)

And that's it! You can create your whole preference screen in this way, and you can modify the individual parameters of each preference composable to achieve the functionality you require. If something is missing, please create an Issue so we can discuss possible solutions. After all, this is still version 1.0.0 and there are bound to be bugs and missing features.

Screenshots of this sample app

Download

In your settings.gradle file add the following

maven { url "https://jitpack.io" }

and in your module build.gradle file add the dependencies

implementation "com.github.JamalMulla:ComposePrefs:<version>" // Current is 1.0.0
implementation "androidx.datastore:datastore-preferences:1.0.0"
You might also like...
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

K5-compose is a sketchy port of p5.js for Jetpack Compose
K5-compose is a sketchy port of p5.js for Jetpack Compose

k5-compose k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop. This library provides you a playground to play with your sketches so you

Comments
  • Large list of single or multiselects don't scroll

    Large list of single or multiselects don't scroll

    Thank you for this module. It makes settings in composable a breeze :)

    I noticed that if I have a large set of items they do not scroll making it impossible to get to all of them. I have included a screenshot. Screenshot_20220122-142323797 - Copy Screenshot_20220122-142329852 - Copy

    bug 
    opened by sschueller 2
  • No way to set group header color

    No way to set group header color

    Individual preferences have a textColor parameter, but it looks like the prefsGroup doesn't have that, and defaults to MaterialTheme.colors.primary. It would be nice to be able to control this color as well.

    enhancement 
    opened by jollygreenegiant 2
  • Update compose version to 1.3.0

    Update compose version to 1.3.0

    Versions updated:

    • Compose to 1.3.0
    • Compile SDK (forced by change of Compose version)
    • Kotlin to 1.7.10 (forced by change of Compose version)
    • Gradle and other libraries to newest possible
    opened by piotrmajewski-codefit 1
  • Updated compose version and fixed build

    Updated compose version and fixed build

    • Updated compose version to 1.2.0-beta03
    • Updated gradle plugin to 1.6.21 needed to build properly
    • Updated Gradle
    • Updated dependencies versions to latest ones
    opened by draganbjedov 1
Releases(1.0.6)
  • 1.0.6(Oct 27, 2022)

  • 1.0.5(Jun 15, 2022)

    What's Changed

    • Updated compose version and fixed build by @draganbjedov in https://github.com/JamalMulla/ComposePrefs/pull/7

    New Contributors

    • @draganbjedov made their first contribution in https://github.com/JamalMulla/ComposePrefs/pull/7

    Full Changelog: https://github.com/JamalMulla/ComposePrefs/compare/1.0.4...1.0.5

    Source code(tar.gz)
    Source code(zip)
  • 1.0.4(May 22, 2022)

  • 1.0.3(May 22, 2022)

  • 1.0.2(Jan 22, 2022)

    What's Changed

    • Fixed scroll issue in ListPref and MultiSelectListPref by @JamalMulla in https://github.com/JamalMulla/ComposePrefs/pull/6

    Full Changelog: https://github.com/JamalMulla/ComposePrefs/compare/1.0.1...1.0.2

    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Jan 4, 2022)

  • 1.0.0(Dec 27, 2021)

Owner
Jamal Mulla
Jamal Mulla
ComposePrefs3 is a fully featured library of preference composables for Jetpack Compose.

ComposePrefs3 This is the M3 version of ComposePrefs. The M2 version can be found here. ComposePrefs3 is a preferences library for Jetpack Compose whi

Jamal Mulla 21 Dec 2, 2022
A flexible theme provider for Jetpack Compose. Supports dynamic theme changes and saving theme preference.

JetTheme JetTheme is a flexible theme provider for Jetpack Compose. Change the theme and recompose the UI dynamically. Save theme preference to local

Mao Yufeng 48 Oct 19, 2022
Preference functionality for Jetpack Compose

ComposePreferences Compose Preferences is a library which makes it easy to add preference functionality to your Compose app. It provides an easy to us

Niklas Schnettler 59 Jan 4, 2023
Puck - Make composables draggable with kotlin

Puck Make Composables Draggable. Including in your project Gradle Add below code

Shivam Dhuria 44 Dec 10, 2022
Sample project to demonstrate how to have clear and better interactions between composables and viewmodels.

Form Validation Sample project to demonstrate how to have clear and better interactions between composables and viewmodels. Concepts used uiState conc

Saurabh Pant 20 Dec 22, 2022
🚀🌆🏙 Display differences or animate progress between 2 images or Composables with overlay and customization options, zoom, pan gestures, and progress to observe properties for animating before-after progress

Compose Before-After Composables to display Images, or Composables as before and after composables to display differences or animate progress between

Smart Tool Factory 56 Dec 22, 2022
Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI.

Pinocchio Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI. All UI

NAVER Z 24 Nov 30, 2022
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

Chetan Gupta 38 Sep 25, 2022
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
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023