Android: 3 column layout with fluid width middle column - android

I have a table row that is the full width of the screen, which holds 2 textviews and a button.
Which I would ideally like to display as:
[Textview1][Textview2][Button]
Where Textview1 sticks to the left handside and the Button sticks to the right, with Textview2 filling the rest of the available space. I have been looking around but can't find any options that will automatically stretch to fit what is left.
Due to the nature of the app I have to add these table rows and their content automatically, so this is what I have so far.
for( Program element : sampleList)
{
LayoutParams trLP = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
LayoutParams timeLP = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT);
LayoutParams titleLP = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT);
LayoutParams moreInfoLP = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.FILL_PARENT);
//Table row to hold details
TableRow tr = new TableRow(this);
tr.setLayoutParams(trLP);
//Time
TextView time = new TextView(this);
time.setText(element.getTime());
timeLP.width=50;
timeLP.gravity=1;
time.setLayoutParams(timeLP);
//Title
TextView title = new TextView(this);
title.setText(element.getTitle());
title.setLayoutParams(titleLP);
//Button
moreInfo = new Button(this);
moreInfo.setText("More Info");
//Add to text views to table row
tr.addView(time);
tr.addView(title);
tr.addView(moreInfo);
holder.addView(tr, new TableLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
}
The above works but doesn't display as I would like obviously, because of the wrap_content on the middle textview, I know I could hardcode a width but would very much like to stay away from that scenario. Is what I'm attempting to achieve even possible with the current code I have?

You might want to try out the weight property of LayoutParameters. In your case, set the outer element's weights to 0 and the weight of the center element to 1. This should make the center element to take as much space as possible. However, the weight property sometimes works a bit strange.
Also take a look at this Q/A

I'd use Mig Layout for this (http://www.miglayout.com/ and https://github.com/saynomoo/mig4android) as it does make this sort of thing easier. I'm no expect but the fill and grow constraints look like they should do the job you need.

Related

Android: How to dynamically place views with relative spacing

I am dynamically placing views into a RelativeLayout. Currently, I am doing:
layoutParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(0, position, 0, 0);
relativeLayout.addView(textViewInstance, layoutParams);
where position is incremented by a fixed amount after each TextView object is added to the layout. The problem is that some of the TextViews contain long strings, which makes for awkward formatting on devices with smaller screen sizes because the string will spill into multiple lines and bleed into the whitespace.
Is there any way I can add these TextViews with spacing relative to the TextView right above it? I want to achieve something to the effect of:
layoutParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(0, previousTextViewInstance.bottomPixel + 50, 0, 0);
relativeLayout.addView(textViewInstance, layoutParams);
where previousTextViewInstance will be saved after each new TextView is added.
Is this possible?
Instead of setting margin for each view, you can dynamically add each view below the previous one in relative layout.
For that, first set an id for each of your textView.
firstTextView.setId(textView_id_1);
while adding second textView, set rule for layout params as:
layoutParams.addRule(RelativeLayout.BELOW, textView_id_1);
secondTextView.setLayoutParams(layoutParams);
secondTextView.setId(textView_id_2);

Android:How do I center TextView horizontally in LinearLayout Programatically

I have a textview view whose width doesn't cover all the parent's width. I have used valueTV.setGravity(Gravity.CENTER_HORIZONTAL);
and it puts the text in center of textview.
Now I want to take the whole textview in the center of the parent ( which apparently covers the whole scrren). How can it be done programatically. I want to align the textview to center.Basically I know a lot of questions have already been asked which are quite similar to this but not exactly the same as they didnot solve my problem.
// Make sure textview width match parent
// Use param: ViewGroup.LayoutParams.MATCH_PARENT
LinearLayout.LayoutParams layoutParams =
new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
// Make sure text is center
layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
linearLayout.addView(valueTV, layoutParams);
Hmmm... Try this perhaps
TextView tv = findViewById(R.id.yourTextView);
LinearLayout.LayoutParams layoutParams =
(LinearLayout.LayoutParams)tv.getLayoutParams();
layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
tv.setLayoutParams(layoutParams);

Dynamic interface using TableRows

I am developing an app that creates a dynamic interface according to a string set by the user.
The only thing I've got in my XML file, is a ScrollView, the rest is in java code:
ScrollView sv = (ScrollView)findViewById(R.id.sv);
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
TableLayout tl = new TableLayout(this);
TableRow[] tr = null;
Then I decipher a string, which will tell me how many buttons I need to add. Next to each Button should be a TextView. In a for-loop, I create the Buttons and the TextViews and add them to the TableRow, which I add to the TableLayout, which I add to the LinearLayout which I add to the ScrollView.
My problem is: I want the Buttons to be, say 200dp wide, followed by the TextView, but currently it takes the width from WRAP_CONTENT. Setting the size of the Button with RelativeLayout and setLayoutParams, does not work when I add it to the TableRow.
final float scale = getBaseContext().getResources().getDisplayMetrics().density;
int pixels = (int) (200 * scale + 0.5f);
RelativeLayout.LayoutParams rel_btn = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
rel_btn.height = pixels;
rel_btn.width = pixels;
btn.setLayoutParams(rel_btn);
tr[i].addView(btn);
tr[i].addView(tv);
tl.addView(tr[i]);
Does anyone have an idea on how to fix my problem with the TableLayout?
I've read that nested LinearLayouts might be a different approach, but I cant seem to find any java examples, only XML - and I need it to be dynamic.
What is the reason for using RelativeLayout.LayoutParams when your Button and TextView are the children of a TableRow? It should be like this:
TableRow.LayoutParams rel_btn = new TableRow.LayoutParams(pixels, pixels);
btn.setLayoutParams(rel_btn);
Also, do you really need the LinearLayout that wraps the TableLayout? If you're not using that LinearLayout for something else you should remove it to improve the views hierarchy.

creating a two column row

I am having difficulty creating a two column row. My requirements are that the first columns should take up 80% of the space, the second column 20%.
The first column text can be very long in which case it should wrap around but stay within 80% of the space. The second column is easier, its always going to remain short and will not require wrapping. But I want this second column to always be aligned vertically in the center to no matter how many times the first column wraps around.
How can I do this?
Here is what I have so far. I need to improve this so the second column text is aligned vertically at the top, and the second column is aligned horizontally to the right
LinearLayout m_panel = new LinearLayout (this);
m_panel.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
m_panel.setOrientation(LinearLayout.VERTICAL);
LinearLayout row_panel = new LinearLayout (m_panel.getContext());
row_panel.setWeightSum(1.0f);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
lp.setMargins(2,8,1,8);
row_panel.setLayoutParams(lp);
row_panel.setOrientation(LinearLayout.HORIZONTAL);
TextView subjectName = new TextView(middlePanel.getContext());
subjectName.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT, 0.2f));
subjectName.setText(someText);
row_panel.addView(subjectName);
TextView size = new TextView(middlePanel.getContext());
LinearLayout.LayoutParams lp2 = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT, 0.8f);
size.setLayoutParams(lp2);
size.setText(sometext);
row_panel.addView(size);

Set EditText to percentage of parents's width in LinearLayout

I have a LinearLayout class in which I have:
TexView | ImageView | EditText | ImageView.
I have the last ImageView all the way to the right side of the LinearLayout its wrapped in. The EditText runs very long and in some case pushes the last ImageView out of view (or so it seems to push it out of view).
I want to to have the EditText set to a percentage of the total width. I tried using weight with LinearLayout parameters but it seems to cause the view to get all out of wack. For example here it is for the EditText:
LinearLayout.LayoutParams lpEt = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT,
.50f);
All the other views follow suit but have lesser weights (.2, .2, .1) and they all add up to 1.0. But the LinearLayout row is never spaced correctly.
Should I find out the width of the parent (which is a ListView) and then set the width of the EditText explicitly based on the parent's width or is there a better way?
Im not sure what your linear layout orientation is but im guessing its horizontal. if so try this.
LayoutParams textViewParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
textView.setLayoutParams(textViewParams);
LinearLayout.LayoutParams editTextParams = new LinearLayout.LayoutParams(
0,LayoutParams.WRAP_CONTENT,1f);
editText.setLayoutParams(editTextParams);
LayoutParams imageViewParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
imageView.setLayoutParams(imageViewParams);
This will make the edit text to fill the remaining space between the textview and imageview. If you need something else, just modify the code a bit. When using weights, set the weight or height as 0 for which you are setting weight for.

Categories

Resources