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.

Erel · Oct 12, 2011

ListView reuses the same views to show the list items. Therefore it can show endless lists.
ScrollView doesn't reuse views. It just scrolls the large inner panel.

With that said, you can easily create a ScrollView with several thousands of items.

klaus · Oct 12, 2011

Another difference between ListView and ScrollView is that ListView has a FastScroll property but ScrollView doesn't.

Best regards.

Cableguy · Nov 18, 2011

Animating Text on a Scrollview

Hi Klaus...

Been going through your tutorials...always helpfull...

I am playing with a ScrollView wich only "child" is a label...
This label text is "animated" through a Timer, in wich Tick event, the Text is incremented by one character, thus resulting a "Left-to-Right Rolling" effect...
This is no problem, but I also wanted to be able to change the Text String and have the Labels Height and ScrollView Panel's Height automatically changed as the text was rolling...

This is my sub as it is...

B4X:

Sub TextAnim_Tick
   'Animação de texto
   If Label1.Text.Length <> ScrollText.Length Then
      Label1.Text = ScrollText.SubString2(0,Label1.Text.Length+1)
      DoEvents
      Height = Reflect.RunMethod("getHeight")
      DoEvents
      ScrollView1.Panel.Height = Label1.Top + Height + 10dip
      Label1.Height = Label1.Top + Height
      DoEvents
      If ScrollView1.Panel.Width=ScrollView1.Width OR ScrollView1.Panel.Width=-1 Then
         ScrollView1.Panel.Width=ScrollView1.Width-1
      Else
         ScrollView1.Panel.Width=ScrollView1.Width
      End If
   Else
      TextAnim.Enabled=False
      Label1.Enabled = True
   End If
End Sub

Target is Label1

The panel seems to indeed resize, but not to the entire string height, and the label seems to just not get the complete document, as it "ends" one or two lines below the visible portion of the ScrollView's Panel..

Were am I going wrong??

klaus · Nov 19, 2011

Hi Paulo,
Your code seems to be OK.
Could you post your project, I will have a look at it.
To remember what I had done, I looked at the HelpScrollView example and found an error in it, have updated it.

Best regards.

Cableguy · Nov 19, 2011

Hi Klaus...

Here's the current Zip file...

Hope it is clear to you...

Cableguy · Nov 19, 2011

Hi Klaus...once more...:sign0161:

I've updated my sub according to your updated example and it works great...

I have one request : Is it possible to make the "newly writen" text always visible? That is to say, how can I adjust scrollview scroll position acordint to the "last writen line"....??? I think I just answered the how...but i can't get to put it into code... HELP!?

EDIT :

Just answering my own question....got it to work...
This is the complete new sub:

B4X:

Sub TextAnim_Tick
   'Animação de texto
   If Label1.Text.Length <> TextLenght Then
      Label1.Text = ScrollText.SubString2(0,Label1.Text.Length+1)
      DoEvents      ' needed to update the value
      Height = StrUtils.MeasureMultilineTextHeight(Label1, Label1.Text)
   DoEvents      ' needed to update the value
   ScrollView1.Panel.Height = Label1.Top + Height + 10dip
   Label1.Height = Label1.Top + Height
   'Log(Height & "/" & StrUtils.MeasureMultilineTextHeight(lblHelp3, txt3))
   
   ' needed to update the height
   If ScrollView1.Panel.Width = ScrollView1.Width OR ScrollView1.Panel.Width = -1 Then
      ScrollView1.Panel.Width = ScrollView1.Width - 1
   Else
      ScrollView1.Panel.Width=ScrollView1.Width 
   End If
   ScrollView1.ScrollPosition = Height 'updates the scroll position to make the last text visibe
   Else
      TextAnim.Enabled = False
      Label1.Enabled = True
   End If
End Sub

klaus · Nov 20, 2011

Hi Paulo,
I'd suggest you following code:

B4X:

Sub TextAnim_Tick
    Dim txt As String
    
    'Animação de texto
    If Label1.Text.Length <> TextLenght Then
    
        txt = ScrollText.SubString2(0, Label1.Text.Length + 1)
        Height = StrUtils.MeasureMultilineTextHeight(Label1, txt)
        Label1.Height = Height
        Label1.Text = txt
        ScrollView1.Panel.Height = Height + 10dip
        ScrollView1.ScrollPosition = Height - ScrollView1.Height

        If ScrollView1.Panel.Width=ScrollView1.Width OR ScrollView1.Panel.Width=-1 Then
            ScrollView1.Panel.Width=ScrollView1.Width-1
        Else
            ScrollView1.Panel.Width=ScrollView1.Width
        End If
    Else
        TextAnim.Enabled = False
        Label1.Enabled = True
    End If
End Sub

In the attached zip file I added a line, in Activity_Create, to adjust the height of ScrollView1 to the screen height.
With a 320 / 480 screen ScrollView1 is too high.
I needed to comment the line with the TypeFace and added a text file, because those weren't in your zip file.

Best regards.

Cableguy · Nov 20, 2011

Thanks for the time and the response, Klaus...

Has you can see, I have managed to achieve my goal, and my code is very similar to yours...

Thanks again !!!

ChrShe · Nov 29, 2011

Would there happen to be any examples for building a scrollview similar to the one used for the photo gallery? (See attached)

askez · Dec 27, 2011

FFT Demo

hi,
i've implemented the FFT Demo and it works fine
i have one problem- every time my phone's screen shut down (15/30 sec) when i bring it back all the text goes down one line i've installled the example and it happens there too.
any solution?
thanx!

klaus · Dec 27, 2011

The program you are speeking of is the HelpScrollView example and not the FFT Demo that is part of the FFT library.
The HelpScrollView program is 'only' the help part of the FFT Demo program and uses its help files.

In the HelpScrollView program just remove
line 52 lblHelp1.Top = lblHelp2.Top

Best regards.

askez · Dec 27, 2011

thanx!

cbal03 · Jan 1, 2012

Very nice examples. Thank you so much!

miguelconde · Mar 4, 2012

Hi Erel, guys.
About the removeview. It remove all the childs from the object removed?. I give you more detail about my case. I have a scrollview whit a horizontalscroolview like it child, in the horizontalscrollview i added a panel and finally two views at this panel, graphically something like this. scrollview-horzontalview-panel-2 view(chkbox and lable).When I removed the panel its children (label and chekbox) were not removed, I had to remove the children and then you can remove the panel, i solved the problem whit this algorithm. I hope I explained well.

horizontalview = ScrollView1.Panel.GetView(0)
For ic =horizontalview.Panel.NumberOfViews -1 To 0 Step -1
'remove the child
panel = horizontalview.Panel.GetView(0)
For ic2 = panel.NumberOfViews -1 To 0 Step -1
panel.GetView(0).RemoveView
Next
'then i can removed the panel inside the horizontalview
horizontalview.panel.GetView(0).RemoveView
Next

if i remove only the panel inside horizontalview whit this: horizontalview.panel.GetView(0).RemoveView
the children remain initialized, This code dont worked fine.

I hope understand my english

horizontalpanel = ScrollView1.Panel.GetView(0)
For ic = horizontalpanel.Panel.NumberOfViews -1 To 0 Step -1
'Dont removeed the child
horizontalpanel.panel.GetView(0).RemoveView
Next

miguelconde · Mar 4, 2012

Hi Erel, guys.
About the removeview. It remove all the childs from the object removed?. I give you more detail about my case. I have a scrollview whit a horizontalscroolview like it child, in the horizontalscrollview i added a panel and finally two views at this panel, graphically something like this. scrollview-horzontalview-panel-2 view(chkbox and lable).When I removed the panel its children (label and chekbox) were not removed, I had to remove the children and then you can remove the panel, i solved the problem whit this algorithm. I hope I explained well.

horizontalview = ScrollView1.Panel.GetView(0)
For ic =horizontalview.Panel.NumberOfViews -1 To 0 Step -1
'remove the child
panel = horizontalview.Panel.GetView(0)
For ic2 = panel.NumberOfViews -1 To 0 Step -1
panel.GetView(0).RemoveView
Next
'then i can removed the panel inside the horizontalview
horizontalview.panel.GetView(0).RemoveView
Next

if i remove only the panel inside horizontalview whit this: horizontalview.panel.GetView(0).RemoveView
the children remain initialized, This code dont worked fine.

I hope understand my english

horizontalpanel = ScrollView1.Panel.GetView(0)
For ic = horizontalpanel.Panel.NumberOfViews -1 To 0 Step -1
'Dont removeed the child
horizontalpanel.panel.GetView(0).RemoveView
Next

klaus · Mar 4, 2012

There is no need to post two times the same post.
How do you add the different views and where.
It would be much easier to help you if you posted your project as a zip file.

Try this code:

B4X:

For i = ScrollView1.Panel.NumberOfViews -1 To 0 Step -1
  ScrollView1.Panel.RemoveViewAt(i)
Next

Best regards.

madSac · Jan 30, 2013

thank you ...you saved my time.....

mrussell014 · Jan 31, 2013

Cant find answers to database issue

:BangHead: I have read almost all the scrollview information. I have searched this site but found nothing for my delema. Doesn't mean it is not there, I just dont recognize it.

I used scrollview and other app's code to create an app that currently does what I want it to do. The final fronteer is to have the database after the the app closes. This is neccessary because the table is updated usually during each run, plus my initial file is 250,000 records.

My problem is I cant find the files so I can copy them to a safe place. I can find my csv file that is safe in the assets folder but that is all. I expect to run this app on all androids so I need a generic code to save my updates for further use.

Thank you for reading, Any help is apreciated.

Thanks,
Mike

Erel · Jan 31, 2013

Please start a new thread for this question.

The final fronteer is to have the database after the the app closes. This is neccessary because the table is updated usually during each run, plus my initial file is 250,000 records.

Also clarify what exactly are you trying to accomplish.

KMatle · Feb 1, 2013

Well done

As I am new to b4a it WAS complicated to find exact that sample which I need for my App. Now it's easy :sign0142:

Android Tutorial ScrollView examples summary

B4X founder

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Member

Attachments

Member

Expert

Member

Member

Member

Member

Expert

Active Member

Member

B4X founder

Expert

Privacy & Transparency

Privacy & Transparency