Implementing the discrete Seekbar for Wave Generator
The Wave Generator instrument in PSLab Android app allows us to produce waveforms having different values of properties like frequency, duty, phase etc.
The range of these properties allowed by PSLab Device are :
| Wave Property | Range | ||
|---|---|---|---|
| Min | Max | Step Size | |
| Frequency | 10 Hz | 5000 Hz | 1 Hz |
| Phase | 0° | 360° | 1° |
| Duty | 10% | 100% | 10% |
We can set these values using the up/down arrow buttons provided by the wave generator but the problem is that the range of values is very high and least counts are small so it is convenient to set the values using only the up and down arrow buttons.
Therefore we need something that could allow us to directly set any value of our choice while keeping the UI interactive.
The solution to this problem – “Discrete Seekbar”. It contains a slider having points at equal intervals and whose length represents the range of the values and a head that slides over the slider and is used to select a specific value from a range of values.
I have included the discrete Seekbar in Wave Generator by using a third-party library if you want to add Seekbar directly you can do that by directly using the default Seekbar widget provided by Android SDK and setting the following attribute in as shown below.
android:theme = “@style/Widget.AppCompat.SeekBar.Discrete”
Refer to this post[2] for implementing Seekbar directly without an external library.
The reason I chose this library is that:-
- It offers various implementation of different types of Seekbar like discrete and continuous.
- Implementation of Seekbar is simpler and it offers various customizations like thumb color, track color, tick text etc.
In following steps I will implement the discrete Seekbar:
Step 1 Adding the dependency
For this project, I will be using an external library “IndicatorSeekbarLibrary” by Warkiz[1], for adding the dependency we need to include the following code in our build.gradle file.
dependencies{
implementation 'com.github.warkiz.widget:indicatorseekbar:2.0.9'
}
Step 2 Including the Seekbar in layout
For this step, we need to add the Seekbar widget using <com.warkiz.widget.IndicatorSeekBar> XML tag in our wave generator layout file to include the Seekbar in our layout as shown in the code below:
<com.warkiz.widget.IndicatorSeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:isb_max="5000"
app:isb_min="0"
app:isb_ticks_count="5"
app:isb_thumb_color="@color/color_green"
app:isb_thumb_size="20dp"
app:isb_track_background_color="@color/color_gray"
app:isb_track_background_size="2dp"
app:isb_track_progress_color="@color/color_blue"
app:isb_track_progress_size="4dp" />
Some important attributes used above:
app:isb_max : defines the max value that can be achieved by the Seekbar.
app:isb_min : defines the min value that can be achieved by the Seekbar
app:isb_ticks_count: no. of ticks(interval) that has to be shown on the slider
We can see different components of Seekbar like track, indicator, thumb, tick of SeekBar in the following diagram[2].
(Source – https://github.com/warkiz/IndicatorSeekBar/blob/master/README.md)
Step 3 Attaching the listener to the Seekbar in Java file
In this step we need to attach the listener to the Seekbar to record changes in the Seekbar made by the user, for this we will create a new listener with the help of onSeekBarChangeListener interface and attach it with the Seekbar as shown in following code
IndicatorSeekBar seekbar = (IndicatorSeekBar) findViewbyId(R.id.seekbar);
seekBar.setOnSeekChangeListener(new OnSeekChangeListener() {
@Override
public void onSeeking(SeekParams seekParams) {
/* called when the user is sliding the thumb */
}
@Override
public void onStartTrackingTouch(IndicatorSeekBar seekBar) {
/* called when the sliding of thumb is started */
}
@Override
public void onStopTrackingTouch(IndicatorSeekBar seekBar) {
/* called when the sliding of thumb stops */
}
});
After following all the above steps, I implemented the Seekbar shown in Figure 2 below in my wave generator and now it becomes really easy to set different values of properties for without having to continually press the up/down button.
Resources
- warkiz/IndicatorSeekBar library – Github Repo of the Indicator SeekBar library
- http://nileshsenta.blogspot.com/2016/10/discrete-seekbar-without-third-party.html – Blog by Nilesh Shenta on how to implement discrete without third party library
