Timing display

Let’s start with the part dedicated to the timing of the song. According to the mock-up, we will have a text on the left for the current listening time, and on the right, for the total duration of the track:

To reproduce it in the application, we will use the Label component which allows to display some text on the screen:

Filename:MusicPlayerView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

Label ElapsedTime => new Label
{
    FontSize = 14,
    Text = "0:36",
    TextColor = Colors.White
}.TextCenter();

Label TotalTime => new Label
{
    FontSize = 14,
    Text = "2:57",
    TextColor = Colors.White
}.TextCenter();

These two new elements are set to display static text in white and with a relatively small font size. However, the font size will automatically be adjusted to the level of text enlargement set by the user in the phone’s accessibility settings.

Adjusting the playback head

The middle element has two functions: displaying and controlling the playback position in the song. Indeed, the user can move forward or backward in the song by sliding his finger horizontally. In addition, this component has a pink part that represents the elapsed time, and a black part for the remaining time.

To reproduce this navigation bar, we will use the Slider component:

Filename:MusicPlayerView.cs

1
2
3
4
5
6
7
8

Slider TimeTracker => new Slider
{
    Minimum = 0,
    MinimumTrackColor = Colors.LightSalmon,
    Maximum = 100,
    MaximumTrackColor = Colors.Black,
    Value = 20
};

A Slider is a control with a cursor that allows the user to select a specific value from a range of possible values. In our case, it’s like having a ruler which is graduated from 0 to 100 with a cursor positioned on 20.

That’s it! Well, actually here, all the configuration values are static, but the final idea is allowing the user to advance or rewind the track to the nearest second.

Now, we’re done with the first row of elements of the music player. To check that the display is correct, I would like you delete all the child elements of the BottomLayout before assigning all the components that we have defined in this chapter.

To do this, you may be tempted to write something like :

Filename:MusicPlayerView.cs

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Grid BottomLayout => new Grid
{
    ...
    Children =
    {
        ElapsedTime.Row(0).Column(1),
        TimeTracker.Row(0).Column(2),
        TotalTime.Row(0).Column(5)
    }
};

At first glance, it looks pretty good! However, if you start the application, you will notice that there is a slight problem with the display:

Don’t panic! We will see right away how to readjust it.

Better use of the Grid

If you remember, we initially divided the BottomLayout into 7 columns. However, even if our Slider is well positioned from box n°3 of the first row, it does not clearly say where to stop! We could then simply tell the Slider to spread out over the next columns, like this:

To do this, we use the ColumnSpan() method to ask the Slider to expand up to 3 columns from the cell n°3:

Filename:MusicPlayerView.cs

1

TimeTracker.Row(0).Column(2).ColumnSpan(3)

Now we’re really done! Let’s run the application again to see what it looks like:

Well, that’s true, it’s nice but it doesn’t do much! But we’ll finish the visual part first before moving on to a more functional part of the application.

Besides, we still have a lot of buttons to put in place! Our goal for the next chapter is to control the playback of the media.

More articles in the series:

Introduction
Setup the project
First run of the project
MVVM is the key to succeed
How to navigate
Scaffolding
Timing display
Media playback controls
Volume display
Play music
Control the playback position