Android Tutorial ScrollView examples summary

Discussion in 'Tutorials & Examples' started by klaus, Mar 27, 2011.

  1. klaus

    klaus Expert Licensed User

    There are many ScrollView examples on the forum, I made a summary of them for my own use and I think it would be interesting for others.

    Creating a table view based on ScrollView

    [​IMG]



    Gridline in TableView using Scrollview

    based on Creating a table view based on ScrollView with separation lines.

    [​IMG]



    Rearrange ListView lines post #3
    Despite the title, it is a ScrollView
    [​IMG]




    List with two columns and a checkbox

    [​IMG]



    ScrollView example Image ScrollView

    [​IMG]



    add imageview half manually Another image ScrollView

    [​IMG]


    The same as above but with a Label below each image

    [​IMG]



    Another ScrollView example

    [​IMG]



    Multiple table example post #4

    Example with two tables, based on Gridline in TableView using Scrollview but with two ScrollViews.

    [​IMG]



    Display Long text simple.

    This is the simplest example to display long texts in a ScrollView.

    [​IMG]



    Display Long texts.

    The program displays different texts with different fonts and different font sizes.

    [​IMG]



    Real newb question about how to display a block of scrollable text
    Help display,

    The texts are those from the FastFourierTransform Library Demo program.

    [​IMG]



    Sql and ListView
    Example with:
    - a SQL data base
    - multi selection
    - different colors for header and columns
    - different font sizes and alignments
    - in the example the first column 'Code' is hidden

    [​IMG]



    ScrollView, layouts and getting current selected
    Each item is a Panel
    With a label, an EditText and a Button on each itempanel


    [​IMG]



    ScrollView example with multiselection and SQL

    - adding a row
    - moving a selected row up and down
    - mono-selection, clicking on one row selects it, clicking on another row unselects the previous one and selects the new one.
    - multi-selection, after one row is selected, a longclick on another row activates multi-selection, clicking on a third row selects it, clicking on a selected row unselects it. Unselecting down to one selected row reactivates mono-selection.
    - deleting rows, mono and multi

    [​IMG] [​IMG]



    ScrollView example with a Panel higher than the screen.

    The layouts are designed in the Designer, not in the code.

    There are 2 layout files:
    - Main with the ScrollView.
    - ScrollViewLayout has one Panel higher than the screen, 7 Label views and 7 EditText views, the Panel height is set so the last EditText view is on top of the screen when the panel's lower edge is on the lower edge of the screen.

    Clicking on an EditText moves the Scrollview up to show this EditText view on top of the screen to avoid interference with the virtual keyboard.

    [​IMG] [​IMG]




    TabHost & ScrollViews

    Attached a demo program with a TabHost View with two tabs with ScrollViews.

    [​IMG] [​IMG]



    SQLiteDB

    SQLite database program using several ScrollViews.

    What the program can do:
    - Read a database, 'Load' button.
    - Edit, modify or delete date sets (single- or multi-selection), 'Edit' button.
    - Edit and modify a single cell, 'Long_Click' on a cell in a selected row.
    - Filter the database, 'Filter' button, Click filter or unfilter, LongClick definition of filter criterias.
    - Sort a column ascending or descending, clickink onto the column header.
    - Create a new database, 'New' button.
    - Scroll the table verticaly with the standard Scrollview, and horizontaly on the blue line between the ScrollView and the toolbox (or with a SeekBar, hidden by default.
    - Change the table setup, alignment, column width, text size, colors, etc.

    What the program connot do:
    - Share multiple tables.


    [​IMG] [​IMG]



    GPS Example program

    Setup screen: ScrollView with a panel higher than the screen
    GPS path data: ScrollView table with first column always visibel.

    [​IMG]



    ExpandableListView

    This code is an example of creating an expandable listview using a scrollview.
    The layout of each item in the list is created in code and is customizable on a per item basis.
    The example is pretty barebones but exhibits purpose.

    [​IMG]
     
    Last edited: Jul 31, 2013
  2. Erel

    Erel Administrator Staff Member Licensed User

    Thank you Klaus. Very useful!
    The ScrollView in many cases is better suited for lists than ListView. The main advantage of ListView is that it can display very very long lists.
     
  3. philgoodgood

    philgoodgood Member Licensed User

    hello,

    as to newb that I am, thank you klaus.
    it is a pleasure to read to you.
     
  4. ZJP

    ZJP Active Member Licensed User

    :icon_clap: :sign0060:
     
  5. philgoodgood

    philgoodgood Member Licensed User

    hello,
    I was unmasked :sign0104:

    whose is to blame .... it's Google's fault lol
    :sign0013:
     
  6. palmzac

    palmzac Active Member Licensed User

    Hi,

    I am newbie. How to implement a click event on "Another ScrollView example" ( like listview )? Would you help me ? Thank you very much !

    Palmzac
     
    Last edited: May 17, 2011
  7. klaus

    klaus Expert Licensed User

    Have a look here.

    Best regards.
     
  8. palmzac

    palmzac Active Member Licensed User

    Hi Klaus,

    Thanks for you help !


    plamzac
     
  9. NeoTechni

    NeoTechni Well-Known Member Licensed User

    How do you clear a scrollview?
     
  10. Erel

    Erel Administrator Staff Member Licensed User

    The following sub will remove all views from a ScrollView:
    Code:
    Sub ClearScrollView(sv As ScrollView)
        
    For i = sv.Panel.NumberOfViews - 1 To 0 Step -1
            sv.Panel.GetView(i).RemoveView
        
    Next
    End Sub
     
    Dadaista and Phayao like this.
  11. barx

    barx Well-Known Member Licensed User

    What is the purpose of the example with the panel above the screen?
     
  12. klaus

    klaus Expert Licensed User

    Which one are you speaking of ?
    If it's this one ScrollView example with a Panel higher than the screen, it uses a panel higher than the screen with more views on it that could be displayed at once the screen. Instead of using multiple panels and the need to switch between them, scrolling is faster than switching.

    Best regards.
     
  13. enrique1

    enrique1 Member Licensed User

    Thank you very much!!

    But I have a question..:

    If I have a lot of headers, how can I do to scrollHorizontally?? Is it possible??

    Thx!
     
  14. klaus

    klaus Expert Licensed User

    Have a look at SQLiteDB.

    Best regards.
     
  15. hackhack

    hackhack Active Member Licensed User

    Hm, do you never write comments when you program?
     
    Andy_Kyiv and solfinker like this.
  16. Erel

    Erel Administrator Staff Member Licensed User

    This is a very good tutorial. It is important to keep such threads clean. Please only post specific questions related to the tutorial here.
     
  17. enrique1

    enrique1 Member Licensed User

    Ok Klaus thx!!
     
  18. pcbtmr

    pcbtmr Member Licensed User

    Adding views to Scrollview vs adding to panel

    Klaus,
    I was going thru your first table example and was wondering what is the purpose of adding the views to a panel (table) then adding the panel to the scrollview (SV) rather than adding the views directly to the scrollview?
    Many thanks for the examples. Excellent learning tools!
     
  19. klaus

    klaus Expert Licensed User

    The internal space of a ScrollView is a Panel.
    Both have different heights.
    The ScrollView has a hight equal or smaller than the screen.
    The Panel height is bigger than the ScrollView height, thats the reason for scrolling.
    You cannot add views directly to the ScrollWiew !
    If you have relatively complex 'lines' in the ScrollView you can even have a layout file for each line, load it in a 'line Panel' and add this 'linePanel' to the ScrollView.Panel.

    Best regards.
     
    merlin2049er likes this.
  20. DogHouse

    DogHouse New Member Licensed User

    Erel,

    When you said that ListView can display very, very long lists, what did you mean? Is there are theoretical limit of items that can be displayed by ListView or ScrollView? Also, are there any performance constraints with using ScrollView vs ListView, especially ScrollView with Panels?
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice