TableLayout how to add spacing between ImageView - android

I want to achieve the following effect:
Unfortunately, this is what I do now:
How can I add spaces between ImageView to get the same effect as in the first image? This is my code:
public class MainActivity extends AppCompatActivity {
private int totalValue = 2000;
private int currentValue = 180;
private int rowsNumber = 10;
private int columnsNumber = 10;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TableLayout tableLayout = findViewById(R.id.tableLayout);
for (int i = 0; i < 10; i++) {
TableRow tableRow = new TableRow(this);
tableRow.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT,
TableRow.LayoutParams.WRAP_CONTENT));
for (int j = 0; j < columnsNumber; j++) {
ImageView imageView = new ImageView(this);
imageView.setImageResource(this.getCellDrawableId(i, j, totalValue, currentValue));
tableRow.addView(imageView, j);
}
tableLayout.addView(tableRow, i);
}
}
private int getCellDrawableId(int i, int j, int totalValue, int currentValue) {
return R.drawable.test;
}
}

Use
TableRow.LayoutParams lp = new TableRow.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
and it will work.
TableRow.LayoutParams lp = new TableRow.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
lp.leftMargin = margin;
lp.topMargin = margin;
lp.rightMargin = margin;
lp.bottomMargin = margin;
imageView.setLayoutParams(lp);
Or you can use imageView.setPadding(padding, padding, padding, padding);.
Cheers.

ImageView imageView = new ImageView(this);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
//Enter your margin below:
lp.setMargins(left, top, right, bottom);
imageView.setLayoutParams(lp);
imageView.setImageResource(this.getCellDrawableId(i, j, totalValue, currentValue));
tableRow.addView(imageView, j);
Try this and let me know if it helps you.

Related

TextView on the right of dynamically created Buttons

As seen in the picture, everything works fine except that myTextView, instead of appearing just on the right of the last Button, it does on top of 16, 17 and 18. I can’t manage these 3 Buttons to appear bellow the rest. Here is my essential code, where I create dynamically the Buttons and myTextView:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
LinearLayout layout = (LinearLayout) findViewById(R.id.layout1); // id del XML
layout.setOrientation(LinearLayout.VERTICAL);
for (int i = 0; i < 4; i++) {
LinearLayout fila = new LinearLayout(this);
fila.setLayoutParams(new
LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
for (int j = 0; j < 5; j++) {
if (i==3 && j==3){
TextView myTextView = new TextView(this);
LinearLayout.LayoutParams layoutParams=newLinearLayout.LayoutParams(490, 40);
layoutParams.setMargins(870, 30, 0, 0);
myTextView.setTextSize(26);
myTextView.setLayoutParams(layoutParams);
layout.addView(myTextView);
break;
}
Button btnTag = new Button(this); //
btnTag.setBackgroundColor(Color.TRANSPARENT);
btnTag.setLayoutParams(new LinearLayout.LayoutParams(255, 166));
fila.addView(btnTag);
btnTag.setId(j + 1 + (i * 5));
btnTag.setOnClickListener(prueba);
}
layout.addView(fila);
}
}
At last I have solved the problem. Instead of a LinearLayout I have to use a RelativeLayout. Like this, I can set the TextView wherever I want on the screen throughout the xml. Here is the code, where with rel_btn I set the Buttons wherever I want, too:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout. activity_main);
RelativeLayout layout = (RelativeLayout) findViewById(R.id.layout1); // id del XML
for (int i = 1; i < 19; i++) {
RelativeLayout.LayoutParams rel_btn = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
switch(i) {
case 1: rel_btn.leftMargin = 0; rel_btn.topMargin = 0; break;
case 2: rel_btn.leftMargin = 255; rel_btn.topMargin = 0; break;
case 3: rel_btn.leftMargin = 510; rel_btn.topMargin = 0; break;
…… as many as Buttons requiered
}
rel_btn.width = 255; rel_btn.height = 165;
Button btnTag = new Button(this);
btnTag.setLayoutParams(rel_btn);
btnTag.setBackgroundColor(Color.TRANSPARENT);
btnTag.setId(0+i); // les pone el ID
btnTag.setOnClickListener(prueba);
layout.addView(btnTag);
}
}
1. Set layout weight sum
fila.setWeightSum(5);
2. Set width = 0dp and weight = 1 for all buttons
btnTag.setLayoutParams(new LinearLayout.LayoutParams(0, 166, weight));
3. Set width=0dp and weight = 2 for textview
LinearLayout.LayoutParams layoutParams= new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 40);
layoutParams.weight = 2;
//layoutParams.setMargins(870, 30, 0, 0);
myTextView.setTextSize(26);
myTextView.setLayoutParams(layoutParams);
Updated onCreate method
public void onCreate(Bundle savedInstanceState) {
LinearLayout layout = (LinearLayout) findViewById(R.id.layout1); // id del XML
layout.setOrientation(LinearLayout.VERTICAL);
int width = 0; //0dp, we will use weight to set width
int weight = 1;
for (int i = 0; i < 4; i++) {
LinearLayout fila = new LinearLayout(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT, weight);
fila.setLayoutParams(params);
fila.setWeightSum(5);
for (int j = 0; j < 5; j++) {
if (i==3 && j==3){
TextView myTextView = new TextView(this);
LinearLayout.LayoutParams layoutParams= new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 40);
layoutParams.weight = 2;
//layoutParams.setMargins(870, 30, 0, 0);
myTextView.setTextSize(26);
myTextView.setLayoutParams(layoutParams);
layout.addView(myTextView);
break;
}
Button btnTag = new Button(this); //
btnTag.setBackgroundColor(Color.TRANSPARENT);
btnTag.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 166, weight));
fila.addView(btnTag);
btnTag.setId(j + 1 + (i * 5));
btnTag.setOnClickListener(prueba);
}
layout.addView(fila);
}
}

Creating Buttons Programmatically on Android

I want to dynamically create 10 Buttons with Margin between each Button but things I tried won't work.
Here is the code I'm using:
//Create Button
for(int i = 1; i <= 10; i++){
MarginLayoutParams params = new MarginLayoutParams(MarginLayoutParams.MATCH_PARENT, MarginLayoutParams.MATCH_PARENT);
params.setMargins(10, 0, 10, 0);
params.leftMargin = xpos;
params.topMargin = ypos;
params.width = 250;
params.height = 150;
Button btn = new Button(this);
btn.setId(i);
final int _id = btn.getId();
btn.setLayoutParams(params);
btn.setText("Button " + _id);
btn.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Toast.makeText(v.getContext(), "Button clicked index =" + _id, Toast.LENGTH_LONG).show();
//Intent einauslagern = new Intent(v.getContext(), JockeyEinauslagern.class);
//startActivityForResult(einauslagern, 0);
}
});
xpos += 20;
ypos += 50;
this.addContentView(btn, params);
}
You might want to get a container in your Activity class like this. (let it be LinearLayout for example).
Your XML -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:orienation="vertical"
/>
Your Java -
LinearLayout container = (LinearLayout) findViewById(R.id.container);
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
//set your margins here
for (int i = 0; i < 10; i++) {
Button button = new Button(this);
// some stuff
container.addView(button, llp);
}
With minor modifications this should work mostly fine.
Try this
for (int i = 0; i < count; i++) {
// creates button
final Button btn = new Button(this);
btn.setLayoutParams(new ViewGroup.LayoutParams(
250,150));
btn.setPadding(0, 8, 0, 8); //or set margin if u need
btn.setTag(i);
yourContainserView.addView(channelBtn, i);
}

ImageView pushed out from screen

I'm playing around in Android and what I'm trying to achieve is a 10x10tile boardgame.
I want to read size and width of screen and then I want a square in the middle with a textViews above and below.
This is what I've done so far:
public void init(){
Point size = new Point();
WindowManager w = getWindowManager();
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
w.getDefaultDisplay().getSize(size);
screenWidth = size.x;
screenHeight = size.y;
}else{
Display d = w.getDefaultDisplay();
screenWidth = d.getWidth();
screenHeight = d.getHeight();
}
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.LinearLayout);
linearLayout.setOrientation(LinearLayout.VERTICAL);
TextView TVtop = new TextView(this.getApplicationContext());
TVtop.setHeight((screenHeight-screenWidth)/2);
TVtop.setWidth(screenWidth);
TVtop.setText("TOP");
TextView TVbot = new TextView(this.getApplicationContext());
TVbot.setHeight((screenHeight-screenWidth)/2);
TVbot.setWidth(screenWidth);
TVbot.setText("BOT");
TableLayout tableLayout = new TableLayout(this.getApplicationContext());
//Make a cube
LayoutParams tableParams = new LayoutParams(screenWidth, screenWidth);
tableLayout.setLayoutParams(tableParams);
//Populate tableLayout
for(int i = 0; i < nrOfTiles; i++){
TableRow tableRow = new TableRow(this.getApplicationContext());
for(int j = 0; j < nrOfTiles; j++){
ImageView imgView = new ImageView(this.getApplicationContext());
imgView.setImageResource(R.drawable.cell);
tableRow.addView(imgView);
}
tableLayout.addView(tableRow);
}
linearLayout.addView(TVtop);
linearLayout.addView(tableLayout);
linearLayout.addView(TVbot);
}
}
I've tried diffrent layoutparams but nothing seems to get the work done. :S
BR
Personally, I would use a RelativeLayout and setMargins for the items.
While not a direct answer to your question, the following code will display 15 icons in three rows. This should be enough to explain and get you started.
The main activity.
public class MainActivity extends Activity {
private int mWidth;
private int mTile;
private int mColMax = 5;
private Context mContext;
#SuppressWarnings("deprecation")
#SuppressLint("NewApi")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = this;
// the screen width is need to work out the tile size
WindowManager w = getWindowManager();
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
Point size = new Point();
w.getDefaultDisplay().getSize(size);
mWidth = size.x;
}else{
mWidth = w.getDefaultDisplay().getWidth();
}
// how wide (and high) each icon will be to fit the screen.
mTile = (mWidth / mColMax);
setContentView(R.layout.activity_main);
// layout the icons
initUI();
}
/**
* Layout 15 icon images in three rows dynamically.
*/
private void initUI() {
// this is the layout from the XML
ViewGroup layout = (ViewGroup) findViewById(R.id.main_layout);
ImageView iv;
RelativeLayout.LayoutParams params;
int i = 0;
int row = 0;
int col = 0;
do {
params = new RelativeLayout.LayoutParams(mTile,mTile);
params.setMargins((col * mTile), (row * mTile), 0, 0);
iv = new ImageView(mContext);
iv.setAdjustViewBounds(true);
iv.setScaleType(ScaleType.FIT_CENTER);
iv.setImageResource(R.drawable.ic_launcher);
iv.setLayoutParams(params);
layout.addView(iv);
if (col == mColMax) {
row++;
col = 0;
} else {
col++;
}
} while (++i <= 16);
}
}
And the layout XML.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>

how to calculate button width before addView

I adding buttons into Horizonatal linearlayout programally, and I want know this button width before layout.
It's because if buttons's total width over LinearLayout width, App create new LinearLayout below old LinearLayout.
button has 1byte char and multibyte char.
therefore,case of button width when button has only 1byte char, case of button width when button has only multibyte, button width is difference.
public void draw() {
         width = 320;//screen width
Button btn;
int i;
int twidth = 0;
LinearLayout.LayoutParams lparams = new LinearLayout.LayoutParams(
new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
lparams.setMargins(0, 5, 0, 5);
LinearLayout.LayoutParams buttonParams = new LinearLayout.LayoutParams(
new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
buttonParams.setMargins(5, 0, 5, 0);
for (i = -1; +i < size(); i++) {
LinearLayout layout2 = new LinearLayout(context);
layout2.setOrientation(LinearLayout.HORIZONTAL);
addView(layout2, lparams);
twidth = 0;
while (twidth < width && i + 1 < size()) {
btn = new Button(context);
btn.setText(element.get(i + 1).tagName);
btn.setTextColor(Color.BLACK);
btn.setBackgroundColor(Color.WHITE);
btn.setMaxLines(1);
btn.setLayoutParams(buttonParams);
twidth += btn.getTextSize() * btn.length() + 10;
if (twidth >= width) {
i--;
break;
} else {
btn.setPadding(5, 0, 5, 0);
btn.setClickable(true);
btn.setId(element.get(i + 1).tagId);
layout2.addView(btn, buttonParams);
i++;
}
}
}
}
is there solution?

Add Buttons dynamically depending on screen width

I'm trying to add buttons dynamically depending on screen width.
i.e. if I get 6 buttons then I need to position them accordingly, so that the buttons appear at the center with equal spacings on left parent and right parent.
Here is the piece of code which I'm trying but no result:
private void btmBarBtns(int position) {
RelativeLayout rlLayout;
RelativeLayout.LayoutParams layoutParams;
int leftMargin = scrWidth/pageCount;
CommonMethods.getSystemOutput("Left Margin::::"+leftMargin);
for (int i = 0; i < pageCount; i ++ ) {
rlLayout = (RelativeLayout) findViewById(R.id.ivBottomBar);
layoutParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layoutParams.leftMargin = leftMargin;
ib = new ImageButton(this);
ib.setId(i);
ib.setLayoutParams(layoutParams);
ib.setBackgroundResource(R.drawable.white_circle_32x32);
rlLayout.addView(ib);
leftMargin = leftMargin + 70;
if (ib.getId() == position) {
ib.setBackgroundResource(R.drawable.black_circle_32x32);
}
}
}
In the above code I have a Relative layout with height 25dp and width fill_parent. I am able to add the buttons but they are not positioned at the center.
If all you want to is center those ImageButtons with equal space left and right then you could simple wrap them in a LinearLayout and then center that LinearLayout in the parent RelativeLayout:
RelativeLayout rlLayout = (RelativeLayout) findViewById(R.id.parent);
LinearLayout container = new LinearLayout(this);
for (int i = 0; i < 5; i++) {
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
ImageButton ib = new ImageButton(this);
ib.setId(i);
ib.setLayoutParams(layoutParams);
ib.setBackgroundResource(R.drawable.ic_launcher);
container.addView(ib);
if (ib.getId() == position) {
ib.setBackgroundResource(R.drawable.black_circle_32x32);
}
}
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL,
RelativeLayout.TRUE);
rlLayout.addView(container, layoutParams);
If you want to write more code just to do the above then you could modify your current layout and add this element as an anchor:
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true"
android:id="#+id/anchor" />
and then in code position the ImageButtons to the left and right of this anchor View:
int anchorId = R.id.anchor;
int btnsNr = 6; // this is the number of Buttons
RelativeLayout rlLayout = (RelativeLayout) findViewById(R.id.parent);
if (btnsNr % 2 != 0) {
anchorId = 1000;
btnsNr--;
ImageButton imgb = new ImageButton(this);
imgb.setImageResource(R.drawable.shop_open);
imgb.setId(anchorId);
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
rlp.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
rlLayout.addView(imgb, rlp);
}
int whichPart = 1;
while (whichPart >= 0) {
int previousId = anchorId;
for (int i = 0; i < (btnsNr / 2); i++) {
RelativeLayout.LayoutParams tmp = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
if (whichPart == 1) {
tmp.addRule(RelativeLayout.LEFT_OF, previousId);
} else {
tmp.addRule(RelativeLayout.RIGHT_OF, previousId);
}
ImageButton imgb = new ImageButton(this);
previousId += whichPart == 1 ? -1 : 1;
imgb.setId(previousId);
imgb.setImageResource(R.drawable.shop_open);
rlLayout.addView(imgb, tmp);
}
whichPart--;
}
If you want to calculate the number of ImageButtons that fit the screen(and center them horizontally) you should have mentioned.

Categories

Resources