2

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 !

Hrk
  • 2,725
  • 5
  • 29
  • 44
  • 1
    Could you please share the code you have implemented so far? So we can take a look at it. Sharing an image and asking how to do it is not how this site works. Please read https://stackoverflow.com/help/minimal-reproducible-example – svelandiag Dec 23 '20 at 15:25

0 Answers0