Calf is a library that allows you to easily create adaptive UIs for your Compose Multiplatform apps.
Calf stands for Compose Adaptive Look & Feel
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)
You can try the web demo here
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:
...
kotlin {
...
targets
.filterIsInstance<KotlinNativeTarget>()
.filter { it.konanTarget.family == Family.IOS }
.forEach {
it.binaries.framework {
...
export("com.mohamedrejeb.calf:calf-ui:0.4.0")
}
}
...
}
...
...
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.
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 |
---|---|
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
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 |
---|---|
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
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 |
---|---|
AdaptiveCircularProgressIndicator(
modifier = Modifier.size(50.dp),
color = Color.Red,
)
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 |
---|---|
val state = rememberAdaptiveDatePickerState()
LaunchedEffect(state.selectedDateMillis) {
// Do something with the selected date
}
AdaptiveDatePicker(
state = state,
)
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 |
---|---|
val state = rememberAdaptiveTimePickerState()
LaunchedEffect(state.hour, state.minute) {
// Do something with the selected time
}
AdaptiveTimePicker(
state = state,
modifier = Modifier
)
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 |
---|---|
val state = rememberWebViewState(
url = "https://github.com/MohamedRejeb"
)
LaunchedEffect(state.isLoading) {
// Get the current loading state
}
WebView(
state = state,
modifier = Modifier
.fillMaxSize()
)
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
}
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 allows you to pick files from the device storage.
Android | iOS |
---|---|
Desktop | 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
allows you to specify the type of files you want to pick:
FilePickerFileType.Image
- Allows you to pick images onlyFilePickerFileType.Video
- Allows you to pick videos onlyFilePickerFileType.ImageView
- Allows you to pick images and videos onlyFilePickerFileType.Audio
- Allows you to pick audio files onlyFilePickerFileType.Document
- Allows you to pick documents onlyFilePickerFileType.Text
- Allows you to pick text files onlyFilePickerFileType.Pdf
- Allows you to pick PDF files onlyFilePickerFileType.Presentation
- Allows you to pick presentation files onlyFilePickerFileType.Spreadsheet
- Allows you to pick spreadsheet files onlyFilePickerFileType.Word
- Allows you to pick compressed word onlyFilePickerFileType.All
- Allows you to pick all types of filesFilePickerFileType.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
allows you to specify the selection mode of the file picker:
FilePickerSelectionMode.Single
- Allows you to pick a single fileFilePickerSelectionMode.Multiple
- Allows you to pick multiple files
Read the full file picker documentation here.
If you've found an error in this sample, please file an issue.
Feel free to help out by sending a pull request ❤️.
Support it by joining stargazers for this repository. ⭐
Also, follow me on GitHub for more libraries! 🤩
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.