Android Question How to create a scrollable screen

Fayez Boulos

Member
Licensed User
Hi,
It may be a trivial question, however, I added views to the layout which are not fitting vertically the visible part of the device, and I thought a scrollbar will automatically show when I run, however it does not. How to display the missing views on the device screen. Thanks
 

Jeffrey Cameron

Well-Known Member
Licensed User
Longtime User
Anchor a ScrollView control where you wish your layout displayed, then load the layout into the ScrollView's panel; don't forget to set the appropriate height to the Scrollview.Panel after you've loaded the layout.

Also note that your layout should not contain any other scrolling views.
 
Upvote 0

Brian Dean

Well-Known Member
Licensed User
Longtime User
Here is an ultra-simple demonstration. Use a scrollview. Set the scrollview height to screen height, but make the panel within the scrollview deep enough to contain all of your views. Then add the views to this panel ...

B4X:
Sub Process_Globals
End Sub

Sub Globals   
    Dim sv As ScrollView
    Dim test As Label
End Sub

Sub Activity_Create(FirstTime As Boolean)
    setupViews
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Private Sub setupViews
    ' Make the scroll view height match the screen height
    sv.Initialize(Activity.Height)
    ' Make the scrollview's panel (that holds its views) twice screen height, for example
    sv.Panel.Height = Activity.Height * 2
    ' Add the scrollview to the activity
    Activity.AddView(sv, 0, 0, Activity.Width, Activity.Height)
    ' Set up a demonstration view
    test.Initialize("")
    ' Make the test panel half screen height and add it to overlap the bottom of the screen, say
    sv.Panel.AddView(test, 0, 3 * Activity.Height / 4, Activity.Width, Activity.Height / 2)
    test.Color = Colors.Red
    test.TextColor = Colors.Black
    test.Text = "Scrollable label"       
End Sub

Of course, you can do this using the Designer if you prefer to work that way.
 
Upvote 0

Fayez Boulos

Member
Licensed User
Hi Jeffrey Cameron,
I anchored using the properties Horizontal, vertical Anchor
now, in the code I used
B4X:
    Activity.LoadLayout("scroll")
    scrollview1.Panel.LoadLayout("scroll")
    scrollview1.Panel.Height=500
This did not help
Attached is the layout file, what Am I missing?
And can we see the scrolling effect in the IDE (WYSIWYG)?

A side question, Is there a book to buy which explains the concepts and the views, and the coding method, and libraries, and others for a person very new to this environment, rather than keep on trying piece by piece?
Thanks for the help
 

Attachments

  • scroll.bal
    4.7 KB · Views: 374
Upvote 0

Brian Dean

Well-Known Member
Licensed User
Longtime User
Is there a book to buy which explains the concepts and the views, and the coding method, and libraries,

There certainly is. it is called "B4A - Rapid Android Development Using BASIC" - ISBN 9781871281224. It is excellent.
 
Upvote 0

Jeffrey Cameron

Well-Known Member
Licensed User
Longtime User
in the code I used
B4X:
Activity.LoadLayout("scroll")
    scrollview1.Panel.LoadLayout("scroll")
    scrollview1
It looks like you're loading the same layout twice, once into the activity and then again into the scrollview. It should be:
B4X:
Activity.Loadlayout("layout containing just the scrollview1")
Scrollview1.Panel.Loadlayout("layout with all my UI controls")
Scrollview1.panel.height = 500dip
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
To be more efficient, you should post a small project showing the problem, not only the layout file!

upload_2019-2-15_19-19-37.png


You may have a look at ScrollView example with a Panel higher than the screen.

Is there a book to buy which explains the concepts...
Did you have a look at the B4X Documentation Booklets?
 
Upvote 0

Fayez Boulos

Member
Licensed User
Brian Dean,
Thanks a lot for the advise, I ordered the book and should receive it by Feb 20

Jeffrey Cameron,
I appreciate your answer, and I should train myself on the new concepts... It works, Thanks a million
 
Upvote 0

Fayez Boulos

Member
Licensed User
Klaus,
Thanks for your help, I read the example, and I have 2 questions:
  1. Where to put the 2 jpg files attached to the project (Generally where should I save any of such files?)
  2. what is the sub edtItem_FocusChanged is that a built in event that is triggered whenever the user changes EditText focus?
Thanks for the help
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
1. Which jpg files are you speeking of?
If they are used in layouts, you should save them in the Files folder oft he project.
You can access them in the code with File.DirAssets.

2. edtItem_FocusChanged is an event of the EditText view.
 
Upvote 0
Top