Develop Reference

Why are these buttons mis-aligned in a TableLayout?

I'm using a table layout to arrange some buttons. As long as I use the same font for all the labels they are properly aligned in each row.
For some buttons I'd like to use icons from a custom ttf font.
When I use such an icon, the button is placed slightly higher, like so:
(This image is scaled up to make the the problem more evident.)
I took measurements - the buttons appear to be of same height, regardless of the used font.
Why are the buttons not aligned properly?
Does anyone have a suggestion to get them aligned?
Thanks.
Following CommonsWare's advice (thanks for the quick replies!), I tried this:
final LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.gravity = Gravity.CENTER_VERTICAL;
row.setLayoutParams(layoutParams);
This did not work. Will try the base alignment comment next.

Add the following attribute to your TableRow:
android:baselineAligned="false"
By default, the button labels' base lines are vertically aligned which causes the offset you experience.

Android add View

I have the following problem:
The code below successfully adds my TextView to my custom RelativeLayout:
RectF rectRecord = getItemRect(trCurrent);
TextView tv = new TextView(this.getContext());
tv.setLeft((int)rectRecord.left);
tv.setRight((int)rectRecord.right);
tv.setTop((int)rectRecord.top);
tv.setBottom((int)rect.bottom);
addView(tv);
Unfortunately the methods ("setLeft,setRight,setTop,setBottom") aren't available on Android older than 3.0.
So I tried to add my TextView the alternative way:
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.setMargins((int)rectRecord.left, (int)rectRecord.top, (int)rectRecord.right, (int)rectRecord.bottom);
//tv.setLayoutParams(tv);
addView(tv, params);
Doing it that way does not show a child control ...
I already tried to change the class my host control derives from ViewGroup to LinearLayout, RelativeLayout and the deprecated AbsoluteLayout but always the same.
Also removed my custom onDraw and onMeasure and "setWillNotDraw(false);" but that didn't solved my problem.
Snippet 1 is displaying my child views.
Snippet 2 does not show a child.
Can anyone point to the solution for this problem?

Your margins are set to 1234 - that's 1234 dip (density independent PIXELS) and that is huge. Your control doesn't show up on the screen because margins are too big, and your control has no place to show on the screen.

Android: LinearLayout disappears due to spacing using weight?

Right, this is a strange problem I have been toying with for a while now, hopefully maybe I am missing something you guys can draw my attention to!
LinearLayouts seem to be disappearing once I add any spacing using views and defining the weight (a method which works elsewhere in the project).
I have a custom Dialog (extends Dialog). In the onCreate() I use the method setContentView(generateDialog()) which returns a vertical LinearLayout.
The LinearLayout has three elements, one row of four custom category buttons (LinearLayouts), one row of sorting buttons (also LinearLayouts) and one ListView which populates the rest of the dialog and refreshes based on which button is pressed.
All is functional and working fine. Except when I attempt to space the buttons out evenly using my spacer method:
Dialog.java:
LinearLayout catBtns = new LinearLayout(context);
catBtns.setOrientation(LinearLayout.HORIZONTAL);
catBtns.setBackgroundResource(R.drawable.btn_cat_gradient_bg);
catBtns.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT));
catBtns.addView(space(1));
cat1Btn = new CatButton(context,this,act,"CAT1");
catBtns.addView(cat1Btn);
catBtns.addView(space(1));
cat2Btn = new CatButton(context,this,act,"CAT2");
catBtns.addView(cat2Btn);
catBtns.addView(space(1));
cat3Btn= new CatButton(context,this,act,"CAT3");
catBtns.addView(cat3Btn);
catBtns.addView(space(1));
cat4Btn = new CatButton(context,this,act,"CAT4");
catBtns.addView(cat4Btn);
catBtns.addView(space(1));
The space() method:
private View space(int space) {
View view = new View(context);
LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(0,0);
p.weight = space;
view.setLayoutParams(p);
return view;
}
What confuses me is that I have been using this method throughout the project and can't find as to why the category LinearLayout DISAPPEARS COMPLETELY when I add the spacers in between each button.
I use the same technique for the sorting buttons and it works perfectly! I use the same technique in another part of the project using slightly different versions of the same buttons (they are different class files though, because the onClickListener and some other stuff is slightly different)
Anyone have any clue?

I tried to build this in XML and it works fine. A possible difference is, that you do not set any LayoutParams for your buttons. Try something like that for every button:
cat1Btn = new CatButton(context,this,act,"CAT1");
catBtns.addView(cat1Btn, new LinearLayout.LayoutParams(0,0));

Android Making a table look like I want

I am having a little bit of trouble making the table look like I intend to.
These are a few questions, but since they all refer to the picture below and the details I provide I thought they should all be in a single post.
Here is what I achieved so far:
The header row contains one element of type Button.
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT);
Button bt = new Button(getContext());
bt.setText("Column1");
mHeader.addView(bt, params);
mHeader.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
addView(mHeader);
The rest of the table is poulated like this:
(Messagerow extends TableRow and has a TextView member)
for(int i = 0; i < 100; i++) {
MessageRow mr = new MessageRow(getContext());
// stuff to set the TexView text and color
mr.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.WRAP_CONTENT, TableRow.LayoutParams.WRAP_CONTENT));
this.addView(mr);
}
1. How can I make the header row height be more like the rows?
2. How can I make the button occupy the full width of the row?
If the table is empty, no text rows just header, then the button matches the row width. As soon as I add a row of text, the column width is adapted but the button width is not.
3. How can I make the row fill the screen width? (MATCH_PARENT does not do it)
4. How can I draw a thin line between the table rows?
I tried to override the onDraw() function on MessageRow, but it never gets called, not even once.
Don't get me wrong. I am not asking that you do my work for me. These are issues I tried to solve by myself and googled them and read similar posts, but did not find an answer.Note: I find that UI design in Javascript for Android lacks clear control and clear documentation over all these little details.
Edit
This is how I create the table:
TableLayout mTable = new TableLayout(this);
HorizontalScrollView hview = (HorizontalScrollView) findViewById(R.id.hscroll);
populate(mTable);
mTable.setLayoutParams(new TableLayout.LayoutParams( TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
mTable.setBackgroundColor(Color.WHITE);
hview.addView(mTable);

How can I make the header row height be more like the rows?
Using the default Button there isn't much to do. The Button uses a nine-patch image that has some space between the button's text and the borders that you see. You could use a smaller font but that you'll probably look ugly. Another thing to try is using your own background for the Button and get rid of the default extra space(of the default nine-patch image) so the final height is near the height of the text from the TextViews. Or try to enforce a standard height for all rows using a fixed value.
How can I make the button occupy the full width of the row?
I think that you have more then one TextView in MessageRow so when you add the Button it moves to the first column(corresponding to the first TextView). If this is the case, make your Button span across the number of columns representing the number of TextViews in MessageRow:
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, TableRow.LayoutParams.WRAP_CONTENT);
params.span = 3; // if you have 3 `TextView` in the MessageRow
Button bt = new Button(getContext());
bt.setText("Column1");
mHeader.addView(bt, params);
If this is not the case add more details.
How can I make the row fill the screen width? (MATCH_PARENT does not do it)
As I said on one of your previous questions, I don't know why that happens(but I gave you some solutions there to overcome this issue). Also:
mHeader and the other MessageRow are children of a Tablelayout and the correct LayoutParams to use on them is the LayoutParams of the parent: TableLayout.LayoutParams and not TableRow.LayoutParams.
You add some TextView in the MessageRow(from what I seen in your previous questions), add those child views with TableRow.LayoutParams to MessageRow.
You use only WRAP_CONTENT for your LayoutParams everywhere in your code, you might want to set the width(the first parameter in the constructor) to FILL_PARENT/MATCH_PARENT
How can I draw a thin line between the table rows?
You could use a simple View that will act as a separator:
for(int i = 0; i < 100; i++) {
MessageRow mr = new MessageRow(getContext());
// stuff to set the TexView text and color
mr.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, TableLayout.LayoutParams.WRAP_CONTENT));
this.addView(mr);
View separator = new View(getContext());
separator.setLayoutParams(new TableLayout.LayoutParams(TableLayout.LayoutParams.FILL_PARENT, 3)));
separator.setBackgroundColor(Color.RED);
this.addView(separator);
}
Because you have 100 rows you could try to set a drawable with a separator line as the background for theTableRow(header and MessageRow) instead of the above method that adds another 100 Views to the layout.
Extra Note:
You have a lot of views to add to a single activity layout, you are talking about 100 rows, and if your MessageRow is more complex than a simple TextView(and I think it is) you could get in some performances problems. I suggest you take a look at the wonderful ListView widget.

Don't have a programming environment here, but I'll try and answer some of your questions.
The reason your header row (button) is taller than your test based rows is because the button requires more space and the row accomodates it. The default button has padding on both the top/bottom of the text. I think your best option is to create your own button, which gives you the additional benefit of being able to control the look and feel. It seems like other people have had this issue before: Can't get rid of bottom padding on button
Your button is set to wrap_content which means it won't be any bigger than it needs to be (It will grow/shrink so it can fit the text "Column1" or whatever you put there). Instead of making the Button WRAP, I suspect you'll need to make it FILL_PARENT.
It's not your Table Row that needs to fill the screen width, it's your table that needs to fill the screen. Wherever you define your table, it's probably set to WRAP_CONTENT for the Horizontal dimension. Set it to FILL_PARENT and your table should expand to the full width of whatever it's container is (In this case, it should expand the full width of the screen)
There are probably several different ways you can do this. One method I used somewhat recently is to utilize the View tag which essentially looks like a horizontal bar across the screen. Below is a link to how to implement it.
http://sonnygill.net/android/horizontal-rule/

How do I create marginless button bar in Android

I want my application to have button bar at the bottom, that is similar to this one (Motorola Defy+):
How can this be achieved? I've tried ButtonBar style with regular buttons in it, but they always have margin in this case.

By code:
Make the bar LinearLayout horizontal. Let´s say its name in code will be bbll.
LinearLayout.LayoutParams params = bbll.LayoutParams();
params.leftMargin=0;
params.rightMargin=0;
... or params.setMargins(0, 0, 0, 0);
bbll.setLayoutParams(params);
By layout simply set each margin to 0. That's all. If you have done it and it won't work, put the code here, please.
But you should set bbll.setPadding(0,0,0,0) , too. Or you'll see empty space between the bar (that is invisible) and the buttons. aqs has a good thought.