Palette

The landscapist-palette package offers a set of valuable image plugins related to the palette, including extracting primary color sets.

To utilize these palette supports, simply add the following dependency:

GroovyKTS

dependencies {
    implementation "com.github.skydoves:landscapist-palette:$version"
}

dependencies {
    implementation("com.github.skydoves:landscapist-palette:$version")
}

You can extract primary (theme) color profiles with PalettePlugin. You can check out Extract color profiles to see what kinds of colors can be extracted.

GlideCoilFresco

var palette by rememberPaletteState(null)

GlideImage(
  component = rememberImageComponent {
      +PalettePlugin { palette = it }
  },
  ..
)

Crossfade(
    targetState = palette,
    modifier = Modifier
        .padding(horizontal = 8.dp)
        .size(45.dp)
) {
  Box(
    modifier = Modifier
      .background(color = Color(it?.lightVibrantSwatch?.rgb ?: 0))
      .fillMaxSize()
  )
}

var palette by rememberPaletteState(null)

CoilImage(
  component = rememberImageComponent {
      +PalettePlugin { palette = it }
  },
  ..
)

Crossfade(
    targetState = palette,
    modifier = Modifier
        .padding(horizontal = 8.dp)
        .size(45.dp)
) {
  Box(
    modifier = Modifier
      .background(color = Color(it?.lightVibrantSwatch?.rgb ?: 0))
      .fillMaxSize()
  )
}

var palette by rememberPaletteState(null)

FrescoImage(
  component = rememberImageComponent {
      +PalettePlugin { palette = it }
  },
  ..
)

Crossfade(
    targetState = palette,
    modifier = Modifier
        .padding(horizontal = 8.dp)
        .size(45.dp)
) {
  Box(
    modifier = Modifier
      .background(color = Color(it?.lightVibrantSwatch?.rgb ?: 0))
      .fillMaxSize()
  )
}

You can also customize attributes of PalettePlugin like the example below:

GlideCoilFresco

var palette by rememberPaletteState(null)

GlideImage(
  component = rememberImageComponent {
    +PalettePlugin(
        imageModel = poster.image,
        useCache = true, // use cache strategies for the same image model.
        interceptor = {
            it.addFilter { rgb, hsl ->
            // here edit to add the filter colors.
            false
            }
        },
        paletteLoadedListener = {
            palette = it
        }
    )
  },
  ..
)

Crossfade(
    targetState = palette,
    modifier = Modifier
        .padding(horizontal = 8.dp)
        .size(45.dp)
) {
  Box(
    modifier = Modifier
      .background(color = Color(it?.lightVibrantSwatch?.rgb ?: 0))
      .fillMaxSize()
  )
}

var palette by rememberPaletteState(null)

CoilImage(
  component = rememberImageComponent {
    +PalettePlugin(
        imageModel = poster.image,
        useCache = true, // use cache strategies for the same image model.
        interceptor = {
            it.addFilter { rgb, hsl ->
            // here edit to add the filter colors.
            false
            }
        },
        paletteLoadedListener = {
            palette = it
        }
    )
  },
  ..
)

Crossfade(
    targetState = palette,
    modifier = Modifier
        .padding(horizontal = 8.dp)
        .size(45.dp)
) {
  Box(
    modifier = Modifier
      .background(color = Color(it?.lightVibrantSwatch?.rgb ?: 0))
      .fillMaxSize()
  )
}

var palette by rememberPaletteState(null)

FrescoImage(
  component = rememberImageComponent {
    +PalettePlugin(
        imageModel = poster.image,
        useCache = true, // use cache strategies for the same image model.
        interceptor = {
            it.addFilter { rgb, hsl ->
            // here edit to add the filter colors.
            false
            }
        },
        paletteLoadedListener = {
            palette = it
        }
    )
  },
  ..
)

Crossfade(
    targetState = palette,
    modifier = Modifier
        .padding(horizontal = 8.dp)
        .size(45.dp)
) {
  Box(
    modifier = Modifier
      .background(color = Color(it?.lightVibrantSwatch?.rgb ?: 0))
      .fillMaxSize()
  )
}

Preview