B4A Library MaskProgressView

The attached project wraps this Github project. You can use it as a normal progress indicator (the one on the left) or as a progress indicator for a music player:
1. If used as a normal progress indicator it should be driven by a timer or something similar that can set the mask position
2. If used as a progress indicator for a music player then the duration (for eg that of a mp3 song) should be set - see the example B4A project.

You need to download the library files from here
https://www.dropbox.com/s/g5m1ok1n7siofhn/AllRequiredFiles.zip?dl=0

Unzip it and copy:
1. the jar and xml files to your additional library folder
2. Mexican-whistler.mp3 to the /Files folder of the attached B4A project

The attached lib files are the B4A lib files only - they are also included in the zipped files that has been posted in Dropbox (link above).
You can change the playing position of the song by dragging the mask of the progress view (for the mask progress view on the right hand side of the display.

Note the files in the /resources folder of the B4A project in case you want to start a new project from scratch.

Note: I have not added all the code for Pause / Play / Next / Previous to the example - you can do so as it is simple to do.

Sample code:

#Region  Project Attributes
    #ApplicationLabel: MaskProgressView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
#End Region


#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim t As Timer

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private mpv1 As MaskProgressView
    Dim bm As Bitmap
    Dim cnt As Int = 0
 
    Private mpv2 As MaskProgressView
    Private b1 As Button
    Private b2 As Button
    Private b3 As Button
    Private b4 As Button
    Private b5 As Button
 
    Dim flag As Int = 0
 
    Dim dur As Int = 0
    Dim mp1 As MediaPlayer
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("main")
    t.Initialize("t", 1000)
 
    bm.Initialize(File.DirAssets,"cover.png")
 
    mpv1.CoverImage = bm
    mpv1.MaxSeconds = 60
    mpv1.BackgroundMaskColor = 0x260000ff          'mask color to apply to the image - a transparent blue
    mpv1.ProgressMaskColor = 0x2600ff00            'mask color to apply to the progress - a transparent green
    mpv1.DurationTextSize = 25
    mpv1.DurationTextColor = Colors.Transparent
 
 
    mpv2.CoverImage = bm
    mpv2.MaxSeconds = 30
    mpv2.BackgroundMaskColor = 0x2600ffff          'mask color to apply to the image - a transparent blue
    mpv2.ProgressMaskColor = 0x26ffff00            'mask color to apply to the progress - a transparent green
    mpv2.DurationTextSize = 30
    mpv2.DurationTextColor = Colors.Magenta

End Sub

Sub Activity_Resume
 
    mp1.Initialize( )
    mp1.Load(File.DirAssets, "Mexican-whistler.mp3")
 
    dur = mp1.Duration/1000
 

End Sub

Sub Activity_Pause (UserClosed As Boolean)
 
    mp1.Stop
    mp1.Release
    t.Enabled = False

End Sub

Sub t_tick
 
    cnt = cnt + 1
    If cnt < 61 Then
      mpv1.MaskTo = cnt
    Else
      t.Enabled = False
      mpv1.stop
      cnt = 0
    End If     
 
End Sub


Sub b1_Click
 
    t.Enabled = True
 
End Sub


Sub b2_Click
 
    mpv2.stop
    If flag = 1 Then
        flag = 0
        bm.Initialize(File.DirAssets,"cover.png")
        mpv2.CoverImage = bm
    Else
        flag = 1
        bm.Initialize(File.DirAssets,"cover2.png")
        mpv2.CoverImage = bm         
    End If 
    mpv2.start 
 
End Sub

Sub b3_Click
 
    mpv2.MaxSeconds = dur
    mp1.Play
    mpv2.start
 
End Sub

Sub b4_Click
 
    mp1.Pause
    mpv2.pause
 
 
End Sub

Sub b5_Click
 
    mpv2.stop
    If flag = 0 Then
        flag = 1
        bm.Initialize(File.DirAssets,"cover2.png")
        mpv2.CoverImage = bm
    Else
        flag = 0
        bm.Initialize(File.DirAssets,"cover.png")
        mpv2.CoverImage = bm         
    End If 
    mpv2.start
 
End Sub

Sub mpv2_progress_changed(pos As Int)
 
    Log("position = " & pos)
    mp1.Position = pos*1000
 
End Sub

Sub mpv2_progress_completed()
 
    Log("mpv2 is DONE")
 
End Sub

Library:

MaskProgressView
Author: Github: Mert Simsek, Wrapped by: Johan Schoeman
Version: 1

• MaskProgressView
  Events:
  • progress_changed (position As Int), progress_completed( As )
  Fields:
  • ba As BA
  Methods:
  • BringToFront
  • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
  • Initialize (EventName As String)
  • Invalidate
  • Invalidate2 (arg0 As Rect)
  • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • IsInitialized As Boolean
  • RemoveView
  • RequestFocus As Boolean
  • SendToBack
  • SetBackgroundImage (arg0 As Bitmap)
  • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
  • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
  • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
  • isPaused As Boolean
  • isPlaying As Boolean
  • pause
    Pause Animation
  • start
    Start animation horizontally
  • stop
    Set stop animation values to current position
    Reset progress animation float values.
  Properties:
  • Background As Drawable
  • BackgroundMaskColor As Int [write only]
  • Color As Int [write only]
  • CoverImage As Bitmap [write only]
  • DurationTextColor As Int [write only]
  • DurationTextSize As Int [write only]
  • Enabled As Boolean
  • Height As Int
  • Left As Int
  • MaskTo As Int [write only]
  • MaxSeconds As Int [write only]
    Set Max progress
  • Parent As Object [read only]
  • ProgressMaskColor As Int [write only]
  • Tag As Object
  • Top As Int
  • Visible As Boolean
  • Width As Int

 

[Johan Schoeman]

There seem to have been a problem with the B4A project posted in Post #1. Please use the new B4A project in post #1. Files have been moved to the /Object/res/xml and /Objects/res/values folders of the B4A project. Make sure they are set to READ ONLY after you have unzipped the project and before you run it for the first time. The library files as per post #1 remain unchanged.