Android Tutorial Creating a table view based on ScrollView

Status
Not open for further replies.
A much improved version is available here.

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

table_1.png


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:
B4X:
    '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:
B4X:
    '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:
B4X:
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.
 

Attachments

  • TableExample.zip
    5.7 KB · Views: 6,693
  • TableExample1.1.zip
    12.2 KB · Views: 7,063

junaidahmed

Well-Known Member
Licensed User
Longtime User
Can not Clear Record in Table

This examples is fine but can not clear existing record when populating new record.pls advise
 

junaidahmed

Well-Known Member
Licensed User
Longtime User
Should not append Record when populate another dataset,So we need to clear (Delete) existing record before poupulating new dataset.
 

junaidahmed

Well-Known Member
Licensed User
Longtime User
I have seen the Tabular example using StringUtil library it works fine,if you update Gridline that will become an Grid like in Basic4PPC.so please try to update the Gridline method.Please revert back soon.
 

kickaha

Well-Known Member
Licensed User
Longtime User
When I tried this out and added some more data, the fullscroll (to the bottom) stopped one short of all the entries. Is this a bug or am I missing something?

All I did was add a button, the click event of which was
B4X:
Sub Button1_Click
AddRow(Array As String(number, "Some text", number * 2, "abc"))   
number=number+1
SV.FullScroll (True)
End Sub
 

klaus

Expert
Licensed User
Longtime User
I just tried it, it's only the scrolling.
It seems that the OS executes SV.FullScroll(True) before adjusting the Scrollview height.
Adding a DoEvents before SV.FullScroll(True) solves the problem.
B4X:
[FONT=Courier New][SIZE=2][COLOR=#0000ff]
[SIZE=2][FONT=Courier New][COLOR=#0000ff][SIZE=2][FONT=Courier New][COLOR=#0000ff]Sub [/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]btnAdd_Click[/SIZE][/FONT]
[SIZE=2][FONT=Courier New] AddRow([/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Array[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]String[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"Test"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"Some text"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"76.3"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"-23"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])) [/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff] DoEvents[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] SV.FullScroll([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]True[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]End Sub[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

I tried also adding SV.FullScroll(True) at the end of Sub LoadTableFromCSV, and it doesn't scroll at all.
Addign DoEvents before SV.FullScroll(True), it works well.

Best regards.
 

chrisf

New Member
Licensed User
Longtime User
Is it possible to have two lines of data per row?

I have a query against a database and need to display more details than I have room for on teh screen in the table view?

Thanks in advance
 

hzimmer3

Member
Licensed User
Longtime User
Table with scrollview with horizontal scrolling

I am new to Basic4Android and I have just studied the TableExample1.2 which is interesting for reading a csv-table.
However I wonder how I can get the scrollview table to scroll horizontally in case the csv-table is wider than the screen width.
I have set the list width to 200%x but I cannot find out how I can get the
scrollview to scroll horizontally.

Is there a property which I need to set?

Any advise would be much appreciated,

Helmut
Cologne/Germany
 

hzimmer3

Member
Licensed User
Longtime User
Table with scrollview with horizontal scrolling

I am new to Basic4Android and have just studied the TableExample1.2 which
I find very interesting for reading csv-tables.
However I wonder how I can arrange that the scrollview is able to scroll horizontally in case that the csv-table is wider than the screen width.

I have set the list width to 200%x but cannot find a way to enable horizontal scrolling in the list.

Is there a property which I need to set?

Any advise would be much appreciated,

Regards

Helmut
Cologne/Germany
 
Status
Not open for further replies.
Top