https://kotlinlang.org logo
Join Slack
Powered by
Does anyone have any insight on how I could build ...
# android
j
Does anyone have any insight on how I could build this radial selection in Android? This is a screenshot from the iOS app. I’m still pretty new to Android and I’m not even sure where to start Googling.

https://files.slack.com/files-pri/T09229ZC6-F0175HQKE14/image.png▾

j
That seems like a job for a custom view
p
Personally, I break problems like this down into smaller challenges. So for instance, looking at where the white outline goes, it looks like the custom view is drawing the circle with 8 segments and then on top of that drawing a filled rectangle for the 12-o’clock box (see how it adds a little thickness to the outline at the very top) and lastly the icon in the center. Do you know polar coordinates? Convert the (x, y) cartesian coordinates of a touch event into the equivalent polar coordinates (with their origin in the center of the screen) - knowing if you’re inside or outside the circle is a snap at that point, as is knowing which segment needs to be selected or toggled.
j
That’s very close to how the iOS component was built! That make sense in terms of what to draw, but how to draw it? Meaning, what type of Android “thing” do I need to implement? In SwiftUI I did this with a custom 
Shape
built with 
Arc
objects. Is there something similar in Android?
p
I cant speak to the higher level APIs like Jetpack Compose, but take a look at the 
Canvas
class (https://developer.android.com/reference/android/graphics/Canvas) - there are methods for drawing directly onto the custom component, including 
drawArc()
j
Ah, awesome! That’s exactly what I was looking for. Had no idea what to Google, though. Thank you Paul!
a
Looks like Armada or Attack Wing or something 😄
j
It’s for X-Wing!
a
Ah, I was close!
Some friends of mine are way into this whole series of games
j
There’s so much. Both content and physically ha. My collection took up as much as all my other board games put together 🤣
a
Anyway yeah, to do this with Views, subclass View and override onDraw to paint with the canvas API above; call invalidate on the view when data changes to make it redraw. Override onTouchEvent to do complex gestures at a low level
Compose is a bit different but the 
Canvas {}
composable function there has similar capabilities but with the reactive observation built in
j
At a high level that makes sense. Sounds closer to what I did to build it in UIKit before the SwiftUI version.
a
Probably. Mutable UI tree toolkits all rhyme to some extent just due to a common problem shape
j
At risk of going off on a tangent… if I were trying to migrate a SwiftUI app to Android (this one) with little Android experience, am I crazy to go to production with Compose right now?
a
Probably. One big hurdle right now is that some parts of accessibility are WIP. There will continue to be breaking API changes until beta and possibly a few after that and before 1.0 if needed. It partially depends on your timeline and target audience size/disposition.
If you want the simple answer, no, don't ship it yet 🙂
j
That makes sense. I’m trying to figure out if that is worth it over learning/writing “old” Android and then again when Compose is more ready.
a
It's going to be common to see a combination of both in the wild for some time, knowing how both work and being comfortable in each will be useful regardless, I think
j
That’s a very fair point.
a
At a minimum, Views are still the physics of the universe that Android operates with. The life of a frame and the life of input events start from Views as an entry point even when compose is abstracting it and you don't see it directly
It's certainly a goal that you be able to start with compose and stay there, but extra knowledge isn't going to be wasted
j
That’s good to know, and quite a relief. It took me like an entire day to get a 
RecyclerView
working 😆
a
Yeah we're trying to make that a lot easier on the other side 😄
j
Exciting! Thanks for letting me pick your brain, I appreciate it.
👍 1
c
Hi , don't go for canvas. you can make that using Animate victor drawable - Path morphing. ask your designer to provide all set of SVG images , you can change the shape by switching to one path to another https://shapeshifter.design/
Open in Slack
PreviousNext
Powered by