google
SquareSegmentedProgressIndicator
Create a SquareSegmentedProgressIndicator (or RectangularSegmentedProgressIndicator)
Would we use Compose Canvas for this?
See https://google.github.io/horologist/composables/#segmented-progress-indicator
Yes, and I think it probably worth moving the existing segmented one to using canvas as opposed to multiple progress indicators as it currently does.
Hi, is there a design on this? 😄 I tried to implement this to be like a rectangular version of the SegmentedProgressIndicator, but it looked a bit strange. Furthermore, is there a plan to also have a LinearSegmentedProgressIndicator or am I misunderstanding something here? 😅
Hey, no official design. The idea was to copy the style of th Circular design closely. It likely won't get attention at the moment as an official design, but I can check. Can you attach a screenshot and put up a PR with your current attempt?
If it really won't work with the current design, we should probably close this.
Gave this another shot, and I managed to get to this here:
| progress = 0f | progress = 0.375f | progress = 0.6875f |
|---|---|---|
 |
 |
 |
I choose to expose a progress as a float value and divide the section based on the length of the circumference instead of dealing with the angles as I first tried.
Here I have used StrokeCap.Round for the lines as by the sectioning of the lines. I am having some issues with how to design this API. My reference point was the SegmentedProgressIndicator that was already implemented. Please see SegmentedProgressIndicator. This exposes a list of segments as data classes that can have different weight etc. However, in contrast to SegmentedProgressIndicator for the rectangular one, there is multiple different ways to section a square. I think also that in the pictures above, it looks good as there is a even sectioning of the Square. If the user would choose an odd sectioning I'm afraid it would look a bit strange.
There is also the question about exposing the corner radius as that will have an impact on the sectioning. For instance, in the pictures above the corner radius is 1/4 of the height. This makes the corner length equal to the other sections length. However if you would have corner radius to 1/8 of the height, this would make the sections corner length 1/2 of the other sections length.
So I guess my question is, what do you guys think of this design? Also what is the goal here in terms of API design and outcome?
Can you make a shot with the odd sections, I'll see if I can get some advice from designers. I think it's important it works for naturally occurring sections, not just ones carefully selected for a rectangle.
I'll take a look at the code later this week.
But it looks good.
Sorry for late reply. Had a lot to do at work this week. I have not completely managed the section I think with this implementation. Here is a shot if there are odd sections with weight (3, 3, 2). In my implementation now the section sum must be 8 because there is 8 parts 🤔 I think I need to make them independent of that.
I also don't think it will work with round cap on the ends. Then you will see the 8 parts of the implementation. I might be wrong here but I don't think we can have only one end of a line with square cap and one with round cap? 🤔 Do you know? Think I might need some assistant to nail the last part of this if you have time at some point? :)
Yes :) I have a branch on my fork that I just rebased (https://github.com/oas004/horologist/blob/feature/square-segmented-progressbar/composables/src/main/java/com/google/android/horologist/composables/SquareSegmentedProgressIndicator.kt) . I can also make a draft PR if that is better? :)
@yschimke Would it be cool to add a image of this on the readme? :) Like we have with the Circular one? I'm happy to make a PR if it is desirable :)
Also, is there anything more on this I should do until we can close this issue? :)