Android TV card outline shadow on focus (same as Play Store)

Viewed 284

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.

New Google Play Store App on Android TV with outline around the Disney+ app icon

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
    }
}

My test

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 !

0 Answers
Related