How can I create a button with scaling text - android

I have a TableLayout with cells, populated like this:
TableLayout tableLayout = (TableLayout) getActivity().findViewById(R.id.button_table);
for (int y = 0; y < 4; y++) {
TableRow row = new TableRow(getActivity());
row.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
for (int x = 0; x < 3; x++) {
Button button = new Button(getActivity());
button.setText("Button");
button.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT));
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mainPresenter.processAction(((Button)v).getText().toString());
}
});
buttons.add(button);
row.addView(button);
}
tableLayout.addView(row, new TableLayout.LayoutParams(TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
}
This works nicely to start with, however sometimes the buttons have their text set to something that is too large for the allocated width. This results in the button expanding to accommodate the text.
I would like it to work the other way around - the buttons maintain their assigned width, and instead the font that is used shrinks to make sure that the text fits into the button. How can I do this?

when you add the button into a table row, instead of using buttons.add(button);, use buttons.add(button, new TableRow.LayoutParams(100, 100)); which would make the button be 100x100 large.

Related

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);

Specifying TableRow child dimensions programmatically

I'm trying to create a TableLayout programmatically, in order to make a grid-like layout with a configurable row and column count. This would likely be trivial to do in a layout file, but because each child element will be nearly identical and I want the row and column count to be configurable, I would like to do it programmatically if possible.
So far this is what I have.
MainActivity.java
private void displayBoard() {
TableLayout l = (TableLayout) findViewById(R.id.GameGrid);
l.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));
for (int y = 0; y < b.height(); y++) {
TableRow r = new TableRow(this);
r.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.WRAP_CONTENT, 15));
for (int x = 0; x < b.width(); x++) {
r.addView(b.getSpaceAt(x, y));
}
l.addView(r);
}
}
Board.java
for (int y = 0; y < spaces.length; y++) {
for (int x = 0; x < spaces[0].length; x++) {
spaces[y][x] = new BoardSpace(context, x, y);
}
}
BoardSpace.java
public class BoardSpace extends Button {
private ReversiPiece piece;
protected int x, y;
private BoardSpace(Context c) {
super(c);
}
public BoardSpace(Context c, int x, int y) {
super(c);
// this.setWidth(25); // Doesn't make a difference, either
// this.setHeight(15); // Doesn't make a difference, either
piece = null;
this.x = x;
this.y = y;
}
public ReversiPiece piece() {
return piece;
}
public void setPiece(ReversiPiece p) {
piece = p;
}
}
I'm basically trying to create a grid of buttons, but so far I cannot get the size of the buttons to change so I can make sure they all fit on the screen. At the moment they appear at a standard size, and any changes I make to the LayoutParams definitions do not make a difference.
I suspect this issue has to do with my usage of LayoutParams. There are a lot of LayoutParams classes associated with each View type, so perhaps I'm not using the right one? Any help would be appreciated.
EDIT: Now creating a new TableLayout.LayoutParams object for each TableRow based on cyanide's recommendation, but the buttons are still displaying at default size.
You are right, that's about LayoutParams, which must not be shared between views: each view should have its own copy of LayoutParams.
In other words, this is what you need:
r.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, 15));
About getSpaceAt (there is not code for it). Does it create a view programmatically? Remember to set LayoutParams and again it should be separate for each view.
Hopefully it will help.
Got it! I was trying to manipulate the LayoutParams of my TableLayout and TableRows when in reality I needed to set TableRow.LayoutParams on the buttons themselves, when I add them to TableRow. This involves specifying the weight of each child element (Button) as well.
private void displayBoard() {
TableLayout l = (TableLayout) findViewById(R.id.GameGrid);
l.setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
for (int y = 0; y < b.height(); y++) {
TableRow r = new TableRow(this);
r.setWeightSum(b.width());
for (int x = 0; x < b.width(); x++) {
BoardSpace s = b.getSpaceAt(x, y);
s.setLayoutParams(new TableRow.LayoutParams(
TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.MATCH_PARENT, 1.0f));
r.addView(s);
}
l.addView(r);
}
}
TableRow.setWeightSum() is used to set the weight sum of the row to the number of elements in the row, then passing a weight of 1 to the LayoutParams for the button causes the buttons to adjust in size to fit on the screen, as intended.
Surprisingly this answer was for a more generic question but this is what led me to the solution:
How to set layout_weight attribute dynamically from code?

Padding between dynamically created TableRows

I have created a TableLayout and then I created TableRow dynamically in my java code, and added some buttons in the form of an 8x8 grid. But I want to reduce the space between the buttons. I tried setting LayoutParam for the TableRow , but when I do this , the output shows just a blank screen. Here's my code:
LayoutParams param= new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
field=new Button[8][8];
tb=new TableLayout(this);
param.setMargins(10, 2, 10, 2);
for (int i = 0; i < field.length; i++) {
TableRow current=new TableRow(this);
for (int j = 0; j < field[i].length; j++) {
Button button=new Button(this);
field[i][j]=button;
button.setWidth(40);
button.setHeight(40);
button.setLayoutParams(param);
current.addView(button);
}
tb.addView(current);
}
t.addView(tb);
But when I don't write button.setLayoutParams(param)
I get an output like this:
which is the normal output except that I want the space between the buttons reduced.
The spacing you're seeing is padding built into the standard Android button background asset. You can see that your layout is correct by turning on "Show Layout Bounds" in Settings > Developer Options. You just need to make your own button asset, or if a simple color is all that is needed, then just set the button background to be a color.
In the param.setMargins() call, use negative values as necessary to get past what seems to be some natural spacing. You will also want to give the same layout margins to the table layout, and use WRAP_CONTENT for both the width and height. I am not sure if variable "t" is needed as I created the buttons without it using a TableLayout in an XML file. (I also did a 5x5 grid to fit onto my screen.)
LayoutParams param= new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
field=new Button[5][5];
tb=new TableLayout(this);
// these are the two important changes
param.setMargins(-5, -5, -5, -5);
tb.setLayoutParams(param);
for (int i = 0; i < field.length; i++) {
TableRow current=new TableRow(this);
for (int j = 0; j < field[i].length; j++) {
Button button=new Button(this);
field[i][j]=button;
button.setWidth(40);
button.setHeight(40);
button.setLayoutParams(param);
current.addView(button);
}
tb.addView(current);
}
t.addView(tb);

Adding a dynamic TableLayout with borders in a Android App

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);
}

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