1. Download the free trial version

Tutorial ScrollView example

Discussion in 'Tutorials & Examples' started by Erel, Nov 16, 2010.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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.

    [​IMG]

    Adding views to a ScrollView is done by calling:
    Code:
    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:
    Code:
    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, 5dip5dip + i * 200dip, ScrollView1.Width - 10dip190dip)
        
    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:
    Code:
    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:
    Code:
    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.basic4ppc.com/android/files/tutorials/ScrollView.zip
     
    GMan likes this.
  2. Rusty

    Rusty Well-Known Member Licensed 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,
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    The buttons are just an additional way to move scroll the ScrollView. You can also scroll the view with your finger.
     
  4. SteveBee

    SteveBee Member Licensed 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
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    Maybe the sdcard folder is named different on your device.
    You can run this B4A command to see the folder:
    Code:
    Log(File.DirRootExternal)
     
  6. Cableguy

    Cableguy Expert Licensed 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: Jul 27, 2011
  7. nad

    nad Active Member Licensed 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,
     
    eini dudi likes this.
  8. Erel

    Erel Administrator Staff Member Licensed User

    When you set the Background property you actually overwrite the complete background. So the previous Color is ignored.

    Maybe you can show a semitransparent panel over the image view to highlight it.
     
  9. nad

    nad Active Member Licensed User

    I will try that. Thanks a lot for you answer!
     
  10. ozgureffe

    ozgureffe Member Licensed User

    what is this error about?

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

    Erel Administrator Staff Member Licensed User

    Can you upload your project (File - Export As zip)?
     
  12. ozgureffe

    ozgureffe Member Licensed 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
     
  13. boten

    boten Active Member Licensed User

  14. mersch

    mersch Member

    Why i cant see the images in the emulator? the emulator work well.
     
  15. Erel

    Erel Administrator Staff Member Licensed User

  16. mersch

    mersch Member

  17. Diego San

    Diego San New Member Licensed 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.
     
  18. Erel

    Erel Administrator Staff Member Licensed User

    The emulator uses it own file system. You cannot access it directly from Windows Explorer.

    You will need to use ADB tool to "push" files.

    Note that it is easier and faster to develop with a real device.
     
  19. Diego San

    Diego San New Member Licensed 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: Mar 12, 2012
  20. Erel

    Erel Administrator Staff Member Licensed User

    You should use ADB to "push" files to the emulator virtual sd card.

    Another tool that you can use is ddms. It has a graphical user interface so it might be simpler.

    [​IMG]

    The file explorer is available under Device menu.
     

Share This Page

Loading...