Android Tutorial ScrollView examples summary

klaus · Mar 27, 2011

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

Gridline in TableView using Scrollview

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

Rearrange ListView lines post #3
Despite the title, it is a ScrollView

List with two columns and a checkbox

ScrollView example Image ScrollView

add imageview half manually Another image ScrollView

The same as above but with a Label below each image

Another ScrollView example

Multiple table example post #4

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

Display Long text simple.

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

Display Long texts.

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

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

The texts are those from the FastFourierTransform Library Demo program.

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

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

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

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.

TabHost & ScrollViews

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

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.

GPS Example program

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

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.

mrussell014 · Feb 2, 2013

database save after creation

Hi Erel,

Not sure how to start a new thread thay will post in the correct place. All my code works. Just can't find my database at the close of the app. I want to reopen the database that was updated. Does everyone in B4A distroy their database when they close there app. I was hoping someone would have done this and show me what I am going to figure. I have people waiting to see this program so they will have to continue to wait.

Thanks all,

Mike

Erel · Feb 3, 2013

This thread is about ScrollView examples. You should go to the Updates & Questions sub-forum (first one) and press on the New Thread button.

sulsys · Mar 6, 2013

Thank you

Nice compilation and saved me a lot of time. :sign0087:

racerrouthe · Apr 2, 2013

Thanks

Great overview, Thanks

GMan · Apr 9, 2013

As i am rather new in B4A i have some pricipal problems with understanding some things.

After some days of working with B4A i have a test app, which makes all things i will be tested.

Most of them works, but now i tried since hours to make a scrollable list with text AND pictures in a TabHost - but can't work it out.
The TabHost works, the different views etc. are loaded and so, this is good.

Searched through MB of examples, but no one semmes to be fitting to my belonging,to make this text pictures scrollable - so that i could use it as a base for the own development.

Is there a (best) simple command for that or has anyone a function, that woul d work ?

Thx in advance

Erel · Apr 10, 2013

I recommend you to use CustomListView class. You can create items with any layout you need.

GMan · Apr 10, 2013

Thx...this will help a little bit, but still cant put text and pics.

I ask in the thread of the CustomListView-part to solve that...

Erel · Apr 11, 2013

There seems to be several CustomListView threads. Make sure that you are using this one:
[Class] CustomListView - A flexible list based on ScrollView

luke2012 · Jun 14, 2013

Hi to all,
for the imageview with label there is a sample file ?

klaus · Jun 14, 2013

Did you have a look at the first post ?
What about the seventh example ?

Best regards.

surfer · Jul 12, 2013

Klaus. In the demo Tabhost & Scrollview the last visible blue line has text “Text1 line # 14” but must be “Text1 line # 15”. Similarly the last visible red line has text “Text2 line # 19” but must be “Text2 line # 20”. So we cannot see all rows. How to repair this?

klaus · Jul 13, 2013

You are right !
The end of the filling routines should be :

B4X:

Next
scvTest1.Panel.Height = i * lblHeight1

instead of:

B4X:

    scvTest1.Panel.Height = i1 * lblHeight1
Next

Same for scvTest2.

Updated the program in the original post here.

Best regards.

surfer · Jul 13, 2013

Thank you. It works fine.

mitsusdev · Sep 17, 2013

i am trying to use the use scroolview with design tools

but I do not understand how to draw the interface.

I have a group of buttons and labels and want to be sure you can see everything in the various video resolutions.

thanks

klaus · Sep 17, 2013

You have different possibilities, the two below and any combination:

- add all views in the code
add the ScrollView onto the Activity
add all the views onto the ScrollView.Panel
set the ScrollView.Panel.Height

- define one layout with the ScrollView and a second layout with a Panel containing the different views, this Panel can be heigher than the ScrollView.
load the ScrollView layout onto the Activity
load the Panel layout onto the ScrollView.Panel
set the ScrollView.Panel.Height to the Panel.Height

Best regards.

StarinschiAndrei · Oct 7, 2013

Can anybody tell me how can i center my listview in tabhost ? or how can i determinate the tab bottom value and tabhost bottom value ?
here is my code :

Sub Activity_Create(FirstTime As Boolean)
'Do not forget to load the layout file created with the visual designer. For example:
'Activity.LoadLayout("Layout1")
Dim pet,paper,cfg,tv,other As Bitmap

pet=LoadBitmap(File.DirAssets, "pet.png")
paper=LoadBitmap(File.DirAssets,"paper.png")
tv=LoadBitmap(File.DirAssets,"tv.png")
cfg =LoadBitmap(File.DirAssets,"config.png" )
other=LoadBitmap(File.DirAssets,"other.png" )

Activity.LoadLayout("Main")

Activity.AddMenuItem2("Settings","Settings",cfg)
Activity.AddMenuItem("Disconnect", "mnuDisconnect")
tabArticles.AddTabWithIcon("Pet",pet,pet,"articlelist")

lv1.Initialize("ListView1")
For i = 1 To 300
lv1.AddSingleLine("Item #" & i)
Next
Activity.AddView(lv1, 20%x ,0, 100%x, 30%y)

tabArticles.AddTabWithIcon("Hartie",paper,paper,"articlelist")
tabArticles.AddTabWithIcon("Electronice",tv,tv,"articlelist")
tabArticles.AddTabWithIcon("Altele",other,other,"articlelist")

End Sub

There is any possibility to populate each tab in tabhost with labels or images ?
Thank you

Erel · Oct 8, 2013

Please start a new thread for this question.

GMan · Feb 27, 2014

Is it possible to get the scrolled percentage or position of the ScrollView ?
I want to make a tab(1) of a tabhost only then visible if the scrollview of the previous tab(0) is scrolled to 100% (maybe 95%)

GMan · Feb 27, 2014

SOLVED

I "found" the ScrollChanged-Event

B4X:

Sub InfosSV_ScrollChanged (Position As Int)
If InfosSV.ScrollPosition  > 6050 Then
    Msgbox("Reached","6050")
End If
End Sub

But how to disable/enable a single TabHost.Tab ?
I start a new question

LucaMs · Jul 31, 2014

Thus, we still do not have a ScrollView like this (more beautiful ):

I ask this because maybe I've seen it in some post. (?)

Or should I develop it?

ehm... I don't Know

Android Tutorial ScrollView examples summary

Member

B4X founder

Member

Member

Well-Known Member

B4X founder

Well-Known Member

B4X founder

Well-Known Member

Expert

Member

Expert

Member

Member

Attachments

Expert

Active Member

Attachments

B4X founder

Well-Known Member

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency