Skip to content

Commit

Permalink
Add more detail on placeholders, update status in Compose github page
Browse files Browse the repository at this point in the history
  • Loading branch information
sjudd authored Sep 26, 2023
1 parent d205560 commit 4972096
Showing 1 changed file with 38 additions and 3 deletions.
41 changes: 38 additions & 3 deletions _posts/2022-09-23-compose.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ disqus: 1

## Status

Glide's Compose integration is new as of 9-2022 and as a result is labeled as an experimental API. Please submit bugs if you encounter any and/or feature requests to [Glide's Github Issues][5]. We will try to minimize API churn, but at least while the Compose integration is experimental, there may be an occasional breaking change between versions.
Glide's Compose integration is in beta. Please submit bugs if you encounter any and/or feature requests to [Glide's Github Issues][5]. The API is close to final. We'll remove the ability to use subcompositions as placeholders. We may replace `GlideSubcomposition` with a custom `Modifier`. If we do so, we will deprecate `GlideSubcomposition` first so that you have time to migrate.

## How do I include the Compose integration library?

Expand All @@ -29,7 +29,6 @@ implementation "com.github.bumptech.glide:compose:1.0.0-alpha.5"

See Glide's [Gallery sample app][6] for a small application that uses Compose and Glide's Compose integration. See the [Dokka][13] page for detailed API documentation.


### GlideImage

The primary integration point between Compose and Glide is `GlideImage`. `GlideImage` is meant to similarly to [Compose's Image][7] function except that it uses Glide to asynchronously load images.
Expand All @@ -52,7 +51,7 @@ GlideImage(

You can also provide the `alignment`, `contentScale`, `colorFilter`, and `alpha` parameters that have identical defaults and function identically to the same parameters in [Compose's Image][7].

To configure the Glide load, you can provide a `RequestBuilderTransformation` function. The function will be passed a `RequestBuilder` that already has `load()` called on it with your given model. You can then customize the request with any normal [Glide option][9]. The only exception is that Glide's `Transitions` are currently not supported:
To configure the Glide load, you can provide a `RequestBuilderTransformation` function. The function will be passed a `RequestBuilder` that already has `load()` called on it with your given model. You can then customize the request with any normal [Glide option][9] except for Transitions (see below for details).

```kotlin
GlideImage(
Expand All @@ -72,6 +71,42 @@ GlideImage(
}
```

#### Placeholders

Glide supports three types of placeholders for Compose:

1. Drawables
2. Android resource IDs
3. Painters

To specify a placeholder, use the `loading` and `failure` parameters in `GlideImage`. Placeholders are required to be one of Glide's `Placeholder` classes:

```
import com.bumptech.glide.integration.compose.GlideImage
import com.bumptech.glide.integration.compose.placeholder
// Drawable
GlideImage(model = myUrl, loading = placeholder(myDrawable))
```

```
import com.bumptech.glide.integration.compose.GlideImage
import com.bumptech.glide.integration.compose.placeholder
// Resource ID
GlideImage(model = myUrl, failure = placeholder(R.drawable.my_drawable))
```

```
import com.bumptech.glide.integration.compose.GlideImage
import com.bumptech.glide.integration.compose.placeholder
// Painter
GlideImage(model = myUrl, loading = placeholder(ColorPainter(Color.Red))
```

If you set a placeholder on `GlideImage` directly and on `RequestBuilder` via `requestBuilderTransform`, the placeholder set on `GlideImage` will take precedence.

#### Sizing

As with Glide's View integration, Glide's Compose integration will attempt to determine the size of your Composable and use that to load an appropriately sized image. That can only be done efficiently if you provide a `Modifier` that restricts the size of the Composable. If Glide determines that either the width or the height of the Composable is unbounded, it will use `Target.SIZE_ORIGINAL`, which can lead to excessive memory usage.
Expand Down

0 comments on commit 4972096

Please sign in to comment.