Android Question [B4X][XUI] ImageSlider - dot Indicator

[Christian García S.]

Hello,

I have implemented an imageslider, but I would like to have an indicator that lets me know in what position I am.

For the following I have done the following:

1. Create 2 labels, one for currentPanel and one for nextPanel.
2. When the showImage event happens, I change the text of each label with csbuilder.

The code is:

Public Sub DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
    mBase = Base
    WindowBase = xui.CreatePanel("WindowBase")
    mBase.AddView(WindowBase, 0, 0, 0, 0)
    AnimationDuration = Props.Get("AnimationDuration")
    CacheSize = Props.Get("CacheSize")
    AnimationType = Props.Get("AnimationType")
    CurrentPanel = xui.CreatePanel("pnl")
    NextPanel = xui.CreatePanel("pnl")
    panels = Array(CurrentPanel, NextPanel)
    WindowBase.AddView(CurrentPanel, 0, 0, 0, 0)
    WindowBase.AddView(NextPanel, 0, 0, 0, 0)
    Dim iv1, iv2 As ImageView
  
    iv1.Initialize("")
    iv2.Initialize("")
  
    label1.Initialize("")
    label2.Initialize("")
  
    CurrentPanel.AddView(label1,0,90%y,100%x,0) ' this code not works
    CurrentPanel.AddView(iv1, 0, 0, 0, 0)  
  
    NextPanel.AddView(label2,0,90%y,100%x,0) ' this code not works
    NextPanel.AddView(iv2, 0, 0, 0, 0)
  
    Base_Resize(mBase.Width, mBase.Height)
End Sub

Private Sub ShowImage (bmp As B4XBitmap, MovingToNext As Boolean)
    NextPanel.GetView(0).SetBitmap(bmp)
    NextPanel.GetView(0).SetLayoutAnimated(0, WindowBase.Width / 2 - bmp.Width / 2, _
        WindowBase.Height / 2 - bmp.Height / 2, bmp.Width, bmp.Height)
    NextPanel.Visible = True
    Select AnimationType
        Case "Vertical"
            Dim top As Int
            If MovingToNext Then top = -NextPanel.Height Else top = NextPanel.Height
            NextPanel.SetLayoutAnimated(0, 0, top, NextPanel.Width, NextPanel.Height)
            NextPanel.SetLayoutAnimated(AnimationDuration, 0, 0, NextPanel.Width, NextPanel.Height)
            CurrentPanel.SetLayoutAnimated(AnimationDuration, 0, -top, CurrentPanel.Width, CurrentPanel.Height)
        Case "Horizontal"
            Dim left As Int
            If MovingToNext Then left = NextPanel.Width Else left = -NextPanel.Width          
            NextPanel.SetLayoutAnimated(0, left, 0, NextPanel.Width, NextPanel.Height)
            NextPanel.SetLayoutAnimated(AnimationDuration, 0, 0, NextPanel.Width, NextPanel.Height)
            CurrentPanel.SetLayoutAnimated(AnimationDuration, -left, 0, CurrentPanel.Width, CurrentPanel.Height)          
            Log("ShowImage")
        Case "Fade"
            NextPanel.Visible = False
            NextPanel.SetLayoutAnimated(0, left, 0, NextPanel.Width, NextPanel.Height)
            NextPanel.SetVisibleAnimated(AnimationDuration, True)
            CurrentPanel.SetVisibleAnimated(AnimationDuration, False)
    End Select
    Dim p As B4XView = CurrentPanel
    CurrentPanel = NextPanel
    NextPanel = p
    SetDot(CurrentIndex) ' function
End Sub

Sub SetDot(IndexActual As Int)
    Dim color As Int
    Dim cs As CSBuilder
    cs.Initialize.Alignment("ALIGN_CENTER")
                  
    For j = 0 To NumberOfImages-1
        If j = IndexActual Then
            color = 0xFF808080
        Else
            color = 0xFFE6E6FA
        End If
          
        cs.Typeface(Typeface.FONTAWESOME).Color(color).Size(10).Append(Chr(0xF111)).Append(" ").PopAll
    Next
  
    label1.Text = cs
    label2.Text = cs
  
End Sub

The code works, but I can't put the labels to te bottom to slider, I tried with differents code but always is showed in top.

Can you help me with this ??? or if you have other ideas are welcome.

Thanks

 

[Erel]

I've added a dot indicator in v1.10: https://www.b4x.com/android/forum/threads/b4x-xui-imageslider.87128/

 

[Christian García S.]

Thanks @Erel

 

[Andrew (Digitwell)]

Hi @Erel ,

I noticed that the Indicators seem to be not completely centered.

After a bit of investigation, I thing that you have forgotten to add an offset which is half the width of the Indicator spacing.

the DrawCircle should be:

IndicatorsCVS.DrawCircle(IndicatorsCVS.TargetRect.CenterX + (-mNumberOfImages / 2 + i) * 30dip)+ 15dip, 25dip, 3dip, clr, True, 0)

 

[Erel]

You are correct. Fixed in v1.11. The explanation is a bit different. The offset is determined by the edges, not the points. So we need to subtract one from mNumberOfImages:

IndicatorsCVS.DrawCircle(IndicatorsCVS.TargetRect.CenterX + (-(mNumberOfImages - 1) / 2 + i) * 30dip, 25dip, 3dip, clr, True, 0)

The result is the same.