How to add space between buttons in same row - android

I found this example
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TableLayout layout = new TableLayout (this);
layout.setLayoutParams( new TableLayout.LayoutParams(20,20) );
layout.setPadding(1,1,1,1);
for (int f=0; f<=3; f++) {
TableRow tr = new TableRow(this);
tr.setPadding(10,10,10,10);
for (int c=0; c<=3; c++) {
Button b = new Button (this);
b.setText(""+f+c);
b.setTextSize(10.0f);
b.setPadding(10, 10, 10, 10);
b.setTextColor(Color.rgb( 100, 200, 200));
b.setBackgroundColor(Color.BLUE);
b.setOnClickListener(this);
b.setWidth(24);
b.setHeight(24);
tr.addView(b);
} // for
layout.addView(tr);
} // for
super.setContentView(layout);
} // ()
I need to have matrix of buttons ( something like GridLayout in Java ). The problem in this code is that I don't have any space between columns in same row. How to add space between buttons in same row ?

I think you need to set margins for your buttons, because padding may only size down the top layer of the button and not its background. Here is an example how to do something similar in code: Programmatically set margin for TableRow
However in this example you need to change the parent container to TableRow, because layout parameters always refer to its immediate parent, which for your buttons is TableRow.

Related

setBackground to buttons in a table

I have a series of buttons, in tables, in a ViewFlipper, so I can paginate the tables. If I set them no background, they keep their margins between each other. But I need to "make them pretty", so I added a gradient to the buttons. But now they are not keeping their margins any longer.
I am adding them programatically, looping an ArrayList of the texts the button have to have, adding them in the proper row of the table, and so on. Like this:
final Button btn = new Button(this);
btn.setText(array.get(i));
btn.setTextSize(10);
btn.setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View v)
{
Log.i("TAG", "Botón pulsado: " + texto);
goToModule(texto);
}
});
btn.setHeight(height);
btn.setWidth(width);
btn.setOnTouchListener(parentListener);
btn.post(new Runnable()
{
#Override
public void run()
{
btn.setCompoundDrawablesWithIntrinsicBounds(null,getDrawableForText(texto),null, null);
btn.setPadding(0,35,0,0);
int[] colors = {Color.parseColor("#008000"),Color.parseColor("#ADFF2F")};
GradientDrawable gd = new GradientDrawable(
GradientDrawable.Orientation.TL_BR, colors);
gd.setCornerRadius(30f);
btn.setBackground(gd);
}
});
row1.addView(btn);
The result in the screen is like this:
Is there anyway to make the buttons look like the ones without the gradient, I mean, respecting the margins between each other, to make them look more like a proper table?
Thank you.
Try adding margin to button
TableRow.LayoutParams params = new TableRow.LayoutParams(
TableRow.LayoutParams.WRAP_CONTENT,
TableRow.LayoutParams.WRAP_CONTENT
);
params.setMargins(10, 10, 10, 10);
btn.setLayoutParams(params);
try change margin to padding in xml.

Create buttons in sequential order programmatically

I want to parse text, and create for each word - button, but i don't know how to arrange them one after the other
String s = "Alice was beginning to get very tired of sitting";
String[] q = s.split(" ");
for (int i = 0; i < q.length; i++) {
Button myButton = new Button(this);
myButton.setText(q[i]);
RelativeLayout layout = (RelativeLayout) findViewById(R.id.layout1);
layout.addView(myButton, params);
}
See this custom library: FlowLayout
While you're adding views inside FlowLayout, it automatically wraps when there is no space for the next item.
There's not much wrong about your approach, it's only that relative layout as name suggests requires child views to have some parameters to align the views relative to them e.g. above, below etc. As a result you are getting views overlapping each other and hence only the last added view is visible being on top.
Use FlowLayout instead and you'll be fine.
You need to define RelativeLayout parameters as in example below
Heres an example to get you started, fill in the rest as applicable:
TextView tv = new TextView(mContext);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_LEFT, RelativeLayout.TRUE);
params.leftMargin = 107
...
mRelativeLayout.addView(tv, params);
The docs for RelativeLayout.LayoutParams and the constructors are
here
From: How to add a view programmattically to RelativeLayout?
Check the link below to get more useful informations.
Hope it will help
In the following code, you should change the upper limits of the for, to a variable.
public class MainActivity
extends Activity
implements View.OnClickListener {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TableLayout layout = new TableLayout (this);
layout.setLayoutParams( new TableLayout.LayoutParams(4,5) );
layout.setPadding(1,1,1,1);
for (int f=0; f<=13; f++) {
TableRow tr = new TableRow(this);
for (int c=0; c<=9; c++) {
Button b = new Button (this);
b.setText(""+f+c);
b.setTextSize(10.0f);
b.setTextColor(Color.rgb( 100, 200, 200));
b.setOnClickListener(this);
tr.addView(b, 30,30);
} // for
layout.addView(tr);
} // for
super.setContentView(layout);
} // ()
public void onClick(View view) {
((Button) view).setText("*");
((Button) view).setEnabled(false);
}
} // class

Adding Buttons dynamically in RelativeLayout to LinearLayout

When the user inputs a word, he creates a number of Buttons equal to the length of the word. For example: if user inputs "aaaa" he will create 4 Buttons, side by side, in the first row. Then if the user enters "bb" he will create 2 Buttons, side by side, in the second row. And "ccc" he creates 3 Buttons...
Image to demonstrate:
I dynamically create a RelativeLayout, then dynamically add Buttons to that layout. And finally I add the RelativeLayout to my existing LinearLayout. But the problem is, only one Button is added per row. And my program currently looks like this:
Can someone please me fix this problem?
CODE:
final LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll_bttn_words);
final LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
button_test.setOnClickListener(
new View.OnClickListener()
{
public void onClick(View view)
{
RelativeLayout relativeLayout = new RelativeLayout(view.getContext());
RelativeLayout.LayoutParams rlp = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
int size = enter_txt.getText().toString().length(); //the user input number of buttons
int id = 1;
for (int i=0; i<size; i++)
{
Button myButton = new Button(view.getContext());
myButton.setBackgroundResource(R.drawable.button);
myButton.setId(id);
rlp.addRule(RelativeLayout.RIGHT_OF, myButton.getId());
relativeLayout.addView(myButton, rlp);
id++;
}
linearLayout.addView(relativeLayout, llp);
rlp.addRule(RelativeLayout.RIGHT_OF, myButton.getId());
This line says that myButton should be added to right of myButton, which doesn't make any sense.
simple way to resolve this is to use the following line instead
rlp.addRule(RelativeLayout.RIGHT_OF, myButton.getId()-1);
But this isn't the best way to do this, you should use LinearLayout with horizontal orientation instead.
The structure should be simple
Just need to add your buttons in 3 different linear layout with orientation horizontal.
Like
<Relative layout>{
<LinearLayout global container with vertical orientation >{
<LinearLayout for 'a' type buttons container with horizontal orientation>
<LinearLayout for 'b' type buttons container with horizontal orientation>
<LinearLayout for 'c' type buttons container with horizontal orientation>
}
}
You guys are right. It is much easier using a LinearLayout. For those interested
final LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll_bttn_words);
final LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
button_test.setOnClickListener(
new View.OnClickListener()
{
public void onClick(View view)
{
LinearLayout linearLayout2 = new LinearLayout(view.getContext());
linearLayout2.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams rlp = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
int size = enter_txt.getText().toString().length();
for (int i=0; i<size; i++)
{
Button myButton = new Button(view.getContext());
myButton.setBackgroundResource(R.drawable.button);
linearLayout2.addView(myButton, rlp);
}
linearLayout.addView(linearLayout2, llp);

table layout doesn't appear in the fragment?

I have created a fragment which should display table of buttons. I used table layout to create a table. But the button table doesn't display in the fragment. What is the problem related to this code and how can I overcome this???
public void onViewCreated(View view, Bundle savedInstanceState)
{
super.onViewCreated(view, savedInstanceState);
ArrayList buttons = new ArrayList();
ScrollView sv = new ScrollView(this.getActivity());
//Set a TableLayout to add buttons
TableLayout tl= new TableLayout(getActivity());
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
tl.setLayoutParams(params);
tl.setOrientation(TableLayout.HORIZONTAL);
for(int i=0;i<5;i++){
TableRow row=new TableRow(this.getActivity());
LayoutParams paramrow = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
row.setLayoutParams(paramrow);
for(int j=0;j<2;j++){
Button button = new Button(getActivity());
button.setText("testing");
button.setPadding(5, 5, 5, 5);
LayoutParams parab = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
button.setLayoutParams(parab);
row.addView(button);
buttons.add(button);
}
tl.addView(row);
}
sv.addView(tl);
}
You're using the wrong type of LayoutParams in at least two places. Views need to use the type of LayoutParams that correspond to their container. Therefore Views contained directly in a TableLayout - i.e., the TableRows - should use TableLayout.LayoutParams. The Views contained in TableRows - the Buttons, in this case - should use TableRow.LayoutParams. And finally, the TableLayout is in a ScrollView, so it should use ScrollView.LayoutParams, which is actually FrameLayout.LayoutParams, since ScrollView extends FrameLayout.
It also appears that you're not adding the ScrollView to the Fragment's View anywhere. I would mention, too, that it might be preferable to define the ScrollView and the TableLayout in layout xml, inflate this layout in onCreateView(), and dynamically create only what needs to be - i.e., the TableRows and Buttons.

How can we add buttons at dynamic positions in layout?

How can we add buttons at dynamic positions in layout or using canvas, not in table layout?
Can anyone please help me on this?
Use RelativeLayout to position your controls where you like them. Have a look at this link:
Dynamic TextView in Relative layout
and here
How to create a RelativeLayout programmatically with two buttons one on top of the other?
If you like to achieve it within XML only. Look here:
http://www.mkyong.com/android/android-relativelayout-example/
Here an example how you could use the RelativeLayout to position your controls dynamically:
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Creating a new RelativeLayout
RelativeLayout mainRelativeLayout = new RelativeLayout(this);
// Defining the RelativeLayout layout parameters with Fill_Parent
RelativeLayout.LayoutParams relativeLayoutParameters = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);
// Creating a new Left Button
Button buttonLeft = new Button(this);
buttonLeft.setText("Left");
// Creating a new Left Button with Margin
Button buttonLeftWithMargin = new Button(this);
buttonLeftWithMargin.setText("Left with Margin");
// Creating a new Center Button
Button buttonCenterParent = new Button(this);
buttonCenterParent.setText("Center");
// Creating a new Bottom Button
Button buttonBottom = new Button(this);
buttonBottom.setText("Bottom");
// Add a Layout to the Buttons
AddButtonLayout(buttonLeft, RelativeLayout.ALIGN_PARENT_LEFT);
AddButtonLayout(buttonCenterParent, RelativeLayout.CENTER_IN_PARENT);
AddButtonLayout(buttonBottom, RelativeLayout.ALIGN_PARENT_BOTTOM);
// Add a Layout to the Button with Margin
AddButtonLayout(buttonLeftWithMargin, RelativeLayout.ALIGN_PARENT_LEFT, 30, 80, 0, 0);
// Add the Buttons to the View
mainRelativeLayout.addView(buttonLeft);
mainRelativeLayout.addView(buttonCenterParent);
mainRelativeLayout.addView(buttonBottom);
mainRelativeLayout.addView(buttonLeftWithMargin);
// Setting the RelativeLayout as our content view
setContentView(mainRelativeLayout, relativeLayoutParameters);
}
private void AddButtonLayout(Button button, int centerInParent, int marginLeft, int marginTop, int marginRight, int marginBottom) {
// Defining the layout parameters of the Button
RelativeLayout.LayoutParams buttonLayoutParameters = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
// Add Margin to the LayoutParameters
buttonLayoutParameters.setMargins(marginLeft, marginTop, marginRight, marginBottom);
// Add Rule to Layout
buttonLayoutParameters.addRule(centerInParent);
// Setting the parameters on the Button
button.setLayoutParams(buttonLayoutParameters);
}
private void AddButtonLayout(Button button, int centerInParent) {
// Just call the other AddButtonLayout Method with Margin 0
AddButtonLayout(button, centerInParent, 0 ,0 ,0 ,0);
}
}
And you should get something like this:

Categories

Resources