https://kotlinlang.org logo
#android
Title
# android
j

Joe Masilotti

07/20/2020, 11:15 AM
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

João Gonçalves

07/20/2020, 11:16 AM
That seems like a job for a custom view
p

psh

07/20/2020, 1:28 PM
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

Joe Masilotti

07/20/2020, 1:30 PM
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

psh

07/20/2020, 1:35 PM
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

Joe Masilotti

07/20/2020, 1:36 PM
Ah, awesome! That’s exactly what I was looking for. Had no idea what to Google, though. Thank you Paul!
a

Adam Powell

07/20/2020, 5:20 PM
Looks like Armada or Attack Wing or something 😄
j

Joe Masilotti

07/20/2020, 5:20 PM
It’s for X-Wing!
a

Adam Powell

07/20/2020, 5:20 PM
Ah, I was close!
Some friends of mine are way into this whole series of games
j

Joe Masilotti

07/20/2020, 5:22 PM
There’s so much. Both content and physically ha. My collection took up as much as all my other board games put together 🤣
a

Adam Powell

07/20/2020, 5:23 PM
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

Joe Masilotti

07/20/2020, 5:25 PM
At a high level that makes sense. Sounds closer to what I did to build it in UIKit before the SwiftUI version.
a

Adam Powell

07/20/2020, 5:31 PM
Probably. Mutable UI tree toolkits all rhyme to some extent just due to a common problem shape
j

Joe Masilotti

07/20/2020, 5:34 PM
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

Adam Powell

07/20/2020, 5:58 PM
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

Joe Masilotti

07/20/2020, 6:00 PM
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

Adam Powell

07/20/2020, 6:04 PM
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

Joe Masilotti

07/20/2020, 6:05 PM
That’s a very fair point.
a

Adam Powell

07/20/2020, 6:06 PM
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

Joe Masilotti

07/20/2020, 6:08 PM
That’s good to know, and quite a relief. It took me like an entire day to get a
RecyclerView
working 😆
a

Adam Powell

07/20/2020, 6:09 PM
Yeah we're trying to make that a lot easier on the other side 😄
j

Joe Masilotti

07/20/2020, 6:12 PM
Exciting! Thanks for letting me pick your brain, I appreciate it.
👍 1
c

Chethan

07/22/2020, 12:14 AM
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/