I am having a little bit of trouble making the table look like I intend to.
These are a few questions, but since they all refer to the picture below and the details I provide I thought they should all be in a single post.
Here is what I achieved so far:
The header row contains one element of type Button.
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT);
Button bt = new Button(getContext());
bt.setText("Column1");
mHeader.addView(bt, params);
mHeader.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
addView(mHeader);
The rest of the table is poulated like this:
(Messagerow extends TableRow and has a TextView member)
for(int i = 0; i < 100; i++) {
MessageRow mr = new MessageRow(getContext());
// stuff to set the TexView text and color
mr.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
this.addView(mr);
}
1. How can I make the header row height be more like the rows?
2. How can I make the button occupy the full width of the row?
If the table is empty, no text rows just header, then the button matches the row width. As soon as I add a row of text, the column width is adapted but the button width is not.
3. How can I make the row fill the screen width? (MATCH_PARENT does not do it)
4. How can I draw a thin line between the table rows?
I tried to override the onDraw() function on MessageRow, but it never gets called, not even once.
Don't get me wrong. I am not asking that you do my work for me. These are issues I tried to solve by myself and googled them and read similar posts, but did not find an answer.Note: I find that UI design in Javascript for Android lacks clear control and clear documentation over all these little details.
Edit
This is how I create the table:
TableLayout mTable = new TableLayout(this);
HorizontalScrollView hview = (HorizontalScrollView) findViewById(R.id.hscroll);
populate(mTable);
mTable.setLayoutParams(new TableLayout.LayoutParams( TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
mTable.setBackgroundColor(Color.WHITE);
hview.addView(mTable);
How can I make the header row height be more like the rows?
Using the default Button there isn't much to do. The Button uses a nine-patch image that has some space between the button's text and the borders that you see. You could use a smaller font but that you'll probably look ugly. Another thing to try is using your own background for the Button and get rid of the default extra space(of the default nine-patch image) so the final height is near the height of the text from the TextViews. Or try to enforce a standard height for all rows using a fixed value.
How can I make the button occupy the full width of the row?
I think that you have more then one TextView in MessageRow so when you add the Button it moves to the first column(corresponding to the first TextView). If this is the case, make your Button span across the number of columns representing the number of TextViews in MessageRow:
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT);
params.span = 3; // if you have 3 `TextView` in the MessageRow
Button bt = new Button(getContext());
bt.setText("Column1");
mHeader.addView(bt, params);
If this is not the case add more details.
How can I make the row fill the screen width? (MATCH_PARENT does not do it)
As I said on one of your previous questions, I don't know why that happens(but I gave you some solutions there to overcome this issue). Also:
mHeader and the other MessageRow are children of a Tablelayout and the correct LayoutParams to use on them is the LayoutParams of the parent: TableLayout.LayoutParams and not TableRow.LayoutParams.
You add some TextView in the MessageRow(from what I seen in your previous questions), add those child views with TableRow.LayoutParams to MessageRow.
You use only WRAP_CONTENT for your LayoutParams everywhere in your code, you might want to set the width(the first parameter in the constructor) to FILL_PARENT/MATCH_PARENT
How can I draw a thin line between the table rows?
You could use a simple View that will act as a separator:
for(int i = 0; i < 100; i++) {
MessageRow mr = new MessageRow(getContext());
// stuff to set the TexView text and color
mr.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
this.addView(mr);
View separator = new View(getContext());
separator.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, 3)));
separator.setBackgroundColor(Color.RED);
this.addView(separator);
}
Because you have 100 rows you could try to set a drawable with a separator line as the background for theTableRow(header and MessageRow) instead of the above method that adds another 100 Views to the layout.
Extra Note:
You have a lot of views to add to a single activity layout, you are talking about 100 rows, and if your MessageRow is more complex than a simple TextView(and I think it is) you could get in some performances problems. I suggest you take a look at the wonderful ListView widget.
Don't have a programming environment here, but I'll try and answer some of your questions.
The reason your header row (button) is taller than your test based rows is because the button requires more space and the row accomodates it. The default button has padding on both the top/bottom of the text. I think your best option is to create your own button, which gives you the additional benefit of being able to control the look and feel. It seems like other people have had this issue before: Can't get rid of bottom padding on button
Your button is set to wrap_content which means it won't be any bigger than it needs to be (It will grow/shrink so it can fit the text "Column1" or whatever you put there). Instead of making the Button WRAP, I suspect you'll need to make it FILL_PARENT.
It's not your Table Row that needs to fill the screen width, it's your table that needs to fill the screen. Wherever you define your table, it's probably set to WRAP_CONTENT for the Horizontal dimension. Set it to FILL_PARENT and your table should expand to the full width of whatever it's container is (In this case, it should expand the full width of the screen)
There are probably several different ways you can do this. One method I used somewhat recently is to utilize the View tag which essentially looks like a horizontal bar across the screen. Below is a link to how to implement it.
http://sonnygill.net/android/horizontal-rule/
Related
I am looking for solution where could dispay large data with horizontal and vetical scroll. Something like this https://www.syncfusion.com/blogs/post/new-datagrid-for-xamarinios-and-xamarinandroid.aspx. I would like to change number of columns and change the cell values.
Do you have please something like this? When it be a free i will be really happy. Thank you
You can create it by custom TableLayout. And the good news is you can add both side scrolling mechanism in TableLayout. You have to first set a TableLayout xml. For both side scrolling you have to add first ScrollView then HorizontalScrlollView then your TableLayout.
Now you you can create row and column. You can create it dynamically because you (may be) dont know how many column has required. So you have to create custom TableRow and cell and you can easily add your tableLayout .
TableRow row= new TableRow(this);
TableRow.LayoutParams lp = new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT);
row.setLayoutParams(lp);
// then create your text view and add it row. and last add row in your table layout
This is just example. You can create your own data grid library
And you can some ready mate library to show data grid in table view like your reference. :
https://github.com/evrencoskun/TableView
https://github.com/ISchwarz23/SortableTableView
I have an Open GL ES 2.0 app and am displaying an Android TextView over the top of my GLSurfaceView.
I have the actual textviews displaying OK but now I need to try to centre them.
This is what I have so far:
text1 = new TextView(this);
text1.setText("This is some sample text");
text1.setTextColor(Color.WHITE);
text1.setTextSize(textSize);
text2= new TextView(this);
text2.setText("And this is some more sample text");
text2.setTextColor(Color.WHITE);
text2.setTextSize(textSize);
RelativeLayout.LayoutParams textParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.MATCH_PARENT);
lp.addRule(RelativeLayout.CENTER_HORIZONTAL);
textLayout = new RelativeLayout(this);
textLayout.setLayoutParams(textParams);
textLayout.addView(text1);
textLayout.addView(text2);
mainLayout.addView(textLayout);
However, when I run this, only text1 is centered. Text 2 isn't, and starts at the left side of the first (correctly centered) textView. Try as I might, I can't seem to get both of them centered. The following graphic describes what I mean:
(Please note re vertical placement - in my actual results, both TextViews are at the same vertical/'y' position and therefore overlapping - obviously this is expected as I haven't changed the vertical position of the 2nd TextView, but to make things clearer to illustrate, I've moved the 2nd one down manually.......)
The idea I was going with was creating a 'textLayout' to which I could add all of my textViews, then just add that textLayout to my main layout. Thus facilitating the addition and removal of all of the textViews with a single line of code.
Please note that I am not using, and do not wish to use, XML for this - I would like to know how to do this programmatically.
What am I missing?
Edit Here is how I am creating my Main Layout to which I am adding the textView.....
layout = new RelativeLayout(this);
layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
When you are adding "RelativeLayout.CENTER_HORIZONTAL" as a rule to your layout params, what you are actually doing is telling textLayout that it should be centered horizontally in your mainLayout (see http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_centerHorizontal). In code you should actually do text1.setGravity(Gravity.CENTER) and text2.setGravity(Gravity.CENTER).
How to implement below image in Android.
In this view the time row should static, but table row are dynamic and each row the cell width is depend on time.
Here green box are cells.
http://i.stack.imgur.com/bBtsJ.jpg
If I understand correctly, you want to change the blue and green boxes dynamically and the rest is static. So you want to change the column span programmatically. To do this, first find the View you want to change using TextView tv = (TextView) findViewById(R.id.some_sensible_id); and then call
TableRow.LayoutParams params = (TableRow.LayoutParams) tv.getLayoutParams();
params.span = columnsToSpan;
tv.setLayoutParams(params);
Where columnsToSpan is how many columns the View should occupy.
I have a List of TableLayout's that are each generated from data in my database. I need to loop through this list and add each TableLayout to my LinearLayout.
Below is the code I currently have, however it looks like each time the table is added, it is replacing the last one so the end result is the app displaying only the last table in the list (as far as I can tell)
container = (LinearLayout) findViewById(R.id.container);
for (int i = 0; i < listOfTables.size(); i++) {
container.addView(listOfTables.get(i), i);
}
Any ideas?
Max.
You need to play with the XML height and width attributes, in all likelihood.
Try changing the layout-height and layout-width attributes for the table layouts and the linear layout to wrap_content and see what that does :)
You might also try changing the code so it doesn't have the 2nd argument. It should add the layouts linearly.
Hope this helped!
In my application i am creating and displaying a table at runtime. The table is developed in an Activity class. Everything working fine, only issue is the view of the table. There are four textviews in a row in the table. they are shown adjacently without seperation. How could i make a proper view with a definite space between textviews.
text1.setText("24/02/2011"); //TextView text
text2.setText("Andy"); //TextView text
text3.setText("3"); //TextView text
text4.setText("Repeat"); //TextView text
tableRow.addView(text1); //TableRow tableRow
tableRow.addView(text2); //TableRow tableRow
tableRow.addView(text3); //TableRow tableRow
tableRow.addView(text4); //TableRow tableRow
dueTL.addView(tableRow); //TableLayout dueTL
It display the data like : 24/02/2011Andy3Repeat
You can add weight to each TextView, also be sure that your TableView has fill_parent in its width. Also check the padding and margins of the TextViews
I hope this helps
If for some reason setting weights doesn't work for your situation, take a look at padding, paddingBottom, paddingLeft, paddingRight, and paddingTop in http://developer.android.com/reference/android/widget/TextView.html
You could either manually add a space to the strings in "setText" or you could set a right margin, if the surrounding ViewGroup supports it, on the TextViews either in XML (layout_marginRight) or via Code (LayoutParams).