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
 

ComposerB4A

Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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.
B4X:
Sub iv_Click
    Dim imv as ImageView
   
    imv = Sender
 

eps

Expert
Licensed User
Longtime User
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
 

Rahul333

New Member
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
 
Last edited:

GMan

Well-Known Member
Licensed User
Longtime User
How can i get the pictures from DirAssets?
B4X:
imagesFolder = File.DirRootExternal & "/DCIM/Pictures"
This one won't work:
B4X:
imagesFolder = File.DirAssets

Error:
Images folder not found: AssetsDir
 
Last edited:

GMan

Well-Known Member
Licensed User
Longtime User
Hoi Klaus.
it's this:
B4X:
imagesFolder = File.DirAssets

And here the whole Sub:
B4X:
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

Expert
Licensed User
Longtime User
Try this:
B4X:
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

Well-Known Member
Licensed User
Longtime User
Hoi Klaus,

As my Grandma always said: you don't need to know anything, but: you have always to know who you can ask :rolleyes:
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 :cool:
 

GMan

Well-Known Member
Licensed User
Longtime User
She did it the "old" way: talking with people in realtime - face-to-face.
Unbelievable, but thats the way they communicated ;)
 

gehrlekrona

Member
Licensed User
Longtime User
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?
 
Top