Post
Ask Question

SeekBar Control In Xamarin

Introduction

 
Before starting the discussion about SeekBar, I would like to share brief information about Xamarin. Xamarin is an open-source App platform created by Microsoft for developing iOS and Android apps using C# and DotNet. DotNet Developers can develop Android apps in their language of choice which is C#, without having to switch to or learn another language. The DotNet platform includes tools, programming languages, and libraries for creating many different types of applications. The base platform provides common components for all types of applications. Additional frameworks like Xamarin extend the base platform with specific components for other types.
 
Xamarin adds the following features to the DotNet platform,
  1. Base features for accessing native features
  2. Extensible Markup Language is known as XAML for designing mobile apps
  3. Libraries for common patterns like MVVM
  4. Platform-specific libraries for accessing APIs from Google, Apple, Facebook, etc
  5. Editor extensions to provide syntax highlighting, code completion, etc for developing mobile pages
With Xamarin, the entire app is written in C# and developers can use a huge collection of libraries available to DotNet developers.
 
Also, apps built using Xamarin can take advantage of platform-specific hardware acceleration and are compiled for native performance. Since the DotNet platform is free, Xamarin is also free. There is no licensing cost or fees even for commercial use.
 

SeekBar

 
The SeekBar control is a type of ProgressBar but it includes a draggable thumb to change its value. The thumb can be dragged to the left or right to decrease or increase its value. SeekBar is particularly useful when the values to be set for something are in a range. For e.g., a SeekBar can be used for forwarding or backward songs or videos or controlling the volume of the audio, etc. Consider an example to change the background color of an app window using the three basic colors i.e., red, green, and blue. We can create three SeekBar controls as follows in the activity_main.axml file.
  1. <SeekBar  
  2.    android:id="@+id/sbRed"  
  3.    android:min="0"  
  4.    android:max="255"  
  5.    android:layout_width="275dp"  
  6. android:layout_height="match_parent"/>  
  7. <SeekBar  
  8.    android:id="@+id/sbGreen"  
  9.    android:min="0"  
  10.    android:max="255"  
  11.    android:layout_width="275dp"  
  12. android:layout_height="match_parent"/>  
  13. <SeekBar  
  14.    android:id="@+id/sbBlue"  
  15.    android:min="0"  
  16.    android:max="255"  
  17.    android:layout_width="275dp"  
  18. android:layout_height="match_parent"/> 
The SeekBar controls can now be accessed in the MainActivity.cs file using the FindViewById() method as follows,
  1. sbRed = (SeekBar)FindViewById(Resource.Id.sbRed);  
  2. sbGreen = (SeekBar)FindViewById(Resource.Id.sbGreen);  
  3. sbBlue = (SeekBar)FindViewById(Resource.Id.sbBlue);   
 The ProgressChanged event handlers can be associated with the respective SeekBar controls as follows,
  1. sbRed.ProgressChanged += SbRed_ProgressChanged;  
  2. sbGreen.ProgressChanged += SbGreen_ProgressChanged;  
  3. sbBlue.ProgressChanged += SbBlue_ProgressChanged;  
Following is the code of the ProgressChanged event handlers to display the selected color value (between 0 to 255) in the respective TextView controls and change the background color of the main TextView control,
  1. private void SbRed_ProgressChanged(object sender, SeekBar.ProgressChangedEventArgs e) {  
  2.     tvRed.Text = "Red: " + e.Progress.ToString();  
  3.     SetColor();  
  4. }  
  5. private void SbGreen_ProgressChanged(object sender, SeekBar.ProgressChangedEventArgs e) {  
  6.     tvGreen.Text = "Green: " + e.Progress.ToString();  
  7.     SetColor();  
  8. }  
  9. private void SbBlue_ProgressChanged(object sender, SeekBar.ProgressChangedEventArgs e) {  
  10.     tvBlue.Text = "Blue: " + e.Progress.ToString();  
  11.     SetColor();  
  12. }  
The following SetColor() user-defined functionis used to change the background color of the main TextView by calling the SetBackgroundColor() function of the TextView.
  1. private void SetColor()  
  2. {  
  3.    Color color = Color.Rgb(sbRed.Progress, sbGreen.Progress, sbBlue.Progress);  
  4.    tvBackground.SetBackgroundColor(color);  
  5. }  
The Color structure of the Android.Graphics namespace contains the Rgb() function which takes 3 parameters representing the proportion of red, green and blue colors. Each of the color values must be in the range of 0 to 255 which are specified as the minimum and maximum values of each SeekBar.
 
After building the project, a signed apk file can be creating by clicking on the Distribute button in the Archive Manager in Visual Studio.
 
Important
 
If you do not create a signed apk file, it may show parse error while installing it on an Android device.
 
Following are the ouputs of the app when executed on an Android mobile device,
 
 
 

Conclusion

 
I hope readers of this article find this article useful.


Similar Articles