Android Tutorial Instead of Label, consider a HorizontalScrollView

Hello,


I'm here to convince you to use HorizontalScrollViews instead of labels in your interfaces.


Labels get messy when you need them to display a string of indeterminate length within a smaller rectangle of dips, because the text wraps in an inaccessible way.

However, a a HorizontalScrollView will display as much text as it can display within the space available, and a swipe of your finger will reveal the rest.

If this sounds good to you then read on.

:sign0142:

The following steps describe how I currently use them:
  1. First you should create a new layout (Note: I saved mine as 'frm')
  2. Next, plop an HSV with its height set to 30, and it's width set to anywhere within the width of your screen onto your design (Note: I named mine 'HsvComponent').
  3. Now, I have written the following Sub that simplifies setting the text of the HSV. Paste it into either your Main class or another activity to test it.

B4X:
Sub SetHsvValue(HsvControl As HorizontalScrollView, StrValue As String)   
   Dim LblValue As Label
   
   LblValue.Initialize("")
   
   LblValue.Text = StrValue
   
   LblValue.Color = Colors.ARGB(0,0,0,0)
   
   LblValue.TextSize = 18
   
   Dim Canvas As Canvas
   Canvas.Initialize(Activity)
   
   Dim IntTextWidth As Int = Canvas.MeasureStringWidth(StrValue, Typeface.DEFAULT, LblValue.TextSize) + 8dip
   
   HsvControl.Panel.RemoveAllViews
      
   HsvControl.Panel.AddView(LblValue,0,2dip,IntTextWidth,30dip)
   
   HsvControl.Panel.Width = LblValue.Width
               
End Sub

Sub SetHsvValue2(HsvControl As HorizontalScrollView, StrValue As String, IntPenColor As Int, IntPaperColor As Int, IntTextSize As Int)   
   
   Dim LblValue As Label
      
   LblValue.Initialize("")
      
   LblValue.Text = StrValue
      
   LblValue.TextColor = IntPenColor
      
   LblValue.Color = IntPaperColor
      
   LblValue.TextSize = IntTextSize
      
   Dim Canvas As Canvas
   Canvas.Initialize(Activity)
      
   Dim IntTextWidth As Int = Canvas.MeasureStringWidth(StrValue, Typeface.DEFAULT, LblValue.TextSize) + 8dip
      
   HsvControl.Panel.RemoveAllViews
      
   HsvControl.Panel.AddView(LblValue,0,1dip,IntTextWidth,30dip)
      
   HsvControl.Panel.Width = LblValue.Width
                  
End Sub

Here is an example of it's use:

B4X:
Sub Globals

   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.
   
   Dim HsvComponent As HorizontalScrollView
   
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("Layout1")

   Activity.LoadLayout("frm")
      
End Sub

Sub Activity_Resume
   SetHsvValue(HsvComponent, "A really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really really long string") 

End Sub

The code should be self-explanatory, but don't be afraid to shout up if you're stuck.

Feel free to discuss the my methods, code and anything else right here or in a PM to me.

Most importantly, have lots and lots of fun!


Kind regards,
Nick
 
Last edited:

DrownedBat

Member
Licensed User
Longtime User
How do you create a HorizontalScrollView from inside the code without using the designer? I'm trying to create the scroll view, place it within the activity, and then set the background image.
 
Top