Make square buttons in TableLayout - android

I am using the following code to generate a table with button in each cell.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:shrinkColumns="*"
android:stretchColumns="*" >
</TableLayout>
</LinearLayout>
And this is the function that generates the table
private void BuildTable(int rows, int cols) {
// outer for loop
for (int i = 1; i <= rows; i++) {
TableRow row = new TableRow(this);
row.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));
// inner for loop
for (int j = 1; j <= cols; j++) {
Button bt = new Button(this);
LayoutParams lp=new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lp.setMargins(5, 5, 5, 5);
bt.setLayoutParams(lp);
bt.setText("R"+i+" ,C"+j);
row.addView(bt);
}
table_layout.addView(row);
}
}
Which gives me the following:
I need your help to make the height of each button the same as its width. (As squares)
Thanks

Related

Dynamically added items in LinearLayout margin

I have code to add checkboxes from an Array to the LinearLayout.
LinearLayout my_layout = (LinearLayout) findViewById(R.id.test);
for (int n = 0; n < listitems.size(); n++) {
CheckBox cb = new CheckBox(getApplicationContext());
cb.setId(Integer.parseInt(listitems.get(n).get("cbid")));
cb.setText(listitems.get(n).get("product"));
cb.setTextColor(Color.BLACK);
my_layout.addView(cb);
}
how can i make sure that between each checkbox there is a margin of 2-3dp?
And that the background of the checkboxes has rounded edges?
This is my XML to set the boxes in
<LinearLayout
android:id="#+id/Parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/test"
android:layout_width="260dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="10dp" />
<LinearLayout
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#13ca8c"
/>
</LinearLayout>
LinearLayout my_layout = (LinearLayout) findViewById(R.id.test);
for (int n = 0; n < listitems.size(); n++) {
CheckBox cb = new CheckBox(getApplicationContext());
cb.setId(Integer.parseInt(listitems.get(n).get("cbid")));
cb.setText(listitems.get(n).get("product"));
cb.setTextColor(Color.BLACK);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
parms.leftMargin = 2;
params.rightMargin = 2;
params.topMargin = 2;
params.bottomMargin = 2;
my_layout.addView(cb,params);
}
And for rounded corners use a background image

Margin TableRow

I've looked through all the people that have asked the same thing and no one has ever answered correctly the question. For some reason I can't seem to find how to do this.
I need to add a margin between each of my dynamically made TableRows.
This is what I have now.
As you can see, the rows are way together, making the GUI not usable for a user.
The TableLayout is inside a ScrollView.
This is the code I use to create dynamically the TextView and the button. I have tried using margins but no luck so far
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
TableLayout tl = (TableLayout) findViewById(R.id.TableLayout1);
/* Create a new row to be added. */
TableRow tr = new TableRow(this);
TableLayout.LayoutParams tableRowParams = new TableLayout.LayoutParams(
TableLayout.LayoutParams.FILL_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT);
/* Margin. */
int leftMargin = 0;
int topMargin = 200;
int rightMargin = 0;
int bottomMargin = 0;
/* Set margins and create new textview. */
tableRowParams.setMargins(leftMargin, topMargin, rightMargin,
bottomMargin);
tr.setLayoutParams(tableRowParams);
TextView encuestasTextView = new TextView(this);
encuestasTextView.setText("Esto es una prueba");
encuestasTextView.setLayoutParams(new TableRow.LayoutParams(
TableRow.LayoutParams.WRAP_CONTENT,
TableRow.LayoutParams.WRAP_CONTENT));
tr.addView(encuestasTextView);
Button a = new Button(this);
a.setText("Abrir encuesta");
a.setLayoutParams(new TableRow.LayoutParams(width / 3,
TableRow.LayoutParams.WRAP_CONTENT));
tr.addView(a);
tl.addView(tr, new TableLayout.LayoutParams(
TableLayout.LayoutParams.FILL_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT));
This is the XML
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Encuestas" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/button1"
android:layout_weight="1"
android:scrollbars="vertical" >
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:id="#+id/TableLayout1">
</TableLayout>
</ScrollView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="14dp"
android:layout_marginTop="14dp"
android:onClick="SyncServer"
android:text="Sync" />
</RelativeLayout>
What I'm missing?
I think this:
tl.addView(tr, new TableLayout.LayoutParams(
TableLayout.LayoutParams.FILL_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT));
is wiping out the layout params you set earlier. Just use tl.addView(tr);

display 2D array in matrix format

I want my 2D array to be displayed as matrix format. For that which layout is suitable? Can I have any example for that?
The simple answer is to use a TableLayout with TextViews inside.
But if you want to display a large array, you should make the matrix scrollable in both directions. Below is the code that populates a matrix that is displayed as a series of EditTexts inside rows, inside a TableLayout. The TableLayout is made scrollable in both directions using two ScrollView. Adapt the code to your needs. table is the TableLayout with the id tableLayout1.
private void fillTable(final int n, final double[][] matrix, TableLayout table) {
table.removeAllViews();
for (int i = 0; i < n; i++) {
TableRow row = new TableRow(MainActivity.this);
row.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
for (int j = 0; j < n; j++) {
EditText edit = new EditText(OutputActivity.this);
edit.setInputType(InputType.TYPE_CLASS_NUMBER|InputType.TYPE_NUMBER_FLAG_DECIMAL|InputType.TYPE_NUMBER_FLAG_SIGNED);
edit.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
edit.setText(Double.toString(matrix[i][j]));
edit.setKeyListener(null);
row.addView(edit);
}
table.addView(row);
}
}
The layout XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:orientation="vertical" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<HorizontalScrollView
android:id="#+id/horizontalScrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
</TableLayout>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>
</LinearLayout>

How to use two column ScrollView?

I want a 2-column ScrollView. In each column, there should be an ImageButton:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_height="800dp"
android:background="#FFF"
android:layout_width="600dp" >
<LinearLayout
android:id="#+id/categoryLinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</LinearLayout>
</ScrollView>
And the code:
LinearLayout sv = (LinearLayout) findViewById(R.id.categoryLinearLayout1);
for (int i = 0; i < 10; i++) {
ImageButton ib = new ImageButton(this);
// ib.setImageDrawable(getResources().getDrawable(R.drawable.cat1));
Bitmap bmp = BitmapFactory.decodeResource(getResources(),
R.drawable.cat1);
int width = 300;
int height = 300;
Bitmap resizedbitmap = Bitmap.createScaledBitmap(bmp, width,
height, true);
ib.setImageBitmap(resizedbitmap);
sv.addView(ib);
}
But in this way, all 10 ImageButtons horizontally. What I need is, put 2 ImageButton in a row (it makes 600px) and go down, put more 2 ImageButtons etc. So there will be 5 rows for 10 ImageButtons.
How can I do that?
Use a TableLayout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_height="800dp"
android:background="#FFF"
android:layout_width="600dp" >
<TableLayout
android:id="#+id/categoryLinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TableLayout>
</ScrollView>
Then in your code:
TableLayout sv = (TableLayout) findViewById(R.id.categoryLinearLayout1);
for (int i = 0; i < 5; i++) {
TableRow tr = new TableRow(this);
tr.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
for (int j = 0; j < 2; j++) {
ImageButton ib = new ImageButton(this);
// ib.setImageDrawable(getResources().getDrawable(R.drawable.cat1));
Bitmap bmp = BitmapFactory.decodeResource(getResources(),
R.drawable.cat1);
int width = 300;
int height = 300;
Bitmap resizedbitmap = Bitmap.createScaledBitmap(bmp, width,
height, true);
ib.setImageBitmap(resizedbitmap);
ib.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
tr.addView(ib);
}
sv.add(tr);
}

Android TableLayout isn't displaying rows

I am having problems getting my TableLayout to display my rows.
I'm propagating the rows programmatically via this method:
private void buildStatesTable() {
Log.d(SelectStatesPanel.class.getCanonicalName(), "Entering Build States Table");
ArrayList<String> states = new ArrayList<String>();
Random rand = new Random();
for(int i = 0; i < 10; i++){
if(i < goodStates.length){
states.add(goodStates[i]);
}else{
states.add(badStates[rand.nextInt(badStates.length)]);
}
}
Collections.shuffle(states);
TableLayout tl = (TableLayout) findViewById(R.id.statesTable);
final int NUM_PER_ROW = 2;
for(int i = 0; i < (states.size() / NUM_PER_ROW); i++){
TableRow tr = new TableRow(getContext());
tr.setLayoutParams(new LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
for(int j = 0; j < NUM_PER_ROW && (i*NUM_PER_ROW + j) < states.size(); j++){
TextView lblState = new TextView(getContext());
lblState.setText(states.get(i*NUM_PER_ROW + j));
lblState.setTextColor(Color.BLACK);
lblState.setLayoutParams(new LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
lblState.setClickable(true);
lblState.setOnClickListener(this);
tr.addView(lblState);
//Log.d(SelectStatesPanel.class.getCanonicalName(), "Adding State: " + states.get(i*NUM_PER_ROW + j));
Log.d(SelectStatesPanel.class.getCanonicalName(), "\t\t\t (" + i + ", " + j + ")");
}
// Add the TableRow to the TableLayout
tl.addView(tr);
Log.d(SelectStatesPanel.class.getCanonicalName(), "Adding Row");
}
}
And this is my XML (table layout is at the bottom):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_margin="5dip"
android:text="Good choice! There's hope for you yet."
android:textSize="16dip"
android:textStyle="bold"
android:gravity="center"
/>
<TextView
android:id="#+id/txtLex"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_margin="5dip"
android:text="Lexington"
android:textSize="14dip"
android:gravity="center"
/>
<TextView
android:id="#+id/txtTampa"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_margin="5dip"
android:text="Tampa"
android:textSize="14dip"
android:gravity="center"
/>
<TextView
android:id="#+id/txtSacramento"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_margin="5dip"
android:text="Sacramento"
android:textSize="14dip"
android:gravity="center"
/>
<TextView
android:id="#+id/txtHiltonhead"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_margin="5dip"
android:text="Hiltonhead"
android:textSize="14dip"
android:gravity="center"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dip"
android:gravity="center"
android:src="#drawable/usa"
/>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dip"
android:id="#+id/statesTable"
android:stretchColumns="0,1">
</TableLayout>
</LinearLayout>
Why isn't my table layout's showing content?
I can't see specifically what is going wrong in your code, but here is a similar implementation in my own code:
public class EconFragment extends Fragment {
private TableLayout questionContainer;
static int pos = 0;
private String[] titles = {"The first title ", "hallo1","hallo2", "hallo3",
"hallo4", "hallo5","hallo6", "hallo7","hallo8", "hallo9"};
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
Log.d("Econ", "onCreateView");
return inflater.inflate(R.layout.econfragment, container, false);
}
public void onResume() {
super.onResume();
LayoutInflater inflater = (LayoutInflater) getActivity().
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
questionContainer = (TableLayout) getActivity().findViewById(R.id.questionContainer);
//these lines are my first attempt to try and get the questions to repopulate after returning
//from pressing back - as of yet, they don't repopulate the screen:
//View econFragment = inflater.inflate(R.layout.econfragment, null);
//container.addView(econFragment);
int leftMargin=5;
int topMargin=5;
int rightMargin=5;
int bottomMargin=5;
while (pos < 10) {
View question = inflater.inflate(R.layout.question, null);
question.setId(pos);
TextView title = (TextView) question.findViewById(R.id.questionTextView);
title.setText(titles[pos]);
Button charts = (Button) question.findViewById(R.id.chartsButton);
charts.setId(pos);
charts.setOnClickListener(chartsListener);
TableRow tr = (TableRow) question;
TableLayout.LayoutParams trParams = new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.WRAP_CONTENT);
trParams.setMargins(leftMargin, topMargin, rightMargin, bottomMargin);
tr.setLayoutParams(trParams);
questionContainer.addView(tr);
pos++;
}
Log.d("Econ", "onResume");
}
And the source of questionContainer, econfragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/questionContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TableLayout>
</ScrollView>
As you can see, a Question.class object is created as a View object in the EconFragment fragment. question object is used to findViewById for each needed portion.
Comment out the whole row code and replace it with a two liner textview row. Does that work? Then the array from which you build your row views is maybe the problem.
Best regards.
I discovered the problem on my own.
The problem was this:
lblState.setLayoutParams(new LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
Specifying TableRow.LayoutParams fixed the problem.

Categories

Resources