Android Question How to create a scrollable screen

[Fayez Boulos]

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]

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.

 

[Brian Dean]

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 ...

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.

 

[Fayez Boulos]

Hi Jeffrey Cameron,
I anchored using the properties Horizontal, vertical Anchor
now, in the code I used

    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

 

[Brian Dean]

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.

 

[Jeffrey Cameron]

in the code I used

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:

Activity.Loadlayout("layout containing just the scrollview1")
Scrollview1.Panel.Loadlayout("layout with all my UI controls")
Scrollview1.panel.height = 500dip

 

[klaus]

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

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?

 

[Fayez Boulos]

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

 

[Fayez Boulos]

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

 

[Fayez Boulos]

Klaus
Wow Wow !! ... Treasure of documentations ... Thanks a lot

 

[klaus]

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.