Android Tutorial Creating a table view based on ScrollView

A much improved version is available here.

You can use the code in this example to show data in tabular form.

The table is made of two main views. The header row is made of a panel with labels. The main cells component is made of a ScrollView with labels as the cells.

You can modify the code to change the table appearance.
Some of the settings can be changed in Sub Globals:

    'Table settings
    HeaderColor = Colors.Gray
    NumberOfColumns = 4
    RowHeight = 30dip
    TableColor = Colors.White
    FontColor = Colors.Black
    HeaderFontColor = Colors.White
    FontSize = 14

Adding data to the table:

    'add header
    SetHeader(Array As String("Col1", "Col2", "Col3", "Col4"))
    'add rows
    For i = 1 To 100
        AddRow(Array As String(i, "Some text", i * 2, "abc"))
    Next
    'set the value of a specific cell
    SetCell(0, 3, "New value")
    'get the value 
    Log("Cell (1, 2) value = " & GetCell(1, 2))

Table events:

Sub Cell_Click
    Dim rc As RowCol
    Dim l As Label
    l = Sender
    rc = l.Tag
    activity.Title = "Cell clicked: (" & rc.Row & ", " & rc.Col & ")"
End Sub
Sub Header_Click
    Dim l As Label
    Dim col As Int
    l = Sender
    col = l.Tag
    Activity.Title = "Header clicked: " & col
End Sub

The code is not too complicated and you can further customize it as needed.

 

[klaus]

The ScrollView has no horizontal scrolling.
But you can have a look at two examples:
- chapter 12.3.1 ScrollView example in the Beginner's Guide.
- SQLiteDB example

In both examples the ScrollView can be moved horizontaly.

Best regards.

 

[Bill Norris]

Can't Download Sample

Is it required to have purchased full version in order to download TableExample.zip??

 

[Erel]

The trial version doesn't support libraries. This example requires the StringUtils library.
Note that we offer full money back guarantee for 30 days. So if you like you can test the full version.

 

[rscott]

I've registered with the forum and am running the trial version of b4a at the moment. The forum won't let me download attachments though.

 

[Erel]

You can download v1.0 here: www.b4x.com/android/files/TableExample.zip

 

[nemethv]

Is it possible to extract cell information from Col0 when the user clicks on Col1?
As in I need the text in C0 when they click on C1. Then I'd need to change C1. (pretty much trying to do a 'favorites' script.
Thanks

 

[klaus]

Sure, in the Cell_Click routine you get the rc variable of the selected view.
rc.Row gives you the selected row.
GetCell(rc.Row, 0) returns the text ot the first cell 0 row rc.Row.

Best regards.

 

[nemethv]

Sure, in the Cell_Click routine you get the rc variable of the selected view.
rc.Row gives you the selected row.
GetCell(rc.Row, 0) returns the text ot the first cell 0 row rc.Row.

Best regards.

Thanks!

 

[nemethv]

New question! [your prev suggestion worked fine]
Still on the previous topic. So now I have a two-cols table, that is a scrollview. Instead of taking what's in the SQLite file, which is at the moment a "Yes"/"No" text, I'd like to use an image to indicate the state of the data. So if the label is "yes", then the second column for the relevant row should show an image, whereas if the label is "no", then it would show another image.
I had a look at the ImageView scripts but I'm not sure I understand them. Can I, and if so, how store and retrieve a PNG file as a BLOB in/from the SQL file and use cursor.getblob instead of cursor.getstring to do the task?
Thanks again

 

[Erel]

See this example: SQL tutorial

 

[nemethv]

See this example: SQL tutorial

Thanks, I've checked it, but it's unhappy about something.
I'll try to explain what's what. The beginning of the Sub is probably not relevant but I'm including it because it helps a bit better.
I have a Scrollview that is read from a local sqlite file and that file is originally not filled up for the IsFav column (it's empty.)

   ChosenDrinkName = "" 
   ScVList.Initialize(0)
   ScVList.Color = Colors.white
   
   Table = ScVList.Panel
   Table.Color = TableColor
   
   Activity.AddView(ScVList, 5%x, (ListItemsTopHeaderLabel.Height + ListItemsTopHeaderLabelLower.Height + (Searchbox.Height)*2), 90%x, 100%y)
   ColumnWidth(0) = 0.66 * ScVList.Width
   ColumnWidth(1) = 0.32 * ScVList.Width
   'ScVList.Background = Colors.White
   
   SelectedRow = -1
   Dim dir As String
   Dim Cursor As Cursor
   
   DrinksInDataBaseCount = SQL1.ExecQuerySingleResult("SELECT count(DISTINCT DrinkName) FROM drinkslist")
   Cursor = SQL1.ExecQuery("SELECT DISTINCT * FROM drinkslist ORDER BY DrinkName")
   
   
   SetHeader(Array As String("DRINK NAME", "FAVOURITE")) 'lists any drinks that are in the database. names are col0, isfav is col1
   'add rows
   For i = 0 To DrinksInDataBaseCount -1
      Cursor.Position = i
      
      'blob -- here comes your code! :)
      Dim InputStream1 As InputStream
      Dim OutputStream1 As OutputStream
      
      Dim Buffer() As Byte 'declares an empty array
       Buffer = Cursor.GetBlob("IsFav") 'this is because the original datafile doesnt contain information for whether they have fav'd things or not until the user actually does it. In other words this col is empty and this would fill it up in that case.
      If Buffer = Null Then 'not sure about Null
         InputStream1 = File.OpenInput(File.DirAssets, "btn_rating_star_off_normal.png")
          OutputStream1.InitializeToBytesArray(1000)
          File.Copy2(InputStream1, OutputStream1)
          Dim Buffer() As Byte 'declares an empty array
          Buffer = OutputStream1.ToBytesArray
       
          'write the image to the database
          SQL1.ExecNonQuery2("UPDATE drinkslist SET IsFav (?) WHERE DrinkName = "& QUOTE & Cursor.getstring2(0) & QUOTE, Array As Object(Buffer))
      End If
      
      'getblob
      
      Dim Cursor1 As Cursor
       Cursor1 = SQL1.ExecQuery2("SELECT isfav FROM drinkslist WHERE name = ?", Array As String(Cursor.getstring2(0))) 'this should hopefully work though i don't know as i can't get that far.
       
       Dim Buffer() As Byte 'declare an empty byte array
       Buffer = Cursor1.GetBlob("IsFav")
       Dim InputStream1 As InputStream
       InputStream1.InitializeFromBytesArray(Buffer, 0, Buffer.Length)
       
       Dim Bitmap1 As Bitmap
       Bitmap1.Initialize2(InputStream1)
       InputStream1.Close
      AddRow(Array As String(Cursor.getstring2(0),Cursor1.getblob("IsFav"))) 'this causes a java error saying something about the 0 after getstring2, however it used to work fine before and I don't think I changed any definitions related to that.
   Next
End Sub

Can you help out pls?

 

[Erel]

Please check the logs and post the exact error message.

 

[nemethv]

Please check the logs and post the exact error message.

Nothing in the logs, it's coming up during the compilation phase. See attch.

 

[Erel]

Cursor.GetBlob returns an array of bytes not a string. You cannot put it in an array of strings.

 

[nemethv]

Cursor.GetBlob returns an array of bytes not a string. You cannot put it in an array of strings.

So how do I then put that image into that cell of the table while the previous cell remains text?

 

[Erel]

I recommend you to use a class such as CustomListView. It will make it easier to edit existing items.

 

[nemethv]

I recommend you to use a class such as CustomListView. It will make it easier to edit existing items.

I only have 1.9.0, so no classes for me I'm afraid

 

[fdx12345]

Source of data for TableExample 2

There is a functioning example somewhere on this board of a TableExample populating two Tables from a CVS file. It looks like both Tables are populated with the same data from the same file. Can one populate the two Tables with different data from just one csv file or does each table need to be in its own file?

Same goes for storing a Table back to csv format. If we have two Tables with different data, can both be stored in one file or will it take two files using LoadCSV/SaveCSV methods?

 

[klaus]

You can populate each table from two different csv files.
I would suggest you to use the Table Class instead of the example you are refering to.

Best regards.

 

[biggiu]

Create Table

Sorry for my English.
I have a problem.
i want create e table in a specific panel.
Is possible?
Thank you