Showing tabular data is a standard requirement in a lot of applications. The best way is to use a TableLayout, which will automatically arrange the inner Views into columns across multiple TableRows. If you have complex requirements in which some rows may have different layouts, then its best not to use the TableLayout as it doesnt handle varying column counts very well.
In the sample application, we have a table which shows invoices. We have created classes for generating the invoice listing. In a real world case, this data would come from database. Here we populate the list with dummy data.
The TableLayout is wrapped in a ScrollView so that we can scroll the table up and down when the rows overflow the screen height.
The core logic of generating the table is in the loadData() function. A single loop iterates through the invoice data and creates columns and rows to fill up the table. The first row is for the heading, so the loop runs from -1 instead of zero. The UI display of the header columns is slightly different than the data columns, which is why there is a check before creating the View for each column.
For the Customer column we are using a LinearLayout comprising of two TextViews – one for the customer name and the second for the customer address. An alternative way would have been to do just use a single TextView and assign it both the name and addresses, separate by a newline character “\r\n”. In this case, however, we wanted the address to look different than the name, so its better to use a different View for the address.
For each TableRow that is created, we add a click listener, so that you can detect when a column within a row has been tapped.
We use another TableRow to act as a separator between two data TableRows. Note the use of the span property. We set it to the number of columns in the data TableRow as there is only one column being added to the separator TableRow.
19 Comments
your is awesome. can we filter by selecting from date and to date!!!
@vinod. Sorting can be done in the array using a CustomComparator class.
But in a real world case, the data will come from a database, so sorting should happen at the database level.
You can add swipe gesture detection to the table for upswipe and downswipe. You have to first add UIScrollViewDelegate declaration to the ViewController,
Example code:
let upSwipe = UISwipeGestureRecognizer(target: self, action: Selector(“swipeUp:”))
let downSwipe = UISwipeGestureRecognizer(target: self, action: Selector(“swipeDown:”))
Hi @vinod, if you want to show your data inside a table and make it sortable for the user have a look at the [SortableTableView](https://github.com/ISchwarz23).
Your code will look like this:
List flights = new ArrayList();
myData.add(new Flight(…));
myData.add(new Flight(…));
myData.add(new Flight(…));
Thank you very much Amit! I am a 70 years “old boy” former Cobol programmer, just approaching Java and Android programming, to spend some of Covid19 tyme…
Your work is the best i’ve seen up to now, looking for info into the web. The only thing i do not clearly undestand is how to specify the number of columns in a row; i would like to have only one column, to show every textview to a new line. I can obtain it whith \n\r new line separator but i think there is a better way of doing it and you surely know it!
Ciao e Grazie 1000!
Claudio
(sorry for “maccheroni” english…
@Claudio Thanks for the kind words. I learnt Cobol in the early 90s. Did a couple of small projects in it, but never really worked much in it. I understand its still a valuable skillset to have, but its very hard to get experienced programmers in that language.
To reply to your question, the number of columns in a table will always be the row with the max columns. In other words in the sample above, if you just add Customer field to the TableRowLayout and nothing else then it will have only one column.
your is awesome. can we filter by selecting from date and to date!!!
@vinod. Sorting can be done in the array using a CustomComparator class.
But in a real world case, the data will come from a database, so sorting should happen at the database level.
Its awesome.
Thanks for sharing this tutorial.
Can I implement swipe refresh in this tutorial?
Thanks
@Umar Fadil,
You can add swipe gesture detection to the table for upswipe and downswipe. You have to first add UIScrollViewDelegate declaration to the ViewController,
Example code:
let upSwipe = UISwipeGestureRecognizer(target: self, action: Selector(“swipeUp:”))
let downSwipe = UISwipeGestureRecognizer(target: self, action: Selector(“swipeDown:”))
upSwipe.direction = .Up
downSwipe.direction = .Down
tableView.addGestureRecognizer(upSwipe)
tableView.addGestureRecognizer(downSwipe)
To detect the swipe, you hook the
scrollViewDidScroll(scrollView: UIScrollView!) { }
function.
Hi @vinod, if you want to show your data inside a table and make it sortable for the user have a look at the [SortableTableView](https://github.com/ISchwarz23).
Your code will look like this:
List flights = new ArrayList();
myData.add(new Flight(…));
myData.add(new Flight(…));
myData.add(new Flight(…));
TableView table = findViewById(R.id.table);
table.setHeaderAdapter(new SimpleHeaderAdapter(“Time”, “Airline”, “Flight”, “Destination”));
table.setDataAdapter(new FlightDataAdapter(flights));
The result could look like this:
Best regards
what is the value of the previous table row in a dynamic added table?
Hi,
I had a set of array list data, how can I implement in above code.
Hi,
I had a set of array list data, how can I implement in above code.
Thanks
IS there any video tutorial available??
Thanks for the explanation
If user changes a cell data, how can we dynamically update in database and then show it ui later.
Will this work ,as Fragment table can on accessed in main activty
Thank you very much Amit!
It worked amazingly in the first touch.
Have a good time!
Thank you very much Amit! I am a 70 years “old boy” former Cobol programmer, just approaching Java and Android programming, to spend some of Covid19 tyme…
Your work is the best i’ve seen up to now, looking for info into the web. The only thing i do not clearly undestand is how to specify the number of columns in a row; i would like to have only one column, to show every textview to a new line. I can obtain it whith \n\r new line separator but i think there is a better way of doing it and you surely know it!
Ciao e Grazie 1000!
Claudio
(sorry for “maccheroni” english…
@Claudio Thanks for the kind words. I learnt Cobol in the early 90s. Did a couple of small projects in it, but never really worked much in it. I understand its still a valuable skillset to have, but its very hard to get experienced programmers in that language.
To reply to your question, the number of columns in a table will always be the row with the max columns. In other words in the sample above, if you just add Customer field to the TableRowLayout and nothing else then it will have only one column.
Ciao Amit, thank you for you kind answer. I will think about and try what you told me and i’ll come back!
Got it!
Thankyou again Amit, and all the best!
Claudio
@Claudio Awesome.
Thanks Amit really nice tutorial