![]() ![]() To get the size of our Composable we can use Modifier.onSizeChanged and store that value in a state.ĭepending on that value we can determine the with of the rect. Before we get to drawing the bar, we first need to do some preparation like calculating the width and height.įor the width we want our bar to fill the entire width of the available space, with some padding for the sliders, but we will come to that later. The simplest element to start with and to setup our Composable is the gray bar in the background guiding our sliders. ![]() And finally our slider handles which we want to drag across the bar to select our range ( Orange).An indication of our selected range on our bar itself ( Blue).Step markers, indicating all available values on our bar ( Green).A rounded bar in the background, guiding our sliders ( Purple).The color and font style should reflect our selected range ( Red) Labels above the slider bar, indicating the values available and selected.To get started we first need to break down the different elements involved in our Composable and how to draw them.Īs we can see on the following image we can break down the Labeled Range Slider into 5 elements. ![]() In part 4 of this series let's start putting everything we learned so far, and a little more, together and create our Labeled Range Slider. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |