How to place edittext in a new line when edge reached - android

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.

Related

Programmatically add Linear Layout

I am trying to add a new LinearLayout with a EditText element in it whenever a button on my app gets pushed. The xml I have is
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/app"
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"
android:orientation="vertical"
android:weightSum="1">
<EditText android:id="#+id/dish_name"
android:layout_width="match_parent"
android:layout_height="58dp"
android:hint="#string/dish_name"
android:background="#drawable/my_border"
android:paddingLeft="10dip"/>
<LinearLayout android:id="#+id/ingredient_list"
android:layout_width="match_parent"
android:layout_height="58dp"
android:weightSum="1"
android:layout_marginTop="20dp">
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="42dp"
android:hint="#string/edit_message"
android:background="#drawable/my_border"
android:layout_weight="1"
android:paddingLeft="10dip"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"
android:onClick="sendMessage" />
</LinearLayout>
</LinearLayout>
I am trying to duplicate the second LinearLayout along with the EditText inside of it. The java code I have so far is:
public void sendMessage(View view) {
LinearLayout layout = new LinearLayout(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
layout.setOrientation(LinearLayout.HORIZONTAL);
layout.setWeightSum(1f);
params.weight = 1.0f;
params.setMargins(0,20,0,0);
EditText editText = new EditText(this);
editText.setBackgroundResource(R.drawable.my_border);
editText.setHint(R.string.edit_message);
editText.setLayoutParams(params);
LinearLayout container = (LinearLayout)findViewById(R.id.app);
container.addView(editText);
}
The problem I am running into is that when I click the button I get the following:
AppImage
I want the EditText box to be the same height as the one I have defined in the xml but it takes up the entire screen.
Any ideas?
No need to re-define the layout entirely within Java. You should define it as its own XML file. Call it ingredient_input.xml
For example, feel free to modify. This is one "row" for the EditText and button, so a horizontal layout. Could also be a RelativeLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:weightSum="1"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="42dp"
android:hint="#string/edit_message"
android:background="#drawable/my_border"
android:layout_weight="1"
android:paddingLeft="10dip"/>
<Button
android:id="#+id/btnAddMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"/>
</LinearLayout>
First, you need to get the parent linear layout
LinearLayout ll = (LinearLayout) findViewById(R.id.ingredient_list);
Then, you can inflate the XML file for the "input row"
LayoutInflater inflater = LayoutInflater.from(MainActivity.this); // some context
View row = inflater.inflate(R.layout.ingredient_input, null);
You can also find the button, then set its click listener
row.findViewById(R.id.btnAddMore).setOnClickListener(...); // TODO
Then, just add that view onto the parent linear layout
ll.addView(row);
Realistically, you really could be using a ListView with an Adapter instead.
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
In the code above, you have the height set to match_parent and widht set to wrap_content. Instead, try setting the height and the width to match your xml. The height should be 58dp and the width should be match parent.
Hope this helps!
I haven't the time to test this but you can try:
// assuming you have variables for ingredient_list and edit_message
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)ingredientList.getLayoutParams();
LinearLayout.LayoutParams editTextParams = (LinearLayout.LayoutParams)editMessage.getLayoutParams();
You can then use these instead of creating the parameters.
P.S. you don't have a specified orientation in your ingredient_list in the xml.

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.

Center text in EditText not working programmatically when adding background resource

I am working on an app that inserts an EditText box programmatically onto the layout. I cannot seem to get the center text working when I add the EditText programmatically but it works fine when I do it through the XML layout. I have nailed down the problem to be when I add the background resource. I have added code below to show both EditText when added through code and also XML.
<LinearLayout
android:id="#+id/layoutLinear_main"
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"
android:orientation="vertical"
android:background="#drawable/background" >
<LinearLayout
android:id="#+id/layoutLinear_answerDisplay"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:orientation="vertical" >
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:gravity="center"
android:background="#drawable/background_field"
android:layout_gravity="center"
android:layout_marginLeft="120dp"
android:layout_marginRight="120dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:textSize="30dp"
android:hint="F"
android:text="F" />
</LinearLayout></LinearLayout>
Then within the main code. I add an EditText programmatically. I've removed the margins and paddings, just to clearly identify the issue.
LinearLayout layoutLinear_answerDisplay = ((LinearLayout) this.findViewById(R.id.layoutLinear_answerDisplay));
EditText ed = new EditText(this);
ed.setGravity(Gravity.CENTER);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
layoutParams.gravity = Gravity.CENTER;
ed.setLayoutParams(layoutParams);
ed.setBackgroundResource(R.drawable.background_field);
ed.setTextSize(30);
ed.setHint("F");
ed.setText("F");
layoutLinear_answerDisplay.addView(ed);
The following is then the ouptut. You can see from the image that the top EditText has centered text (this was done through the XML code). You can see from the bottom EditText, that the text is off centered (done through the code behind).
I have also attached my background resource for the EditText. Any help would be greatly appreciated. Thanks
It looks like you're using the layout_margin (Left & Right) to center the xml edittext. when you set those in code you're not taking into account the dp scaling.
final int width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
(float) 120.0, getResources().getDisplayMetrics());
use something like the above to scale your 120 measure to the correct pixel equivalent and then they will be in the same place. But realize also that you shouldn't need to use such high values for the left/right margins to get your text centered

Display title on top of image inside horizontal scrollview Programatically

I am trying to add a text view to an imageview inside a horizontal scrollview programatically. However, this does not seem to work.
Sample Image on in RelativeLayout without scrolling:
Here is a sample image in horizontal scrolling:
Here is my xml layout:
<HorizontalScrollView android:id="#+id/home_horizontal_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/middle_menu_title" >
<LinearLayout android:id="#+id/home_linear_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
Inside my test code:
LinearLayout layout = (LinearLayout)findViewById(R.id.home_linear_layout);
for(int i = 0 ; i < 10; i++){
ImageView myView = new ImageView(this);
myView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
myView.setAdjustViewBounds(true);
myView.setScaleType(ScaleType.FIT_XY);
myView.setPadding(0, 2, 2, 0);
myView.setImageResource(R.drawable.render);
layout.addView(myView);
TextView text = new TextView(this);
text.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 50));
text.setBackgroundColor(Color.parseColor("#4000"));
text.setTextColor(Color.WHITE);
text.setGravity(Gravity.CENTER);
text.setText("Header Title");
layout.addView(text);
I have also tried using Relative Layout inside the horizontal scrollview without any success.
Inside a simple relative layout like below , I am able to display the title and image but not when it is in the horizontal scrollview
<RelativeLayout android:id="#+id/top_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/menu_title"
android:background="#drawable/background_gradient">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dip"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/render" />
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#4000"
android:gravity="center"
android:text="Image Title"
android:textColor="#FFFFFF" />
</RelativeLayout>
Any advise?
There is a problem in your layout :
you say to the LinearLayout parent view to take a width according to its children :
using android:layout_width="wrap_content"
then you say the children to take a width according to the parent :
using LayoutParams.MATCH_PARENT
you have to understand that it can't give a predictible result since they both depend to each other.
I think if you set the width to LayoutParams.WRAP_CONTENT on the children it will solve the issue :
ImageView myView = new ImageView(this);
myView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT));
myView.setAdjustViewBounds(true);
myView.setScaleType(ScaleType.FIT_XY);
myView.setPadding(0, 2, 2, 0);
myView.setImageResource(R.drawable.render);
layout.addView(myView);
TextView text = new TextView(this);
text.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, 50));
text.setBackgroundColor(Color.parseColor("#4000"));
text.setTextColor(Color.WHITE);
text.setGravity(Gravity.CENTER);
text.setText("Header Title");
layout.addView(text);
EDIT : seen the edit from the question, LinearLayout can't be the good answer because it doesn't allow children overlapping.
You can easily add an image to a TextView without putting it in a new parent layout by using the compoud drawables :
myTextView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.left, 0, 0, 0);
Put 0 to remove drawable,
You can put a drawable on any side (left, top, right, bottom)
see the documentation here, it may help you.
the size of the drawable has to match your needs since it use (as it says) the drawable intrinsic bounds.
if you don't have any other view in your LinearLayout than a image and a text, it's advised to use compound drawables for optimizations.
EDIT : seen the edit in the question : the compound drawable can't be the answer if you need to overlap your image and your text.

How to get two edit text boxes side by side through java code?

Problem solved
now i want to define one edit text to left and other to right...
i tried doing that but didnt work.. when i do fill_parent.. it just show one edit text.. on one line where it shows both of them side by side when i do wrap_content..
now what i want to do is.. have both edit text boxes define certain size and position left and right.. which i tried implementing didnt work??
You need to change the layout from vertical to horizontal in your layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
...
You can also position elements within the layout using the gravity setting. So to position the button in the middle you could use:
<Button android:layout_width="wrap_content"
android:gravity="center"
...
Update: to put two buttons in each row, side by side, simply nest the LinearLayout elements, e.g.
<LinearLayout android:orientation="vertical" ...>
<LinearLayout android:orientation="horizontal" ...>
<Button ... />
<Button ... />
</LinearLayout>
<LinearLayout android:orientation="horizontal" ...>
<Button ... />
<Button ... />
</LinearLayout>
</LinearLayout>
Just create a new linear layout, add the EditTexts to that, then add the new linear layout to your existing layout.
public void onClick(View v) {
EditText t = new EditText(PlusbuttonActivity.this);
EditText a = new EditText(PlusbuttonActivity.this);
LinearLayout l = new LinearLayout(PlusbuttonActivity.this);
t.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
a.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
l.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
l.addView(t);
l.addView(a);
addViewToRoot(l);
}
Basically, you're just reproducing the same structure you would need to produce the layout in your XML.

Categories

Resources