♻️ [ShareableCardContent] Display a shadow instead of a border around the profile picture. #906
Conversation
|
Snapshot diff report
|
Corvus400
changed the title
| // A larger number results in a more diffused and smoother shadow. | ||
| val maxOffset = 20f | ||
|
|
||
| for (i in 1..shadowLayers) { |
There was a problem hiding this comment.
It might be difficult but, how about using Brush as the card surface effect?
https://developer.android.com/develop/ui/compose/graphics/draw/brush
There was a problem hiding this comment.
@takahirom
I tried it for a few hours, but unfortunately I couldn't get the same expression as the current implementation. 🥺
There was a problem hiding this comment.
And this you might tried but how about just using .shadow(elevation= )?
There was a problem hiding this comment.
@takahirom
Unfortunately, that method didn't work either. 😞
Incidentally, I tried various things afterwards, such as surrounding it with a card to see if the elevation would be displayed, but the elevation is ignored in the same way as the shadow. 💀
There was a problem hiding this comment.
@takahirom
Thank you for waiting. 🙇
I tried using the Brush method.
I think it's simpler and easier to understand than the original processing, but what do you think?
It's a little different from the original design... but if you don't want to make it too complicated, I think this is a good compromise. 🙏
…design/display_a_shadow_instead_of_a_line # Conflicts: # feature/profilecard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardBack.kt # feature/profilecard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/CaptureableCardFront.kt # feature/profilecard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/ShareableCard.kt
|
Detekt check failed. Please run |
| rotate(degrees = 180f) { | ||
| for (i in 1..15) { | ||
| drawRoundRect( | ||
| brush = sweepGradient, | ||
| size = Size(cardWidthPx.toFloat(), cardHeightPx.toFloat()), | ||
| topLeft = Offset(-i.toFloat(), -i.toFloat()), | ||
| cornerRadius = CornerRadius(with(density) { 16.toDp().toPx() }), | ||
| ) | ||
| } | ||
| } | ||
| drawImage(imageBitmap) |
There was a problem hiding this comment.
sweepGradient can only paint colors from the 3 o'clock direction.
So, I rotated it 180 degrees and drew the image on top of that.
| for (i in 1..15) { | ||
| drawRoundRect( |
There was a problem hiding this comment.
It was impossible to make a shadow like Figma with just one brush, no matter how hard I tried.
So I think the only way is to draw it like this, gradually shifting the offset. 🙏
| cardHeightPx: Int, | ||
| modifier: Modifier = Modifier, | ||
| ) { | ||
| val sweepGradient = Brush.sweepGradient( |
There was a problem hiding this comment.
The only brush that could create a shadowy effect like Figma was the sweepGradient.
RadialGradient is good for drawing perfect circles, but it is not suitable for drawing shadows on rectangular cards like this one.
No matter how you try, it's impossible to achieve the same kind of rendering as Figma. 🙏
|
@takahirom |
|
The current status is that I want to explore the possibility of improving the multiple calls to |
|
@takahirom |
|
I think so. |
|
@takahirom |
|
I think it depends on how complex it is, so I can't say for sure. I just want to see if we can improve it, and it's not your fault. |
|
The elevation is just a test, but I'm not sure why we need such a complex process for this. 🙇 |
|
Oh, I see. When we actually share it, the shadow doesn't appear correctly, right? |
|
There is certainly reporting on this. 👀 |
I see, so this part wasn't getting across, so the PR review wasn't progressing. Unfortunately, I can't see the Slack link because there is no way to join that workspace. 😢 |
|
You can view this and join Slack using the button at the top right: And I want to try this implementation. Once it works, we can't copy and paste so we have to rewrite it though. |
Issue
None.
This PR will open after the following PRs have been merged.
Overview (Required)
Links
Screenshot (Optional if screenshot test is present or unrelated to UI)