Android Tutorial ScrollView example

Erel · Nov 16, 2010

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:

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

socialnetis · Apr 5, 2013

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 · Apr 5, 2013

Check UltimateListView library.

ComposerB4A · Oct 29, 2013

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 · Oct 29, 2013

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 · Oct 29, 2013

ComposerB4A said:
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 · Oct 30, 2013

Thanks Klaus and eps

systems1 · Nov 15, 2013

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

Erel · Nov 17, 2013

No. It only appears when the scroll is moving.

Rahul333 · Nov 19, 2013

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 · Nov 19, 2013

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

GMan · Apr 28, 2014

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

klaus · Apr 28, 2014

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

GMan · Apr 29, 2014

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 · Apr 29, 2014

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 · Apr 29, 2014

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 · Apr 29, 2014

if your grandmother had known Internet...

GMan · Apr 29, 2014

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

gehrlekrona · May 17, 2014

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 · May 18, 2014

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

gehrlekrona · May 18, 2014

Erel said:
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.

Android Tutorial ScrollView example

Active Member

B4X founder

Member

Expert

Expert

Member

Member

B4X founder

New Member

B4X founder

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Member

B4X founder

Member

Privacy & Transparency

Privacy & Transparency