Android Tutorial ScrollView examples summary

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

table_1.png




Gridline in TableView using Scrollview

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

tableexample-jpg.7027




Rearrange ListView lines post #3
Despite the title, it is a ScrollView
scrollviewlist-jpg.7043





List with two columns and a checkbox

20110106_01.png




ScrollView example Image ScrollView

scrollview1.png




add imageview half manually Another image ScrollView

imagescrollview-jpg.7024



The same as above but with a Label below each image

imagescrollviewlabel-jpg.11460




Another ScrollView example

customscrollview-jpg.7321




Multiple table example post #4

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

tableexample20-jpg.7142




Display Long text simple.

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

longtextsimple-jpg.11671




Display Long texts.

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

longtext-jpg.11669




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

The texts are those from the FastFourierTransform Library Demo program.

helpscrollview-jpg.7324




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

sqltable4-jpg.7330




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


scrollviewnlayouts-jpg.7398




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

scrollviewmultiselect1-jpg.7506
scrollviewmultiselect2-jpg.7507




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.

scrollviewbigpanel1-jpg.7751
scrollviewbigpanel2-jpg.7752





TabHost & ScrollViews

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

tabhostscrollview1-jpg.7668
tabhostscrollview2-jpg.7669




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.


sqlitedb1-jpg.7981
sqlitedb3-jpg.7983




GPS Example program

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

gps_3-jpg.9688




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.

expandablelv-png.10855
 
Last edited:

klaus

Expert
Licensed User
Longtime User
I don't remember having seen this one.
I'm afraid that you need to do it yourself.
If I understand correctly you want to modify the ScrollView when you click on a title to expand or collapse the subject.
Not sure if this could be done with CustomListView or UltimateListView.
 

LucaMs

Expert
Licensed User
Longtime User
I don't remember having seen this one.
I'm afraid that you need to do it yourself.
If I understand correctly you want to modify the ScrollView when you click on a title to expand or collapse the subject.
Not sure if this could be done with CustomListView or UltimateListView.


I've probably seen it elsewhere, is common.

Yes, you've got it right.

The links, however, refer to ListViews.

I mean a scrollview, with expandability and, within each panel, the possibility to insert whatever!

Useful, no?


We can probably use CheckList as basis
 

microbox

Active Member
Licensed User
Longtime User
Hello...thank you for this tutorial. But I have a question, I'm learning from this code
B4X:
 Sub btnAdd_Click
       If i < 4 Then
        Dim imvImage As ImageView                                                                           
        Dim bmpImage As Bitmap
        bmpImage.Initialize(File.DirAssets,"Image"&i&".jpg")
'        bmpImage.Initialize(File.DirInternal,"Image"&i&".jpg")
'        bmpImage.Initialize(File.DirDefaultExternal,"Image"&i&".jpg")
        imvImage.Initialize("imvImage")
        imvImage.Gravity=Gravity.FILL
        imvImage.Tag=i
        imvImage.Bitmap=bmpImage
        scvImages.Panel.AddView(imvImage,lfmImage,i*(imgHeight+imgSpace),imgWidth,imgHeight)   
        scvImages.Panel.Height=(nbrImage+1)*(imgHeight+imgSpace)
        i = i+1
       End If
End Sub
When clicking the button, how can I make the latest image added stays on top of the scrollview?


Thanks in advance,
microbox
 

stari

Active Member
Licensed User
Longtime User
Hi,
very useful, klaus. I tested LongTextsimple. Ok, now i have question: what metod is the best, to move entire scroll view up or down ? So i can scroll text inside a sliding panel . Regards from SI.
 

nimavao

Member
Hello and thank you for your example I think they must be usefull ,but none of them is shown for me , in the other hand I cant download any of projects above ,I dont no why!!!
when I click on Link it dirves me to 503 service unavailable page
 

nimavao

Member
If I remember well, you need to be member of the forum.
And if remember well, to become a member you need to make donation.
sorry ? I didn't know this rule which member have to make donate for asking question in forum, thank you for remembering this rule to me.
 
Top