Android Tutorial ScrollView example

The ScrollView is a very useful container which allows you to show many other views on a small screen.
The ScrollView holds an inner panel view which actually contains the other views.
The user vertically scrolls the inner panel as needed.

In this example we will load images from the sdcard and add those to a ScrollView.

scrollview1.png


Adding views to a ScrollView is done by calling:
B4X:
ScrollView.Panel.AddView(...)
In order to avoid "out of memory" errors we use LoadBitmapSample instead of LoadBitmap. LoadBitmapSample accepts two additional parameters: MaxWidth and MaxHeight. When it loads a bitmap it will first get the bitmap original dimensions and then if the bitmap width or height are larger than MaxWidth or MaxHeight the bitmap will be subsampled accordingly. This means that the loaded bitmaps will have lower resolution than the original bitmap. The width / height ratio is preserved.

The following code sets the inner panel height and adds an ImageView for each loaded bitmap:
B4X:
    ScrollView1.Panel.Height = 200dip * Bitmaps.Size 'Set the inner panel height according to the number of images.
    For i = 0 To Bitmaps.Size - 1
        Dim iv As ImageView 'create an ImageView for each bitmap
        iv.Initialize("") 'not interested in any events so we pass empty string.
        Dim bd As BitmapDrawable
        bd.Initialize(Bitmaps.Get(i))
        iv.Background = bd 'set the background of the image view.
        'add the image view to the scroll bar internal panel.
        ScrollView1.Panel.AddView(iv, 5dip, 5dip + i * 200dip, ScrollView1.Width - 10dip, 190dip)
    Next
The code that is loading the bitmaps looks for jpg files under /sdcard/Images

If you want to run this program on the emulator you will first need to create this folder and copy some images to it.
This is done with the "adb" command, that comes with Android SDK.
Open a shell console (Windows Start - Run - Cmd).
Go to the sdk tools folder and issue:
B4X:
c:\android-sdk-windows\tools> adb -e shell mkdir /sdcard/Images
The -e parameter tells adb to send the command to the only connected emulator.
The command is mkdir with the name of the folder.
Note that Android file system is case sensitive.

Now we need to copy some images to this folder.
This is done with the push command:
B4X:
adb -e push "C:\temp" /sdcard/Images
This will copy all files under c:\temp to the Images folder.

The emulator is very slow compared to a real device. While on a real device 50 large images load in 2-3 seconds. It can take a long time for the emulator to load a few small images. I recommend you to copy 2 - 3 small images at most.

Also the experience of the ScrollView on the emulator cannot be compared to a real device (with capacitive screen).

The program is available here: http://www.b4x.com/android/files/tutorials/ScrollView.zip
 

Rusty

Well-Known Member
Licensed User
Longtime User
Is there a way to implement a scrollview where the user can drag his finger over the scrollview to make it scroll instead of touching a button? If so, is there an example of this? Thanks,
 

SteveBee

Member
Licensed User
Longtime User
Tried this on the emulator....

"C:\Program Files\Android\android-sdk\platform-tools>adb -e shell mkdir /sdcard/images"

Received warning:
"mkdir failed for /sdcard/images, Read-only file system"


When I run it on a (new) phone, I also get a warning about the folder not being present.

Steve
 

Cableguy

Expert
Licensed User
Longtime User
Im having some trouble working out ths view...

I added the scrollview and a label in the designer, an at runtime, because in te designer I cannot set the parent to be the ScrollView.panel, I use the ScollView.Panel.AddView method to make the label be a child of of the Scrollviews Panel...

I compile and when it runs it errors saying that : The specified child already has a parent.You must call removeview() on the parent's child first.


What?! Yeah, Right...
So I added the line:

Label1.RemoveView

And recompiled...It works like that!, This should be in the help somewere...because its not that clear!!
 
Last edited:

nad

Active Member
Licensed User
Longtime User
Hello Erel,

Grats and many thanks for B4A. I have been really addicted and in love for the last months. :)

I am trying to select one of the ImageViews in the ScrollView and have it highlighted in some way, also would like to use NO_GRAVITY for the images. I have modified your script like this


iv.Initialize("iv")

instead of

iv.Initialize("") 'not interested in any events so we pass empty string.


And adding the following iv_click sub to try to select the specific imageview



Sub iv_Click
Dim send As View
Dim Bd As BitmapDrawable
Dim iview As ImageView

send=Sender

Log("Send.tag:"&send.Tag)

bd.Initialize(Bitmaps.Get(send.Tag))

iview=ScrollView1.Panel.GetView(send.Tag)
iview.Gravity=Gravity.NO_GRAVITY
iview.Color=Colors.Gray
iview.Background=bd​
End Sub

The problem i have is that when i use NO_GRAVITY the background color for (i would like to have it gray) the selected imageview gets deleted (again black). Would your please give me a hint how can i highlight the selected imageview in a scrollview? I have been researching Klaus great examples on Scrollview but (maybe i have passed something) couldnt find how to highlight an image.

I would appreciate any help.

Thanks a lot and best regards,
 

ozgureffe

Member
Licensed User
Longtime User
what is this error about?

B4X:
Compiling code.                         Error
Error parsing program.
Error description: The given key was not present in the dictionary.
Occurred on line: 33
Sub LoadImages
 

ozgureffe

Member
Licensed User
Longtime User

Hi Erel File is same attached by you to this thread. I didn't change any character. Just downloaded & compiled the attachment and got this error.

I don't have any idea but after changing the name of the Sub with " LoadFolderImages" Error message disappeared and code started to work.

Sent from my HTC HD2
 

Diego San

New Member
Licensed User
Longtime User
Images Path

Hello, I am pretty new to android development. I downloaded ScrollView project and tried to install folders for images. NO success.

My log gave me this help

RootExternal -/mnt/sdcard
DirAssets - AssetsDir
DirInternal -/data/data/anywheresoftware.b4a.samples.scrollview/files
DirDefExtern -/mnt/sdcard/Android/data/anywheresoftware.b4a.samples.scrollview/files

But I can not find those folder on my computer.

Any suggestions?
Thank you in advance
P.S. Thank you for tutorials. They are really helpful.
 

Diego San

New Member
Licensed User
Longtime User
OK , I understand but were exactly I suppose to set image folder? Do I need to update variables? Or maybe I should somehow edit emulator?
Can you point me to any source so I could understand it better?
Thank you
 
Last edited:
Top