Android Tutorial ScrollView example

johnaaronrose

Active Member
Licensed User
Longtime User
From existing scrolling text in Label, displaying text occupying all of screen



Yes to above question. Please see thread entitled "From existing scrolling text in Label, displaying text occupying all of screen".
 

johnaaronrose

Active Member
Licensed User
Longtime User
ScrollView.Panel.Height set equal to Label.Top + Label.Height


I've been trying to understand why "set the ScrollView.Panel.Height equal to the Label.Top + Label.Height. ".

I've now done this and it gives problems: see below. I have a ScrollInformation view which contains, in its Panel, a Label Information view (in which there is text that I want to be vertically scrollable). Directly above the ScrollInformation view is a LabelCountry view. Directly below the ScrollInformation view is a ImageViewPhoto view. So, I do not want the ScrollInformation view to interfere with / be interfered by the LabelCountry & ImageViewPhoto views.

My views' L,T,W,H values for a particular piece of text are:
LabelCountry(0,90,160,30)
ScrollViewInformation(0,120,210,200)
LabelInformation(0,120,210,1188)
ImageViewPhoto(0,324,210,155)

The ScrollViewInformation.Panel is Width 210 & Height 1308.

What happens is that the text starts about the same distance down ScrollViewInformation as LabelInformation.Top. Also, it scrolls down not to the bottom of the text but approx LabelInformation.Top from the bottom of the text. I have tried both setting ScrollViewInformation.Panel.ScrollPosition to 0 & to Label.Top, but it makes no difference to the display. Any ideas?
 

johnaaronrose

Active Member
Licensed User
Longtime User
Questions

I think the attached example is what you are looking for.

Best regards.

I've looked at the example which works OK when I ran it. I've modified my app but still have the same problem.

Some questions:
1. Is it allowable for the ScrollViewInformation.Panel to be the same size & position as ScrollViewInformation.Panel?
2. When coding ScrollViewInformation.Panel.AddView(LabelInformation..., should the Left & Top be relative to ScrollViewInformation.Panel Left & Top?
3. What value should ScrollViewInformation.ScrollPosition be set to in order to position the text at its start?
 
Last edited:

klaus

Expert
Licensed User
Longtime User
I've modified my app but still have the same problem.
Without seeing your code impossible to give you any advice.

1. Sorry I don't understand ?
The ScrollViewInformation.Panel has the same width as ScrollViewInformation and you can set ScrollViewInformation.Panel.Height the value you want.
2. Yes
If you set ScrollViewInformation.Panel.AddView(LabelInformation, 10dip, 10dip, 150dip, 50dip) the top and left postions of LabelInformation are 10dip right and 10dip below the ScrollViewInformation.Panel upper left corner.
3. 0 (zero)

Best regards.
 

johnaaronrose

Active Member
Licensed User
Longtime User
Test app

Klaus,

I've attached my app (with irrelevant coding, activities, layouts etc) removed. There are 3 files attached:
Test.zip - app containing source, files, .apk etc
TestLog.txt - Log of a run using 320x480 emulator
TestModules.zip - containing DBUtils & HttpUtils2
As well as Core, app uses libraries: HTTP, MLfiles, ScrollView2D, SQL & StringUtils

The app has 2 Activities: main used to download the database from the web & view to view the resultant data: Test app is coded to only read 2 rows from the database. I've also attached the text (in the lblInformation view) for the first row displayed.
View attachment Test.zip

View attachment TestLog.txt

View attachment TestModules.zip

View attachment TestlblInformation.txt

PS I also made a change to MLfiles to make the filename variable Public as otherwise there's a compile error.

Thanks for offering to look at the code to find the reason why the lblInformation view does not display & scroll properly.
 

klaus

Expert
Licensed User
Longtime User
Here you are.
It took me a while to find out where the problem was.
In Activity_Resume you changed the layout of the label to wrong values ?!
The two DoEvents are necessary to update the scroll positions.
B4X:
Sub Activity_Resume
'    ResizeViews
'    lblInformation.SetLayout(scvInformation.Left, scvInformation.Top, scvInformation.Width, scvInformation.Height)
    scvInformation.ScrollPosition = scvInformationScrollPosition
'    sv2dPhoto.Panel.Width = ivPhoto.Width
'    sv2dPhoto.Panel.Height = ivPhoto.Height
    sv2dPhoto.HorizontalScrollPosition = sv2dPhotoHorizontalScrollPosition
    DoEvents
    sv2dPhoto.VerticalScrollPosition = sv2dPhotoVerticalScrollPosition
    DoEvents
End Sub
You must also move these variables from Globals to Process_Globals otherwise the values are lost.
B4X:
  Dim scvInformationScrollPosition As Int
     scvInformationScrollPosition = 0
   Dim sv2dPhotoHorizontalScrollPosition As Int
     sv2dPhotoHorizontalScrollPosition = 0
   Dim sv2dPhotoVerticalScrollPosition As Int
     sv2dPhotoVerticalScrollPosition = 0
Best regards.
 

Attachments

  • TestNew.zip
    18.5 KB · Views: 573

johnaaronrose

Active Member
Licensed User
Longtime User
Changing scvInformation position & size


I checked your TestNew out & it was OK on my system. I've changed my app so that the variables defining ScrollPosition for scvInformationScroll & sv2DPhoto are now Private in Process_Globals and they are OK. Also, I've used DoEvents after changing properties for scvInformation, scvInformation.Panel, sv2DPhoto.

However, I still have the problem that I want to use the ResizeViews & lblInformation.SetLayout commands in Activity_Resume. The reason for this is that they are used to change the size & position of controls when the screen's orientation is changed, particularly because the text size for each database row displayed will be different: the idea comes from dlfallen's thread entitled "Multiple screens - one way to do it". There's something strange about embedding a Label in a ScrollView for text vertical scrolling because exactly the same technique works OK for the photo used in my app when using the third party sv2d library (i.e. sv2dPhoto using ivPhoto to define the position & size of the actual photo). Currently, the only solution that I can see is to remove the lblInformation view (if present) and add it again in Activity_Pause. Is that reasonable?
 

johnaaronrose

Active Member
Licensed User
Longtime User
Success

I finally figured it out. My coding is correct except:
I needed to save lblInformation.Height in a Process_Globals Private variable named InformationHeight (after using StrUtil.MeasureMultilineTextHeight) in DisplayDetails sub. InformationHeight is also calculated & saved in the same way in Activity_Resume (i.e. after ResizeViews is executed to allow for screen orientation change). On Activity_Pause, InformationHeight is obtained from lblInformation.Height. These steps are similar to those used for setting the sv2dPhoto width & height.
 

pixelpop

Active Member
Licensed User
Longtime User
Thanks for good tutorial. I have adapted some of johnaaronrose's code to my project, but I need to embed both the bitmap and the text in a single scrollable window.

If you could maybe modify johnaaronrose's sample to put both the invImage and lblInformation into the same ScrollView, that would be wonderful.

(For a real-world example of what I am trying to do, the CNN app display of news stories is a good one).

Thanks!
 
Last edited:

enrico

Active Member
Licensed User
Longtime User
Panel with horizontal scroll buttons

I can't understand why this code doesn't work.

B4X:
   Dim pnlButtons As Panel
   Dim scvButtons As HorizontalScrollView
   Dim btnHeight, btnWidth As Int
   pnlButtons.Initialize("pnlButtons")
   pnlButtons.Color = Colors.White
   Activity.AddView(pnlButtons, 0, 100%y - 60dip, 100%x, 60dip) 
   scvButtons.Initialize(1000dip,"")
   pnlButtons.AddView(scvButtons, 0, 0, 100%x, 100%y)
   btnHeight = 60dip
   btnWidth = 130dip
   Dim btn(6) As Button
   For i = 0 To 5
      btn(i).Initialize("")
      scvButtons.panel.AddView(btn(i), i * btnWidth, Activity.Height - btnHeight, btnWidth, btnHeight)
   Next
   scvButtons.panel.Width = (i + 1) * btnWidth
   btn(0).SetBackgroundImage(LoadBitmap(File.DirAssets,"button1.png"))
   btn(1).SetBackgroundImage(LoadBitmap(File.DirAssets,"button2.png"))
   btn(2).SetBackgroundImage(LoadBitmap(File.DirAssets,"button3.png"))
   btn(3).SetBackgroundImage(LoadBitmap(File.DirAssets,"button4.png"))
   btn(4).SetBackgroundImage(LoadBitmap(File.DirAssets,"button5.png"))
   btn(5).SetBackgroundImage(LoadBitmap(File.DirAssets,"button6.png"))

Any Help ?
 

klaus

Expert
Licensed User
Longtime User
I would change your code to this:
B4X:
Dim pnlButtons As Panel
Dim scvButtons As HorizontalScrollView
Dim btnHeight, btnWidth As Int
pnlButtons.Initialize("pnlButtons")
pnlButtons.Color = Colors.White
btnHeight = 60dip
btnWidth = 130dip
Activity.AddView(pnlButtons, 0, 100%y - btnHeight, 100%x, btnHeight) 
scvButtons.Initialize(1000dip,"")
pnlButtons.AddView(scvButtons, 0, 0, 100%x, btnHeight)
The problem of your code is this line:
pnlButtons.AddView(scvButtons, 0, 0, 100%x, 100%y)
100%y is the screen height, not the Panel height.

Best regards.
 

enrico

Active Member
Licensed User
Longtime User
Thank you, but I still can only see a white empty panel (horizontal scroll now seems to work).
I can't see the buttons.
 
Last edited:

electronik54

Member
Licensed User
Longtime User
make scrollview background white

:sign0085:
every time i scroll the background of the scrollview turns black(i am using samsung galaxy tab 2.2.1) how do i make scrollview background white. i dont want to do it using image.
i would like something like we have <HlistLV.ScrollingBackgroundColor = Colors.White> for list view
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…