I'd like to reproduce the cardview outline that Google does on the new Play Store on Android TV. You can see a capture below with the effect around the Disney+ card icon. The color change on every card focus.
What would you recommend to achieve this ? I try to get a dominant color and apply it as background color and outlineSpotShadowColor with a 10 dp elevation. I was able to have a shadow below the image with the desired dominant color on the fly, but the effect is not the same and the way I compute the color isn't good for the performance. Is there a way to let the system do it ?
Here is the code I have so far with a static color
private val highElevation = context.resources.getDimension(R.dimen.card_elevation_focus)
private val standardElevation = context.resources.getDimension(R.dimen.card_elevation_standard)
private val standardBackground = ContextCompat.getColor(context, android.R.color.black)
private val focusedBackground = ContextCompat.getColor(context, R.color.accent)
cardView.onFocusChangeListener = View.OnFocusChangeListener { v, hasFocus ->
cardView.children.first().apply {
outlineSpotShadowColor = if (hasFocus) focusedBackground else standardBackground
elevation = if (hasFocus) highElevation else standardElevation
}
}
As you can see, the halo is not the same as the Play Store, it's not spread enough.
Bonus question: By the way, the same question apply to the "zoom effect" the Play Store does. Can we do it without losing performance during fast scroll.
Note that I can target min API level 28.
Thanks a lot !