• Stars
    star
    604
  • Rank 71,454 (Top 2 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created 9 months ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Calf is a library that allows you to easily create adaptive UIs for your Compose Multiplatform apps.

Calf - Compose Adaptive Look & Feel

Calf is a library that allows you to easily create adaptive UIs for your Compose Multiplatform apps.

Kotlin MohamedRejeb Apache-2.0 BuildPassing Maven Central

Calf thumbnail

Calf stands for Compose Adaptive Look & Feel

Artifacts

Artifact Description Platforms Version
calf-ui Adaptive UI components Android, iOS, Desktop, Web(Js, Wasm) Maven Central
calf-file-picker Native File Picker wrapper Android, iOS, Desktop, Web(Js, Wasm) Maven Central
calf-permissions API that allows you to handle permissions Android, iOS Maven Central
calf-geo API that allows you to access geolocation Coming soon... 🚧 🚧 Coming soon... 🚧 🚧
calf-navigation Native navigation wrapper Coming soon... 🚧 🚧 Coming soon... 🚧 🚧
calf-map Native Maps wrapper Coming soon... 🚧 🚧 Coming soon... 🚧 🚧
calf-media Video/Audio player Coming soon... 🚧 🚧 Coming soon... 🚧 🚧
calf-notification Notification manager Coming soon... 🚧 🚧 Coming soon... 🚧 🚧
calf-sf-symbols Apple SF Symbols icons Coming soon... 🚧 🚧 Coming soon... 🚧 🚧

The main focus for now is Android and iOS, but more Desktop components are coming that allows you to create adaptive UIs for Desktop as well (Windows, macOS, Linux)

Web Demo

You can try the web demo here

Installation

Maven Central

Kotlin version Compose version Calf version
1.9.22 1.6.0 0.4.0
1.9.21 1.5.11 0.3.1
1.9.20 1.5.10 0.2.0
1.9.0 1.5.0 0.1.1

Add the following dependency to your module build.gradle.kts file:

// For Adaptive UI components
api("com.mohamedrejeb.calf:calf-ui:0.4.0")

// For Adaptive FilePicker
implementation("com.mohamedrejeb.calf:calf-file-picker:0.4.0")

If you are using calf-ui artifact, make sure to export it to binaries:

Regular Framewoek

...
kotlin {
    ...
    targets
        .filterIsInstance<KotlinNativeTarget>()
        .filter { it.konanTarget.family == Family.IOS }
        .forEach {
            it.binaries.framework {
                ...
                export("com.mohamedrejeb.calf:calf-ui:0.4.0")
            }
        }
    ...
}
...

CocoaPods

...
kotlin {
    ...
    cocoapods {
        ...
        framework {
            ...
            export("com.mohamedrejeb.calf:calf-ui:0.4.0")
        }
    }
    ...
}
...

Important: Exporting calf-ui to binaries is required to make it work on iOS.

Usage

Calf UI

AdaptiveAlertDialog

AdaptiveAlertDialog is a dialog that adapts to the platform it is running on. It is a wrapper around AlertDialog on Android and UIAlertController on iOS.

Android iOS
Alert Dialog Android Alert Dialog iOS
var showDialog by remember { mutableStateOf(false) }

Button(
    onClick = { showDialog = true },
) {
    Text("Show Alert Dialog")
}

if (showDialog) {
    AdaptiveAlertDialog(
        onConfirm = { showDialog = false },
        onDismiss = { showDialog = false },
        confirmText = "Ok",
        dismissText = "Cancel",
        title = "Alert Dialog",
        text = "This is a native alert dialog from Calf",
    )
}

AdaptiveBottomSheet

AdaptiveBottomSheet is a bottom sheet that adapts to the platform it is running on. It is a wrapper around ModalBottomSheet on Android and UIModalPresentationPopover on iOS.

Android iOS
Bottom Sheet Android Bottom Sheet iOS
val scope = rememberCoroutineScope()
val sheetState = rememberAdaptiveSheetState()
var openBottomSheet by remember { mutableStateOf(false) }

Box(
    modifier = Modifier.fillMaxSize()
) {
    Button(
        onClick = { openBottomSheet = true },
    ) {
        Text("Show Bottom Sheet")
    }

    if (openBottomSheet) {
        AdaptiveBottomSheet(
            onDismissRequest = { openBottomSheet = false },
            adaptiveSheetState = sheetState,
        ) {
            Button(
                onClick = {
                    scope.launch { sheetState.hide() }.invokeOnCompletion {
                        if (!sheetState.isVisible) {
                            openBottomSheet = false
                        }
                    }
                }
            ) {
                Text("Close")
            }
        }
    }
}

AdaptiveCircularProgressIndicator

AdaptiveCircularProgressIndicator is a circular progress indicator that adapts to the platform it is running on. It is a wrapper around CircularProgressIndicator on Android, and it implements similar look to UIActivityIndicatorView on iOS.

Android iOS
Circular Progress Indicator Android Circular Progress Indicator iOS
AdaptiveCircularProgressIndicator(
    modifier = Modifier.size(50.dp),
    color = Color.Red,
)

AdaptiveDatePicker

AdaptiveDatePicker is a date picker that adapts to the platform it is running on. It is a wrapper around DatePicker on Android and UIDatePicker on iOS.

Android iOS
Date Picker Android Date Picker iOS
val state = rememberAdaptiveDatePickerState()

LaunchedEffect(state.selectedDateMillis) {
    // Do something with the selected date
}

AdaptiveDatePicker(
    state = state,
)

AdaptiveTimePicker

AdaptiveTimePicker is a time picker that adapts to the platform it is running on. It is a wrapper around TimePicker on Android and UIDatePicker on iOS.

Android iOS
Time Picker Android Time Picker iOS
val state = rememberAdaptiveTimePickerState()

LaunchedEffect(state.hour, state.minute) {
    // Do something with the selected time
}

AdaptiveTimePicker(
    state = state,
    modifier = Modifier
)

WebView

WebView is a view that adapts to the platform it is running on. It is a wrapper around WebView on Android, WKWebView on iOS and JavaFX WebView on Desktop.

Android iOS
Web View Android Web View iOS
val state = rememberWebViewState(
    url = "https://github.com/MohamedRejeb"
)

LaunchedEffect(state.isLoading) {
    // Get the current loading state
}

WebView(
    state = state,
    modifier = Modifier
        .fillMaxSize()
)

Web View Settings

You can customize the web view settings by changing the WebSettings object in the WebViewState:

val state = rememberWebViewState(
    url = "https://github.com/MohamedRejeb"
)

LaunchedEffect(Unit) {
    // Enable JavaScript
    state.settings.javaScriptEnabled = true

    // Enable Zoom in Android
    state.settings.androidSettings.supportZoom = true
}

Call JavaScript

You can call JavaScript functions from the web view by using the evaluateJavaScript function:

val state = rememberWebViewState(
    url = "https://github.com/MohamedRejeb"
)

LaunchedEffect(Unit) {
    val jsCode = """
        document.body.style.backgroundColor = "red";
        document.title
    """.trimIndent()

    // Evaluate the JavaScript code
    state.evaluateJavaScript(jsCode) {
        // Do something with the result
        println("JS Response: $it")
    }
}

Note: The evaluateJavaScript method only works when you enable JavaScript in the web view settings.

Calf File Picker

Calf File Picker allows you to pick files from the device storage.

Android iOS
File Picker Android File Picker iOS
Desktop Web
File Picker Desktop File Picker Web
val scope = rememberCoroutineScope()
val context = LocalPlatformContext.current

val pickerLauncher = rememberFilePickerLauncher(
    type = FilePickerFileType.Image,
    selectionMode = FilePickerSelectionMode.Single,
    onResult = { files ->
        scope.launch {
            files.firstOrNull()?.let { file ->
                // Do something with the selected file
                // You can get the ByteArray of the file
                file.readByteArray(context)
            }
        }
    }
)

Button(
    onClick = {
        pickerLauncher.launch()
    },
    modifier = Modifier.padding(16.dp)
) {
    Text("Open File Picker")
}

FilePickerFileType

FilePickerFileType allows you to specify the type of files you want to pick:

  • FilePickerFileType.Image - Allows you to pick images only
  • FilePickerFileType.Video - Allows you to pick videos only
  • FilePickerFileType.ImageView - Allows you to pick images and videos only
  • FilePickerFileType.Audio - Allows you to pick audio files only
  • FilePickerFileType.Document - Allows you to pick documents only
  • FilePickerFileType.Text - Allows you to pick text files only
  • FilePickerFileType.Pdf - Allows you to pick PDF files only
  • FilePickerFileType.Presentation - Allows you to pick presentation files only
  • FilePickerFileType.Spreadsheet - Allows you to pick spreadsheet files only
  • FilePickerFileType.Word - Allows you to pick compressed word only
  • FilePickerFileType.All - Allows you to pick all types of files
  • FilePickerFileType.Folder - Allows you to pick folders

You can also specify the file types you want to pick by using the FilePickerFileType.Custom type:

val type = FilePickerFileType.Custom(
    "text/plain"
)

FilePickerSelectionMode

FilePickerSelectionMode allows you to specify the selection mode of the file picker:

  • FilePickerSelectionMode.Single - Allows you to pick a single file
  • FilePickerSelectionMode.Multiple - Allows you to pick multiple files

Read the full file picker documentation here.

Contribution

If you've found an error in this sample, please file an issue.
Feel free to help out by sending a pull request ❤️.

Code of Conduct

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐
Also, follow me on GitHub for more libraries! 🤩

You can always

License

Copyright 2023 Mohamed Rejeb

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

More Repositories

1

Compose-Rich-Editor

A Rich text editor library for both Jetpack Compose and Compose Multiplatform, fully customizable and supports the common rich text editor features.
Kotlin
764
star
2

Pokedex

Pokedex - a Kotlin Multiplatform app, built with Compose multiplatform, Coroutines, Flow, Koin, Ktor, SqlDelight, Decompose, MVIKotlin, and Material 3 based on MVI architecture
Kotlin
593
star
3

Ksoup

Ksoup is a lightweight Kotlin Multiplatform library for parsing HTML, extracting HTML tags, attributes, and text, and encoding and decoding HTML entities.
Kotlin
308
star
4

compose-dnd

Compose DND is a library that allows you to easily add drag and drop functionality to your Jetpack Compose or Compose Multiplatform projects.
Kotlin
203
star
5

Card-Game-Animation

Sample card game app made using Jetpack Compose. Contains some complex animations.
Kotlin
124
star
6

Compose-Youtube-Motion-Layout

Compose Youtube Motion Layout App
Kotlin
81
star
7

Animated-Circular-Download-Button

Animated Circular Download Button
Kotlin
80
star
8

Compose-Geometry-Playground

Geometry playground app made using Compose multiplatform that works for both android and desktop.
Kotlin
67
star
9

Compose-Interactive-Gamepad

Interactive gamepad made using jetpack compose
Kotlin
46
star
10

Dino-Game

Simple Dino Game 🎮 made using Compose multiplatform ( There's no Dino but who cares 🤣 ) I used Kotlin multiplatform with Compose multiplatform, for now the game works for android and desktop (IOS and Web soon ⏳ ).
Kotlin
26
star
11

cmp-clean-architecture

Clean Architecture App with Kotlin and Compose Multiplatform.
Kotlin
18
star
12

Pencil-Loader-Animation

Custom Pencil Loader Animation made using Jetpack compose and canvas.
Kotlin
17
star
13

drawing-android-app

Drawing native android app using Kotlin and XML
Kotlin
16
star
14

cmp-youtube-tutorial

Kotlin
9
star
15

android_logo_compose_canvas

A simple android logo made using compose canvas
Kotlin
6
star
16

JudoApp

Python
5
star
17

MohamedRejeb

5
star
18

Notes-App

Kotlin
4
star
19

Compose-Infinite-Pager

Kotlin
4
star
20

Compose-Dynamic-Text

Compose UI Dynamic Text component that enables you to change the text depending on the available width
Kotlin
4
star
21

Kpen

Objective-C
3
star
22

Compose-Snake-Game

Kotlin
3
star
23

looker-app

Kotlin
2
star
24

CleanArchitectureSample

Clean architecture android app made using jetpack compose and firebase
Kotlin
2
star
25

aoc-kotlin-2023

Advent of Code Kotlin 2023
Kotlin
2
star
26

CMP-3685

Kotlin
2
star
27

Android-Clock-Component

1
star
28

CMPIssue4380

Kotlin
1
star
29

Color-Picker-App

1
star
30

Android-Kts-Starter

Kotlin
1
star
31

Travel-App

Clean architecture travel android app
Kotlin
1
star
32

Android-clean-architecture-sample

1
star
33

Koltin-Introduction

Kotlin
1
star
34

storybook-compose

Nothing interesting here yet!
Kotlin
1
star