Kamel is an asynchronous media loading library for Compose Multiplatform. It provides a simple, customizable and efficient way to load, cache, decode and display images in your application. By default, it uses Ktor client for loading resources.
- Setup
- Usage
- Contributions
- License
Kamel is published on Maven Central:
repositories {
mavenCentral()
// ...
}Add the dependency to the common source-set:
kotlin {
sourceSets {
commonMain {
dependencies {
implementation("media.kamel:kamel-image:0.9.5")
// ...
}
}
}
}Add the dependency to the dependencies block:
dependencies {
implementation("media.kamel:kamel-image:0.9.5")
// ...
}Make sure to add a dependency for Ktor HttpClient engine for your platforms using
this link.
To load an image asynchronously, you can use asyncPainterResource composable, it can load
images from different data sources:
// String
asyncPainterResource(data = "https://www.example.com/image.jpg")
// Ktor Url
asyncPainterResource(data = Url("https://www.example.com/image.jpg"))
// URI
asyncPainterResource(data = URI("https://www.example.com/image.png"))
// File (JVM, Native)
asyncPainterResource(data = File("/path/to/image.png"))
// File (JS)
asyncPainterResource(data = File(org.w3c.files.File(arrayOf(blob), "/path/to/image.png")))
// URL
asyncPainterResource(data = URL("https://www.example.com/image.jpg"))
// and more...asyncPainterResource can be used to load SVG, XML, JPEG, and PNG by default depending on the
platform implementation.
asyncPainterResource returns a Resource<Painter> object which can be used to display the image
using KamelImage composable.
Since there isn't any shared resource system between Android and Desktop, some implementations (e.g. fetchers and mappers) are only available for a specific platform:
To load an image file from desktop application resources, you have to add resourcesFetcher to
the KamelConfig:
val desktopConfig = KamelConfig {
takeFrom(KamelConfig.Default)
// Available only on Desktop.
resourcesFetcher()
// Available only on Desktop.
// An alternative svg decoder
batikSvgDecoder()
}Assuming there's an image.png file in the /resources directory in the project:
CompositionLocalProvider(LocalKamelConfig provides desktopConfig) {
asyncPainterResource("image.png")
}To load an image file from android application resources, you have to add resourcesFetcher
and resourcesIdMapper to the KamelConfig:
val context: Context = LocalContext.current
val androidConfig = KamelConfig {
takeFrom(KamelConfig.Default)
// Available only on Android.
resourcesFetcher(context)
// Available only on Android.
resourcesIdMapper(context)
}Assuming there's an image.png file in the /res/raw directory in the project:
CompositionLocalProvider(LocalKamelConfig provides androidConfig) {
asyncPainterResource(R.raw.image)
}asyncPainterResource supports configuration using a trailing lambda:
val painterResource: Resource<Painter> = asyncPainterResource("https://www.example.com/image.jpg") {
// CoroutineContext to be used while loading the image.
coroutineContext = Job() + Dispatcher.IO
// Customizes HTTP request
requestBuilder { // this: HttpRequestBuilder
header("Key", "Value")
parameter("Key", "Value")
cacheControl(CacheControl.MAX_AGE)
}
}KamelImage is a composable function that takes a Resource<Painter> object, display it
and provide extra functionality:
KamelImage(
resource = painterResource,
contentDescription = "Profile",
)KamelImage can also be used to get the exception using onFailure,
and progress using onLoading parameters, to display a snackbar or a progress indicator,
depending on the case:
val coroutineScope = rememberCoroutineScope()
val snackbarHostState = remember { SnackbarHostState() }
Box {
KamelImage(
resource = painterResource,
contentDescription = "Profile",
onLoading = { progress -> CircularProgressIndicator(progress) },
onFailure = { exception ->
coroutineScope.launch {
snackbarHostState.showSnackbar(
message = exception.message.toString(),
actionLabel = "Hide",
duration = SnackbarDuration.Short
)
}
}
)
SnackbarHost(hostState = snackbarHostState, modifier = Modifier.padding(16.dp))
}You can also provide your own custom implementation using a simple when expression:
when (val resource = asyncPainterResource("https://www.example.com/image.jpg")) {
is Resource.Loading -> {
Text("Loading...")
}
is Resource.Success -> {
val painter: Painter = resource.value
Image(painter, contentDescription = "Profile")
}
is Resource.Failure -> {
log(resource.exception)
val fallbackPainter = painterResource("/path/to/fallbackImage.jpg")
Image(fallbackPainter, contentDescription = "Profile")
}
}You can enable, disable or customize crossfade (fade-in) animation through the animationSpec
parameter. Setting animationSpec to null will disable the animation:
KamelImage(
resource = imageResource,
contentDescription = "Profile",
// null by default
animationSpec = tween(),
)The default implementation is KamelConfig.Default. If you wish to configure it, you can do it
the following way:
val customKamelConfig = KamelConfig {
// Copies the default implementation if needed
takeFrom(KamelConfig.Default)
// Sets the number of images to cache
imageBitmapCacheSize = DefaultCacheSize
// adds an ImageBitmapDecoder
imageBitmapDecoder()
// adds an ImageVectorDecoder (XML)
imageVectorDecoder()
// adds an SvgDecoder (SVG)
svgDecoder()
// adds a FileFetcher
fileFetcher()
// Configures Ktor HttpClient
httpFetcher {
// httpCache is defined in kamel-core and configures the ktor client
// to install a HttpCache feature with the implementation provided by Kamel.
// The size of the cache can be defined in Bytes.
httpCache(10 * 1024 * 1024 /* 10 MiB */)
defaultRequest {
url("https://www.example.com/")
cacheControl(CacheControl.MaxAge(maxAgeSeconds = 10000))
}
install(HttpRequestRetry) {
maxRetries = 3
retryIf { httpRequest, httpResponse ->
!httpResponse.status.isSuccess()
}
}
// Requires adding "io.ktor:ktor-client-logging:$ktor_version"
Logging {
level = LogLevel.INFO
logger = Logger.SIMPLE
}
}
// more functionality available.
}
Kamel provides a generic Cache<K,V> interface, the default implementation uses LRU memory cache
mechanism backed by LinkedHashMap. You can provide a number of entries to cache for each type like
so:
KamelConfig {
// 100 by default
imageBitmapCacheSize = 500
// 100 by default
imageVectorCacheSize = 300
// 100 by default
svgCacheSize = 200
}Kamel can create a persistent disk cache for images by implementing ktor's CacheStorage feature.
The default config KamelConfig.Default installs this feature with a 10 MiB disk cache size.
The underlying disk cache is based on coil's multiplatform DiskLruCache implementation.
KamelConfig {
httpFetcher {
// The size of the cache can be defined in bytes. Or DefaultHttpCacheSize (10 MiB) can be used.
httpCache(DefaultHttpCacheSize)
}
}You can use LocalKamelConfig to apply your custom configuration:
CompositionLocalProvider(LocalKamelConfig provides customKamelConfig) {
asyncPainterResource("image.jpg")
}Contributions are always welcome!. If you'd like to contribute, please feel free to create a PR or open an issue.
Copyright 2021 Ali Albaali
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
https://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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
