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.

Adding views to a ScrollView is done by calling:

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:

    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:

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:

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

 

[socialnetis]

Hi, I would like to do something similar to the tutorial, but with about 200+ images.
The idea is that the images are downloaded on demand, how can I do this?

As an example, there is this 9gag app:
https://play.google.com/store/apps/details?id=com.ninegag.android.app&feature=search_result

They have an endless scrollview that loads tons of images, and also you can click on them and see it in better quality

 

[Erel]

Check UltimateListView library.

 

[ComposerB4A]

Hi to all, one question please, ¿how to identy the image that is selected?
because, each "iv" is new in code and without reference public:
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.
SV1.Panel.AddView(iv, 5dip, 5dip + i * 200dip, SV1.Width - 10dip, 190dip)
Next

 

[klaus]

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

Are you sure ?
To get the selected image you need an event !
So you must modify your line into.
iv.Initialize("iv")
and use the iv_Click event.

Sub iv_Click
    Dim imv as ImageView
   
    imv = Sender

 

[eps]

Hi to all, one question please, ¿how to identy the image that is selected?
because, each "iv" is new in code and without reference public:
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.
SV1.Panel.AddView(iv, 5dip, 5dip + i * 200dip, SV1.Width - 10dip, 190dip)
Next

Something like the code in this post, from this thread. http://www.b4x.com/android/forum/threads/scrollview-example.6612/#post-58277

 

[ComposerB4A]

Thanks Klaus and eps

 

[systems1]

Is there any option to show the scroll bar every time?

 

[Erel]

No. It only appears when the scroll is moving.

 

[Rahul333]

So if i cannot show the scroll bar every time then i have to scroll down the scroll bar automatically when i click radiobutton.
Suppose i have 10 questions with 3 radio buttons as the options for answer. I have created 10panels for 10question each. User can see only 4questions in the page. He need to scroll down to answer more questions.
But he cant make out that there is a scroll bar and there are more questions.
So is there any option to automatically scroll down the scroll bar when user clicks any radiobutton of 4th question, 8th question likewise using basic4android

 

[Erel]

You can programmatically scroll the scrollview with ScrollTo. It will be easier to implement such a solution with CustomListView class.

 

[GMan]

How can i get the pictures from DirAssets?

imagesFolder = File.DirRootExternal & "/DCIM/Pictures"

This one won't work:

imagesFolder = File.DirAssets

Error:

Images folder not found: AssetsDir

 

[klaus]

What is the complete code line to load a picture from DirAssets ?

 

[GMan]

Hoi Klaus.
it's this:

imagesFolder = File.DirAssets

And here the whole Sub:

Sub LoadImages
    Bitmaps.Initialize
    Dim files As List
    Dim imagesFolder As String
    imagesFolder = File.DirAssets

    If File.Exists(imagesFolder, "") = False Then
        ToastMessageShow("Images folder not found: " & CRLF & imagesFolder, True)
        Return
    End If
    files = File.ListFiles(imagesFolder) 'get all files in this folder
    For i = 0 To files.Size - 1
        DoEvents 'required for the ProgressDialog animation
        Dim f As String
        f = files.Get(i)
        If f.ToLowerCase.EndsWith(".jpg") Then
            Dim b As Bitmap
            b.InitializeSample(imagesFolder, f, 200dip, 200dip) 'load the jpeg file and subsample it if it is too large.
            Bitmaps.Add(b) 'add the bitmap to the bitmaps list.
            If Bitmaps.Size > 50 Then Exit 'limit it to 50 images
        End If
    Next
    ToastMessageShow("Found " & Bitmaps.Size & " images", True)
End Sub

 

[klaus]

Try this:

Sub LoadImages
    Bitmaps.Initialize
    Dim files As List
    Dim imagesFolder As String
    imagesFolder = File.DirAssets

    files = File.ListFiles(imagesFolder) 'get all files in this folder
   
    If files.IsInitialized = False Then
        ToastMessageShow("Images folder not found: " & CRLF & imagesFolder, True)
        Return
    End If

    For i = 0 To files.Size - 1
        DoEvents 'required for the ProgressDialog animation
        Dim f As String
        f = files.Get(i)
        If f.ToLowerCase.EndsWith(".jpg") Then
            Dim b As Bitmap
            b.InitializeSample(imagesFolder, f, 200dip, 200dip) 'load the jpeg file and subsample it if it is too large.
            Bitmaps.Add(b) 'add the bitmap to the bitmaps list.
            If Bitmaps.Size > 50 Then Exit 'limit it to 50 images
        End If
    Next
    ToastMessageShow("Found " & Bitmaps.Size & " images", True)
End Sub

I'm afraid that DirAssets is a special folder.
Anyway, DirAssets always exists !

 

[GMan]

Hoi Klaus,

As my Grandma always said: you don't need to know anything, but: you have always to know who you can ask
So Dank u wel - this works perfect.

And yes, the DirAssets is a special one. i knowed that, but didnt remember in which cases this is special and how to solve.
For showing 3 to 5 pictures i wouldnt like to install the app to /create a additional sd-card folder

 

[LucaMs]

if your grandmother had known Internet...

 

[GMan]

She did it the "old" way: talking with people in realtime - face-to-face.
Unbelievable, but thats the way they communicated

 

[gehrlekrona]

I am using this sample with the Scrollview and it works great. Like nad I want to do something with the image that I clicked but can't seem to get it to work. I can get the tag if I set it to iv.tag=i but I can't get the filename. What I want to do is to click the image, load it and view it in the full size.
Anybody?

 

[Erel]

See this class: [Class] CustomListView - A flexible list based on ScrollView

 

[gehrlekrona]

See this class: [Class] CustomListView - A flexible list based on ScrollView

Thanks Erel. It seems like I have to upgrade first to able to use it.