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,710
  • TableExample1.1.zip
    12.2 KB · Views: 7,078
Click to expand...
Y

ykucuk

Well-Known Member
Licensed User
Longtime User
Thank you but this dont works, same error message
 
Last edited:
Y

ykucuk

Well-Known Member
Licensed User
Longtime User
I try it this way and that works for me


B4X: 
Sub GetView(Row As Int, Col As Int) As Label
    Dim l As Label
    l.Initialize("")
'    ScrollView1.Initialize(100%x)
    'add header
    SetHeader(Array As String("AccountID", "Forename", "Surname", "Phone"))

'    l = Table.GetView(Row * NumberOfColumns + Col)
    Return l
End Sub
 
klaus

klaus

Expert
Licensed User
Longtime User
Sorry, but I don't understand what you want to do ?
Why do you add SetHeader(ArrayAsString("AccountID", "Forename", "Surname", "Phone")) ?
The GetView routine should return the Label at the given row and column in the Table.
Your routine returns a Label which is not added to a parent view !
 
Y

ykucuk

Well-Known Member
Licensed User
Longtime User
i want to load all information from a database using webservice.
When i load my webservice, then i got a XML File and with the xml parser i search for the wanted information and load it in the scrollview.
You say you are from switzerland, can you speak german? my english isnt good
 
Y

ykucuk

Well-Known Member
Licensed User
Longtime User
When i click on a Row, how can i get the typed Information out of the Scrollview?
i want to fill Edittext with the Information
 
S

syerif

Active Member
Licensed User
Longtime User
Hi, I found a problem with clicking events, when using two tables with different data in one activity. the selected row always shows the first table when I click the row in the second table.
This my code:

B4X: 
'Declare
'========================================= Table1 ======================================
    Dim SV As ScrollView
    Dim Header As Panel
    Dim Table As Panel
    Dim NumberOfColumns, RowHeight, ColumnWidth As Int
    Dim HeaderColor, TableColor, FontColor, HeaderFontColor As Int
    Dim FontSize As Float
    Type RowCol (Row As Int, Col As Int)
    Dim Alignment As Int
    Dim SelectedRow As Int
    Dim SelectedRowColor As Int
    
    'Table settings
    HeaderColor = Colors.RGB(222,170,87)
    NumberOfColumns = 4
    RowHeight = 40dip
    TableColor = Colors.White
    FontColor = Colors.Black
    HeaderFontColor = Colors.White
    FontSize = 14
    Alignment = Gravity.CENTER 'change to Gravity.LEFT or Gravity.RIGHT for other alignments.
    SelectedRowColor = Colors.LightGray
    
    
    '======================================================================================
        
    '========================================= Table2 ======================================
    Dim SV1 As ScrollView
    Dim Header1 As Panel
    Dim Table1 As Panel
    Dim NumberOfColumns1, RowHeight1, ColumnWidth1 As Int
    Dim HeaderColor1, TableColor1, FontColor1, HeaderFontColor1 As Int
    Dim FontSize1 As Float
    'Type RowCol (Row1 As Int, Col1 As Int)
    Dim Alignment1 As Int
    Dim SelectedRow1 As Int
    Dim SelectedRowColor1 As Int
    
    'Table settings
    HeaderColor1 = Colors.RGB(222,170,87)
    NumberOfColumns1 = 4
    RowHeight1 = 40dip
    TableColor1 = Colors.White
    FontColor1 = Colors.Black
    HeaderFontColor1 = Colors.White
    FontSize1 = 14
    Alignment1 = Gravity.CENTER 'change to Gravity.LEFT or Gravity.RIGHT for other alignments.
    SelectedRowColor1 = Colors.LightGray
    
    
    '======================================================================================


' Setting

    '============================== Table1 ==================================
    SV.Initialize(0)
    Table = SV.Panel
    Table.Color = TableColor
    Panel2.AddView(SV, 5%x,8%y, 90%x, 120dip)
    ColumnWidth = SV.Width / NumberOfColumns
    SelectedRow = -1
    'add header
    SetHeader(Array As String("STD", "AD", "CO", "QRC"))
    'Sleep(200)
    '=======================================================================
    
    '============================== Table2 ==================================
    SV1.Initialize(0)
    Table1 = SV1.Panel
    Table1.Color = TableColor1
    Panel3.AddView(SV1, 5%x,8%y, 90%x, 120dip)
    ColumnWidth1 = SV1.Width / NumberOfColumns
    SelectedRow1 = -1
    'add header
    SetHeader1(Array As String("STD", "AD", "CO", "QRC"))
    'Sleep(200)
    '=======================================================================

'properties

Sub Cell_Click
    Dim rc As RowCol
    Dim l As Label
    l = Sender
    rc = l.Tag
    SelectRow(rc.Row)
    '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
Sub Header_Click1
    Dim l As Label
    Dim col1 As Int
    l = Sender
    col1 = l.Tag
    'Activity.Title = "Header clicked: " & col
End Sub
Sub SelectRow(Row As Int)
    'remove the color of previously selected row
    If SelectedRow > -1 Then
        For col = 0 To NumberOfColumns - 1
            GetView(SelectedRow, col).Color = Colors.Transparent
        Next
    End If
    SelectedRow = Row
    For col = 0 To NumberOfColumns - 1
        GetView(Row, col).Color = SelectedRowColor
    Next
End Sub
Sub SelectRow1(Row As Int)
    'remove the color of previously selected row
    If SelectedRow1 > -1 Then
        For col1 = 0 To NumberOfColumns1 - 1
            GetView1(SelectedRow1, col1).Color = Colors.Transparent
        Next
    End If
    SelectedRow1 = Row
    For col1 = 0 To NumberOfColumns1 - 1
        GetView1(Row, col1).Color = SelectedRowColor1
    Next
End Sub
Sub GetView(Row As Int, Col As Int) As Label
    Dim l As Label
    l = Table.GetView(Row * NumberOfColumns + Col)
    Return l
End Sub
Sub GetView1(Row As Int, Col As Int) As Label
    Dim l1 As Label
    l1 = Table1.GetView(Row * NumberOfColumns1 + Col)
    Return l1
End Sub
Sub AddRow(Values() As String)
    'Table.RemoveAllViews
    If Values.Length <> NumberOfColumns Then
        Log("Wrong number of values.")
        Return
    End If
    Dim lastRow As Int
    lastRow = NumberOfRows
    For i = 0 To NumberOfColumns - 1
        Dim l As Label
        l.Initialize("cell")
        l.Text = Values(i)
        l.Gravity = Alignment
        l.TextSize = FontSize
        l.TextColor = FontColor
        Dim rc As RowCol
        rc.Initialize
        rc.Col = i
        rc.Row = lastRow
        l.Tag = rc
        Table.AddView(l, ColumnWidth * i, RowHeight * lastRow, ColumnWidth, RowHeight)
    Next
    Table.Height = NumberOfRows * RowHeight
End Sub

Sub AddRow1(Values() As String)
    'Table.RemoveAllViews
    If Values.Length <> NumberOfColumns1 Then
        Log("Wrong number of values.")
        Return
    End If
    Dim lastRow1 As Int
    lastRow1 = NumberOfRows1
    For i = 0 To NumberOfColumns1 - 1
        Dim l1 As Label
        l1.Initialize("cell")
        l1.Text = Values(i)
        l1.Gravity = Alignment1
        l1.TextSize = FontSize1
        l1.TextColor = FontColor1
        Dim rc As RowCol
        rc.Initialize
        rc.Col = i
        rc.Row = lastRow1
        l1.Tag = rc
        Table1.AddView(l1, ColumnWidth1 * i, RowHeight1 * lastRow1, ColumnWidth1, RowHeight1)
    Next
    Table1.Height = NumberOfRows * RowHeight
End Sub

Sub SetHeader(Values() As String)
    If Header.IsInitialized Then Return 'should only be called once
    Header.Initialize("")
    For i = 0 To NumberOfColumns - 1
        Dim l As Label
        l.Initialize("header")
        l.Text = Values(i)
        l.Gravity = Gravity.CENTER
        l.TextSize = FontSize
        l.Color = HeaderColor
        l.TextColor = HeaderFontColor
        l.Tag = i
        Header.AddView(l, ColumnWidth * i, 0, ColumnWidth, RowHeight)
    Next
    Panel2.AddView(Header, SV.Left, SV.Top - RowHeight, SV.Width, RowHeight)
End Sub
Sub SetHeader1(Values() As String)
    If Header1.IsInitialized Then Return 'should only be called once
    Header1.Initialize("")
    For i = 0 To NumberOfColumns1 - 1
        Dim l As Label
        l.Initialize("header1")
        l.Text = Values(i)
        l.Gravity = Gravity.CENTER
        l.TextSize = FontSize1
        l.Color = HeaderColor1
        l.TextColor = HeaderFontColor1
        l.Tag = i
        Header1.AddView(l, ColumnWidth1 * i, 0, ColumnWidth1, RowHeight1)
    Next
    Panel3.AddView(Header1, SV1.Left, SV1.Top - RowHeight1, SV1.Width, RowHeight1)
End Sub
Sub NumberOfRows As Int
    Return Table.NumberOfViews / NumberOfColumns
End Sub
Sub NumberOfRows1 As Int
    Return Table1.NumberOfViews / NumberOfColumns1
End Sub
Sub SetCell(Row As Int, Col As Int, Value As String)
    GetView(Row, Col).Text = Value
End Sub
Sub GetCell(Row As Int, Col As Int) As String
    Return GetView(Row, Col).Text
End Sub
Sub ClearAll
    For i = Table.NumberOfViews -1 To 0 Step -1
        Table.RemoveViewAt(i)
    Next
    Table.Height = 0
    SelectedRow = -1
End Sub

Sub ClearAll1
    For i = Table1.NumberOfViews -1 To 0 Step -1
        Table1.RemoveViewAt(i)
    Next
    Table1.Height = 0
    SelectedRow1 = -1
End Sub

Any suggestion?
WhatsApp Image 2019-06-18 at 9.59.37 AM.jpeg WhatsApp Image 2019-06-18 at 9.59.37 AM.jpeg
WhatsApp Image 2019-06-18 at 9.59.37 AM.jpeg
 
S

syerif

Active Member
Licensed User
Longtime User
[CASE CLOSE]


Hi Klaus, Thanks for the response, I have found the problem, which is when the initialization label on Scrollview.

syerif said:
Hi, I found a problem with clicking events, when using two tables with different data in one activity. the selected row always shows the first table when I click the row in the second table.
This my code:

B4X: 
'Declare
'========================================= Table1 ======================================
    Dim SV As ScrollView
    Dim Header As Panel
    Dim Table As Panel
    Dim NumberOfColumns, RowHeight, ColumnWidth As Int
    Dim HeaderColor, TableColor, FontColor, HeaderFontColor As Int
    Dim FontSize As Float
    Type RowCol (Row As Int, Col As Int)
    Dim Alignment As Int
    Dim SelectedRow As Int
    Dim SelectedRowColor As Int
   
    'Table settings
    HeaderColor = Colors.RGB(222,170,87)
    NumberOfColumns = 4
    RowHeight = 40dip
    TableColor = Colors.White
    FontColor = Colors.Black
    HeaderFontColor = Colors.White
    FontSize = 14
    Alignment = Gravity.CENTER 'change to Gravity.LEFT or Gravity.RIGHT for other alignments.
    SelectedRowColor = Colors.LightGray
   
   
    '======================================================================================
       
    '========================================= Table2 ======================================
    Dim SV1 As ScrollView
    Dim Header1 As Panel
    Dim Table1 As Panel
    Dim NumberOfColumns1, RowHeight1, ColumnWidth1 As Int
    Dim HeaderColor1, TableColor1, FontColor1, HeaderFontColor1 As Int
    Dim FontSize1 As Float
    'Type RowCol (Row1 As Int, Col1 As Int)
    Dim Alignment1 As Int
    Dim SelectedRow1 As Int
    Dim SelectedRowColor1 As Int
   
    'Table settings
    HeaderColor1 = Colors.RGB(222,170,87)
    NumberOfColumns1 = 4
    RowHeight1 = 40dip
    TableColor1 = Colors.White
    FontColor1 = Colors.Black
    HeaderFontColor1 = Colors.White
    FontSize1 = 14
    Alignment1 = Gravity.CENTER 'change to Gravity.LEFT or Gravity.RIGHT for other alignments.
    SelectedRowColor1 = Colors.LightGray
   
   
    '======================================================================================


' Setting

    '============================== Table1 ==================================
    SV.Initialize(0)
    Table = SV.Panel
    Table.Color = TableColor
    Panel2.AddView(SV, 5%x,8%y, 90%x, 120dip)
    ColumnWidth = SV.Width / NumberOfColumns
    SelectedRow = -1
    'add header
    SetHeader(Array As String("STD", "AD", "CO", "QRC"))
    'Sleep(200)
    '=======================================================================
   
    '============================== Table2 ==================================
    SV1.Initialize(0)
    Table1 = SV1.Panel
    Table1.Color = TableColor1
    Panel3.AddView(SV1, 5%x,8%y, 90%x, 120dip)
    ColumnWidth1 = SV1.Width / NumberOfColumns
    SelectedRow1 = -1
    'add header
    SetHeader1(Array As String("STD", "AD", "CO", "QRC"))
    'Sleep(200)
    '=======================================================================

'properties

Sub Cell_Click
    Dim rc As RowCol
    Dim l As Label
    l = Sender
    rc = l.Tag
    SelectRow(rc.Row)
    '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
Sub Header_Click1
    Dim l As Label
    Dim col1 As Int
    l = Sender
    col1 = l.Tag
    'Activity.Title = "Header clicked: " & col
End Sub
Sub SelectRow(Row As Int)
    'remove the color of previously selected row
    If SelectedRow > -1 Then
        For col = 0 To NumberOfColumns - 1
            GetView(SelectedRow, col).Color = Colors.Transparent
        Next
    End If
    SelectedRow = Row
    For col = 0 To NumberOfColumns - 1
        GetView(Row, col).Color = SelectedRowColor
    Next
End Sub
Sub SelectRow1(Row As Int)
    'remove the color of previously selected row
    If SelectedRow1 > -1 Then
        For col1 = 0 To NumberOfColumns1 - 1
            GetView1(SelectedRow1, col1).Color = Colors.Transparent
        Next
    End If
    SelectedRow1 = Row
    For col1 = 0 To NumberOfColumns1 - 1
        GetView1(Row, col1).Color = SelectedRowColor1
    Next
End Sub
Sub GetView(Row As Int, Col As Int) As Label
    Dim l As Label
    l = Table.GetView(Row * NumberOfColumns + Col)
    Return l
End Sub
Sub GetView1(Row As Int, Col As Int) As Label
    Dim l1 As Label
    l1 = Table1.GetView(Row * NumberOfColumns1 + Col)
    Return l1
End Sub
Sub AddRow(Values() As String)
    'Table.RemoveAllViews
    If Values.Length <> NumberOfColumns Then
        Log("Wrong number of values.")
        Return
    End If
    Dim lastRow As Int
    lastRow = NumberOfRows
    For i = 0 To NumberOfColumns - 1
        Dim l As Label
        l.Initialize("cell")
        l.Text = Values(i)
        l.Gravity = Alignment
        l.TextSize = FontSize
        l.TextColor = FontColor
        Dim rc As RowCol
        rc.Initialize
        rc.Col = i
        rc.Row = lastRow
        l.Tag = rc
        Table.AddView(l, ColumnWidth * i, RowHeight * lastRow, ColumnWidth, RowHeight)
    Next
    Table.Height = NumberOfRows * RowHeight
End Sub

Sub AddRow1(Values() As String)
    'Table.RemoveAllViews
    If Values.Length <> NumberOfColumns1 Then
        Log("Wrong number of values.")
        Return
    End If
    Dim lastRow1 As Int
    lastRow1 = NumberOfRows1
    For i = 0 To NumberOfColumns1 - 1
        Dim l1 As Label
        l1.Initialize("cell")
        l1.Text = Values(i)
        l1.Gravity = Alignment1
        l1.TextSize = FontSize1
        l1.TextColor = FontColor1
        Dim rc As RowCol
        rc.Initialize
        rc.Col = i
        rc.Row = lastRow1
        l1.Tag = rc
        Table1.AddView(l1, ColumnWidth1 * i, RowHeight1 * lastRow1, ColumnWidth1, RowHeight1)
    Next
    Table1.Height = NumberOfRows * RowHeight
End Sub

Sub SetHeader(Values() As String)
    If Header.IsInitialized Then Return 'should only be called once
    Header.Initialize("")
    For i = 0 To NumberOfColumns - 1
        Dim l As Label
        l.Initialize("header")
        l.Text = Values(i)
        l.Gravity = Gravity.CENTER
        l.TextSize = FontSize
        l.Color = HeaderColor
        l.TextColor = HeaderFontColor
        l.Tag = i
        Header.AddView(l, ColumnWidth * i, 0, ColumnWidth, RowHeight)
    Next
    Panel2.AddView(Header, SV.Left, SV.Top - RowHeight, SV.Width, RowHeight)
End Sub
Sub SetHeader1(Values() As String)
    If Header1.IsInitialized Then Return 'should only be called once
    Header1.Initialize("")
    For i = 0 To NumberOfColumns1 - 1
        Dim l As Label
        l.Initialize("header1")
        l.Text = Values(i)
        l.Gravity = Gravity.CENTER
        l.TextSize = FontSize1
        l.Color = HeaderColor1
        l.TextColor = HeaderFontColor1
        l.Tag = i
        Header1.AddView(l, ColumnWidth1 * i, 0, ColumnWidth1, RowHeight1)
    Next
    Panel3.AddView(Header1, SV1.Left, SV1.Top - RowHeight1, SV1.Width, RowHeight1)
End Sub
Sub NumberOfRows As Int
    Return Table.NumberOfViews / NumberOfColumns
End Sub
Sub NumberOfRows1 As Int
    Return Table1.NumberOfViews / NumberOfColumns1
End Sub
Sub SetCell(Row As Int, Col As Int, Value As String)
    GetView(Row, Col).Text = Value
End Sub
Sub GetCell(Row As Int, Col As Int) As String
    Return GetView(Row, Col).Text
End Sub
Sub ClearAll
    For i = Table.NumberOfViews -1 To 0 Step -1
        Table.RemoveViewAt(i)
    Next
    Table.Height = 0
    SelectedRow = -1
End Sub

Sub ClearAll1
    For i = Table1.NumberOfViews -1 To 0 Step -1
        Table1.RemoveViewAt(i)
    Next
    Table1.Height = 0
    SelectedRow1 = -1
End Sub

Any suggestion?
View attachment 81417 View attachment 81417 View attachment 81417
Click to expand...
 
Status
Not open for further replies.
Top