shortcut for equal weights to all elements in Android LinearLayout - android

Is there any shortcut for making a LinearLayout that gives equal weight to all of its children?
I need to dynamically add views to a linear layout and I want to give equal weights to all of them. Is there any way to to this rather than programmatically add layoutparams to all of the children and then programmatically set the weightSum of the layout to be the number of elements inside the layout?

For that you can give weightsum to linear layout and divide it into equal parts by giving layout_weight to all your views inside linear layout. For example:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="3">
<View
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
/>
<View
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
/>
<View
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="1"
/>
</LinearLayout>

Here is some code you can try:
LinearLayout ll = (LinearLayout)findViewById(R.id.linearlayout);
int childcount = ll.getChildCount();
for (int i=0; i < childcount; i++){
View v = ll.getChildAt(i);
LinearLayout.LayoutParams loparams = (LinearLayout.LayoutParams) v.getLayoutParams();
// Set only target params:
loparams.height = 0;
loparams.weight = 1;
v.setLayoutParams(loparams);
}

Ok, it turned out that the weightSum is OPTIONAL, meaning that i could just set weight of all element to be 1 and never needed to touch the weightSum parameter.
thanks you guys for your help!

Related

How to place edittext in a new line when edge reached

I am creating textviews programatically with code below. My problem is that they are all squeezed together in one line whereas I want that when the edge is reached, they immediately go to the next line.
LinearLayout ll = (LinearLayout) view.findViewById(R.id.linearlayout_answerboxes);
final EditText[] answerboxes = new EditText[answerSplit.size()];
final LinearLayout.LayoutParams lparams = new LinearLayout.LayoutParams(125, LinearLayout.LayoutParams.WRAP_CONTENT);
for (int i = 0; i<answerSplit.size(); i++) {
answerboxes[i] = new EditText(getActivity());
answerboxes[i].setLayoutParams(lparams);
answerboxes[i].setGravity(Gravity.CENTER);
ll.addView(answerboxes[i]);
}
current behavior
wanted behavior
my current workaround is to use a second linearlayout for the second line but was wondering if there was a way to manipulate the first linearlayout so that a second linearlayout won't be needed.
Measure your width of a screen and measure your edit text width with margins etc. And you can calculate whether is enough space for a new edittext or not.
When have reached an edge I would add a new linear layout.
In an xml it would look like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--Your edit texts from first row-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--Your edit texts from second row-->
</LinearLayout>
.....
</LinearLayout>
You could add as much rows as you want.

Dynamic creation of Table layout that auto fits cells according to screen size.

I am trying to display 9 images on my screen in 3x3 matrix format so that it fits to screen perfectly.
I am able to get the desired result using xml, but I am not able to replicate the same by creating controls through code.
(3 columns fit to my screen perfectly but the rows are not resizing to fit to screen)
Please suggest a way through which I can create dynamic controls through code and get the desired results.
Note : I want everything to fit in my screen in a matrix format, but without scrollbars. (I was unable to achieve this using grid layout)
Here is my xml :
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<TableRow
android:gravity="center"
android:layout_weight="1">
<ImageView
android:layout_width="1dp"
android:layout_height="match_parent"
android:src="#drawable/icon"
android:layout_weight="1"
android:layout_gravity="center"/>
<ImageView
android:layout_width="1dp"
android:layout_height="match_parent"
android:src="#drawable/encrypt"
android:layout_weight="1"
android:layout_gravity="center"/>
<ImageView
android:layout_width="1dp"
android:layout_height="match_parent"
android:src="#drawable/gear"
android:layout_weight="1"
android:layout_gravity="center"/>
</TableRow>
<TableRow
android:gravity="center"
android:layout_weight="1">
.
.//Same as row 1
</TableRow>
<TableRow
android:gravity="center"
android:layout_weight="1">
.
.//Same a row 1
</TableRow>
</TableLayout>
This produces an output in matrix format, resizing cells to fit to screen.
But I am not able to replicate the same result when I am creating controls through code. This is code that I am using :
TableLayout simple_game = new TableLayout(this);
simple_game.setLayoutParams(new TableLayout.LayoutParams(
TableLayout.LayoutParams.MATCH_PARENT,
TableLayout.LayoutParams.MATCH_PARENT));
for(int i=0;i<3;i++)
{
TableRow tr = new TableRow(this);
simple_game.addView(tr);
TableLayout.LayoutParams trPara = new TableLayout.LayoutParams();
trPara.weight = 1f;
trPara.gravity = Gravity.CENTER;
tr.setLayoutParams(trPara);
for(int j=0;j<3;j++)
{
ImageView iv = new ImageView(this);
iv.setImageResource(I[i][j]);
tr.addView(iv);
TableRow.LayoutParams trPara2 = new TableRow.LayoutParams();
trPara2.width = 1;
trPara2.height = ViewGroup.LayoutParams.MATCH_PARENT;
trPara2.weight = 1f;
trPara2.gravity = Gravity.CENTER;
iv.setLayoutParams(trPara2);
}
}
setContentView(simple_game);
Using this code, the columns are resizing themselves to fit to screen but the rows are not resizing.
The answer is LinearLayout and the weight attribute.
You can:
Dynamically add a LinearLayout 'horizontal'.
Add 3 LinearLayout s 'vertical' to the horizontal layout.
Add 3 images to each of the vertical layouts.
Set the weight of each vertical layout to 1.
Set the weight of each image to 1.
Note: weight doesn't work well with grid layout until API level 21 or 22, so if that is your target grid layout might be the way to go.
This explains creating layouts dynamically.

How to change layout_weight in my View (programmatically)

How can I use Java code to change the layout_weight of my View object from XML? I've included the last thing I tried below. vynosy is my attribute with value that I want to set.
View hospVyslLineAppColor = (View) view.findViewById
(R.id.hospodarsky_vysledok_line_appcolor);
hospVyslLineAppcolor.setLayoutParams(new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT,
Math.abs((float)vynosy)));
My XML:
<View
android:id="#+id/hospodarsky_vysledok_line_appcolor"
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_weight="69382"
android:background="#a8a8a8" />
You can use this for linearlayout
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT;
params.weight = 1;
I think that this will help you... Set Width Programatically on SO
but i think that is not possible to change this property programmatically but is only possible to set a new Layout(View in generally) within the new property.
You need to understand how the Layout_weights work. These are effective only if you have more than one views. Your code is correct, just you need to add one more view. Both declared in a linear layout. The layout in which you need to have the weights applied.
View hospVyslLineAppColor = (View) view.findViewById (R.id.hospodarsky_vysledok_line_appcolor);
hospVyslLineAppcolor.setLayoutParams(new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT,
Math.abs((float)vynosy))); // see to it the value of vynosy is less than 1
View hospVyslLineAppColor1 = (View) view.findViewById (R.id.hospodarsky_vysledok_line_appcolor);
hospVyslLineAppColor1.setLayoutParams(new LinearLayout.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT,
(1 - Math.abs((float)vynosy)))); // Will complement the weight
And re-wite your XML file:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- layout_height is 0dp as height is to be set by weight factor -->
<View
android:id="#+id/hospodarsky_vysledok_line_appcolor"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:background="#a8a8a8" />
<!-- layout_height is 0dp as height is to be set by weight factor -->
<View
android:id="#+id/hospodarsky_vysledok_line_appcolor1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.6"
android:background="#a8a8a8" />
</LinearLayout>

Strange scaling of imagebutton in last column of TableLayout

I'm using a TableLayout with 3 rows, and 3 imagebuttons in each row. I want to keep the aspect ratio of the images.
I have defined a layout like this:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#000000"
android:padding="0dp" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="0dp" >
<ImageButton
android:layout_weight="1"
android:adjustViewBounds="true"
android:contentDescription="#string/Cell"
android:padding="0dp"
android:scaleType="fitCenter"
android:src="#drawable/empty" >
</ImageButton>
<!-- Two more images like above -->
</TableRow>
<!-- Two more rows like above -->
</TableLayout>
With this layout, I get something like this:
http://i.stack.imgur.com/reoSd.png
As you can see, strange holes between rows in the last column appear. I dont know why, but if I change the TableLayout margin to 0dp, this problem dissapears:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#000000"
android:padding="0dp" >
And the result:
http://i.stack.imgur.com/Jytix.png
Why this behavior? What I am doing wrong? I have tested this, with many devices on the emulator and I always get the same. As additional information, I have printed the size and padding of the images of the last column and the first dinamically with getHeight() and getWidth()..., and i always get exactly the same.
I had this issue, you should use relative layout instead... If you still want to use Table layout, try :
TableLayout tableView = (TableLayout) findViewById(R.id.tableView);
TableRow row = (TableRow) inflater.inflate(R.layout.tablerow, tableView, false);
ImageView imgDis = (ImageView) row.findViewById(R.id.spinnerEntryContactPhoto);
imgDis.setPadding(5, 5, 5, 5);
imgDis.setAdjustViewBounds(true);
// set row height width
TableRow.LayoutParams params = new TableRow.LayoutParams(TableRow.LayoutParams.FILL_PARENT, 50);
params.topMargin = 0;
params.bottomMargin = 0;
params.leftMargin = 0;
params.rightMargin = 0;
Hope this help

how to avoid overlapping of dynamically positioned views

how to avoid overlapping of dynamically positioned views?
I have a RelativeLayout , and i am adding views dynamically(at runtime) at particular position(x,y coordinates) but the problem is the views are overlapping.
How to avoid this.
Thanks in advance.
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/rl_main"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/ll_mainBottom"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</ScrollView>
javacode
ll_main = (RelativeLayout) findViewById(R.id.rl_main);
if (views[3].equals("textView")) {
TextView tv_new = new TextView(TenMinActivity.this);
// location
int x = Integer.parseInt(views[12]);
int y = Integer.parseInt(views[13]);
String bgColor = "#" + views[4];
String fgColor = "#" + Views[5];
tv_new.setBackgroundColor(Color.parseColor(bgColor)); // Bg Color
tv_new.setTextColor(Color.parseColor(fgColor)); // Text color
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
width, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = x;
params.topMargin = y;
ll_main.addView(tv_new, params);
}else if(views[3].equals("edittext")){
....
}
Give
android:paddingLeft=""
and to each element so that the ones to the left most of the screen will have bit of space. and the ones to the right,give
android:paddingBottom=""
First,check the first 2 elements that is the name text and your text field after that you can proceed to the rest.
I can guide you better,if you post your code
Check this,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Name"
android:textSize="18sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/textView1"
android:layout_alignParentTop="true"
android:layout_marginLeft="21dp"
android:layout_toRightOf="#+id/textView1"
android:ems="10"
android:padding="10dp"
android:paddingl="10dp" >
<requestFocus />
</EditText>
</RelativeLayout>
You need to learn how layouts work, first try to make the same layout in xml. Then you will learn that this kind of layout can easily be made using LinearLayout.
You can use parent LinearLayout and add sublayouts to it. Now you say if you use LinearLayout all subviews are shown vertically. It shows vertically because you are adding them one by one. If you take a RelativeLayout and add your TextView and EditText to it and then add that RelativeLayout to your LinearLayout, you will get the desired result.
<LinearLayout>
<RelativeLayout>
<TextView />
<EditText />//use layout_margin or layout_toLeftOf for moving to to right
</RelativeLayout>
<RelativeLayout>
<TextView/>
<EditText/>
</RelativeLayout>
</LinearLayout>
Please use Layout params like layout_below layout_above toRightof and ToLeftof when you add a view to container relative layout
https://stackoverflow.com/a/5191159/1911784
you an use below code to add views in your layout
RelativeLayout.LayoutParams newParams = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
TextView text2 = new TextView(context);
newParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
newParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
newParams.addRule(RelativeLayout.ALIGN_BOTTOM, text1.getId());
text2.setLayoutParams(newParams);
layout.addView(text2);
where layout is your main layout.
you can use other params as well - like rightof, leftof etc

Categories

Resources