Adding a dynamic TableLayout with borders in a Android App - android

I am creating a Android app. This Android App will have objects that are dynamic. These objects are Places with a Address or Lat/Long, and distance from current location, and a ETA. What I would like to do is add with objects on a TableLayout with borders, but I need to be able to dynamically add rows as the number of places increase.
I understand somewhat how to do this for a fixed hardcoded number of items on the xml, but what would be the best way when the number of objects is coming from the Activity.java file?
Below is a screenshot of the TableLayout I would like:
So the object would be a place with a address, distance and direction.

but I need to be able to dynamically add rows as the number of places increase.
This isn't difficult, when you have a new object append a TableRow with the data to the TableLayout.
I understand somewhat how to do this for a fixed hardcoded number of items on the xml, but what would be the best way when the number of objects is coming from the Activity.java file?
I don't think there is a best way (or what you consider best way). You either:
Insert fake views to act as dividers. This would be easier to implement visually but it will also increase the memory consumption of your app, with bad consequences if the number of rows is big. (1)
Or use drawables for the backgrounds to simulate the borders (like nine-patch images). This would be simpler then inserting additional views but you need a bit more talent to make it look well. (2)
Some examples for your image:
(1)
private static final int DIVIDER_SIZE = 2;
// rowsCount the number of rows to add to the TableLayout
private void buildOldSchool(TableLayout table, int rowsCount) {
View divider;
for (int i = 0; i < rowsCount; i++) {
TableRow row = new TableRow(this);
for (int j = 0; j < 7; j++) {
if (j % 2 == 0) {
divider = new View(this);
divider.setLayoutParams(new TableLayout.LayoutParams(
DIVIDER_SIZE, TableLayout.LayoutParams.MATCH_PARENT));
divider.setBackgroundColor(Color.GREEN);
row.addView(divider, new TableRow.LayoutParams(
DIVIDER_SIZE, TableRow.LayoutParams.MATCH_PARENT));
continue;
}
TextView tv = new TextView(this);
tv.setText("DX"); // dummy data
row.addView(tv, new TableRow.LayoutParams(
TableRow.LayoutParams.MATCH_PARENT,
TableRow.LayoutParams.WRAP_CONTENT));
}
divider = new View(this);
divider.setLayoutParams(new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT, DIVIDER_SIZE));
divider.setBackgroundColor(Color.GREEN);
if (i == 0) {
table.addView(divider);
divider = new View(this);
divider.setLayoutParams(new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT, DIVIDER_SIZE));
divider.setBackgroundColor(Color.GREEN);
}
table.addView(row);
table.addView(divider);
}
}
(2) or with images:
private void buildWithDrawables(TableLayout table, int rowsCount) {
for (int i = 0; i < rowsCount; i++) {
TableRow row = new TableRow(this);
row.setBackgroundResource(i == 0 ? R.drawable.firstrow
: R.drawable.normalrow);
for (int j = 0; j < 3; j++) {
TextView tv = new TextView(this);
tv.setBackgroundResource(j == 2 ? R.drawable.extra
: R.drawable.cell);
tv.setText("DX");
row.addView(tv, new TableRow.LayoutParams(
TableRow.LayoutParams.MATCH_PARENT,
TableRow.LayoutParams.WRAP_CONTENT));
}
table.addView(row);
}
}
Where the images are:
R.drawable.cell:
R.drawable.extra (a visually transparent drawable which replicates the nine-patch above):
R.drawable.normalrow:
R.drawable.firstrow:
Ignore my design skills.
If your foresee a large number of rows I would advise you to use a ListView, which you could pretty easy make it to look like a table with borders.

Couldn't figure out the vertical line, but something you can build upon
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ScrollView sv = new ScrollView(this);
TableLayout ll=new TableLayout(this);
HorizontalScrollView hsv = new HorizontalScrollView(this);
for(int i=1;i<5;i++) {
TableRow tbrow=new TableRow(this);
for(int j=1;j<=3;j++) {
TextView tv1=new TextView(this);
tv1.setText("Element :"+ i + "" + j);
tbrow.addView(tv1);
}
ll.addView(tbrow);
View v = new View(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 5);
v.setLayoutParams(params);
v.setBackgroundColor(getResources().getColor(android.R.color.white));
ll.addView(v);
}
hsv.addView(ll);
sv.addView(hsv);
setContentView(sv);
}

Related

draw line following a finger in tablelayout in android [duplicate]

I am currently developing an android word search game. And I'm just learning Android Studio for almost a month now. I had made the ui of the game. Now my problem is the gameplay. I used a tablelayout for the textviews containing the letters for the puzzle.
Here is my createGrid() method for creating the tablelayout grid:
public void createGrid(char[][] input){
TableLayout table = (TableLayout) findViewById(R.id.mainLayout);
Typeface font = Typeface.createFromAsset(getAssets(),"kg.ttf");
for(int i = 0; i < input.length; i++){
LinearLayout rowLayout = new LinearLayout(this);
rowLayout.setOrientation(LinearLayout.HORIZONTAL);
rowLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
TableRow row = new TableRow(this);
row.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
row.setGravity(Gravity.CENTER_HORIZONTAL);
for(int j = 0; j < input.length; j++){
TextView text = new TextView(this);
Character temp = input[i][j];
text.setText(temp.toString());
text.setPadding(20, 20, 20, 20);
text.setTextSize(25);
text.setTypeface(font);
text.setGravity(Gravity.CENTER);
row.addView(text);
}
table.addView(row);
}
}
What I want to do is make the tablelayout interactive by drawing a line when highlighting some letters.
I read this article that is all about the onDraw() and onTouchEvent() methods.
Now, I want to learn how to insert those codes on my program.
Or if that's impossible to do, any suggestions to help me improve this game?

How to draw a line inside a tablelayout?

I am currently developing an android word search game. And I'm just learning Android Studio for almost a month now. I had made the ui of the game. Now my problem is the gameplay. I used a tablelayout for the textviews containing the letters for the puzzle.
Here is my createGrid() method for creating the tablelayout grid:
public void createGrid(char[][] input){
TableLayout table = (TableLayout) findViewById(R.id.mainLayout);
Typeface font = Typeface.createFromAsset(getAssets(),"kg.ttf");
for(int i = 0; i < input.length; i++){
LinearLayout rowLayout = new LinearLayout(this);
rowLayout.setOrientation(LinearLayout.HORIZONTAL);
rowLayout.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
TableRow row = new TableRow(this);
row.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
row.setGravity(Gravity.CENTER_HORIZONTAL);
for(int j = 0; j < input.length; j++){
TextView text = new TextView(this);
Character temp = input[i][j];
text.setText(temp.toString());
text.setPadding(20, 20, 20, 20);
text.setTextSize(25);
text.setTypeface(font);
text.setGravity(Gravity.CENTER);
row.addView(text);
}
table.addView(row);
}
}
What I want to do is make the tablelayout interactive by drawing a line when highlighting some letters.
I read this article that is all about the onDraw() and onTouchEvent() methods.
Now, I want to learn how to insert those codes on my program.
Or if that's impossible to do, any suggestions to help me improve this game?

Creating table layout and adding rows from the code behind in Android

I need to create a table layout and add rows dynamically from Java code behind. I have already read questions here, but they are mentioning to add table rows in an already created table layout (from xml).
I need to create the table layout as well as add data to it dynamically.
Can anyone please provide some inputs?
For now, I have linear layout code in place which adds button from code behind one below the other, I need to place it under a tabular format now.
To add three buttons to TableRow use the code below
TableLayout tableLayout = new TableLayout(this);
for (int i = 0; i < 10; i++)
{
TableRow tableRow = new TableRow(this);
Button button = new Button(this);
button.setText("1");
tableRow.addView(button);
button = new Button(this);
button.setText("2");
tableRow.addView(button);
button = new Button(this);
button.setText("3");
tableRow.addView(button);
tableLayout.addView(tableRow);
}
setContentView(tableLayout);
Add the code below to your onCreate() method in you Activity class:
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
TableLayout tableLayout = new TableLayout(this);
for (int i = 0; i < 5; i++)
{
TableRow tableRow = new TableRow(this);
for (int j = 0; j < 3; j++)
{
Button button = new Button(this);
button.setText(""+j);
tableRow.addView(button);
}
tableLayout.addView(tableRow);
}
setContentView(tableLayout);
}
The code will add five rows with three buttons with the text 1 to 3 to the table.
Add the following code below your init() method:
for (int i = 0; i < GetGlobal.totalrow; i++) {
TableRow tbrow = new TableRow(this);
// tbrow.setLayoutParams(tableRowParams);
TextView t1v = new TextView(this);
t1v.setText(JSONParser.heading[i].replace('"', ' '));
t1v.setBackgroundResource(R.drawable.diamond_detail1);
t1v.setPadding(5, 3, 5, 3);
t1v.setMinHeight(50);
t1v.setTypeface(Typeface.SERIF);
t1v.setTextColor(Color.parseColor("#FFFFFF"));
t1v.setGravity(Gravity.FILL);
tbrow.addView(t1v);

Android change visibility doesn't work

Simple card game setup creating rows and columns number of cards:
TableLayout tableCards = new TableLayout(this);
RelativeLayout.LayoutParams relLayParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
relLayParams.addRule(RelativeLayout.CENTER_IN_PARENT);
tableCards.setLayoutParams(relLayParams);
int i = 0;
StringBuilder sbCardsDebug = new StringBuilder('\n');
for (int r = 0; r < rows; r++) {
// create a new row
TableRow tr = new TableRow(this);
tr.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, TableLayout.LayoutParams.WRAP_CONTENT));
for (int c = 0; c < columns; c++) {
ImageView card = new ImageView(this);
card.setTag("" + i);
card.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
card.setImageDrawable(bitmapCardBackScaled);
tr.addView(card);
card.setOnClickListener(cardClickListener);
i++;
}
// add the row:
tableCards.addView(tr);
}
relativeLayoutCardsHolder.addView(tableCards);
Somewhere in the listener I have a code part like this:
imageView.setVisibility(View.INVISIBLE);
Where the imageView is a card ( I have breakpoint set up also log and it shows the correct card.
The problem: it doesn't become invisible.
I am thinking maybe I am not in a good Thread or should I need something to do it after setting the invisible?
I have tried with :
imageView.post(new Runnable() {
public void run() {
imageView.setVisibility(View.INVISIBLE);
}
});
and
TableLayout parent = (TableLayout) imageView.getParent().getParent();
parent.invalidate();
parent.requestLayout();
and no success. Pls make any suggestion, I am out of ideas, thanks.
Edit1:
As suggestion I have tried with postDelayed too:
imageView.postDelayed(new Runnable() {
public void run() {
imageView.setVisibility(View.INVISIBLE);
}
}, 600);
Listener body is from line 353 to 424 calling several classes with animations, passing references and it will reveal my dirty work, also will show the business logic too (NDA agrement), which part are you interested? - min 1000 lines are executed.
If it's a correct ImageView, its must work.
imageView.setAlpha(0);
Hope it's help.

Android - Dynamically created View's unexplained top margin

The idea is to create TextViews for programs in nice little 200x200 squares in the shape of your favourite tetris squares. These views then move on to their own course relevant to themselves.
Problem im facing is this:
The first two views have this step difference from the top that comes from nowhere. Need to align them side by side instead.
I've checked their margins when debugging, and it was the same, as well as the layout they are in and well, the code below.
Relevant code below:
for (int i = 0; i < 2; i++) {
TableRow tr = new TableRow(this);
tr.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
// within each tablerow, we then create the tablecolumns
// assuming we want two columns only. Change 2 otherwise.
for (int j = 0; j < 2; j++) {
try {
TextView nyan = new TextView(this);
nyan.setText(pail.get(count).getProgramName());
nyan.setClickable(true);
nyan.setLayoutParams(new LayoutParams(200, 200));
nyan.setGravity(Gravity.CENTER);
//nyan.setPadding(10, 50, 10, 50);
nyan.setBackgroundColor(R.drawable.programlistback);
nyan.setSingleLine(false);
nyan.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Intent i = new Intent(v.getContext(),
CourseList.class);
i.putExtra("selectedProgram", pail.get(count)
.getProgramID());
startActivity(i);
}
});
tr.addView(nyan);
// when done with textview creation, update tick for nyan
count++;
} catch (IndexOutOfBoundsException e) {
Log.i("expect", "tableOrigin - hit " + count + "th index");
}
}
tabLayout.addView(tr, new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
}

Categories

Resources