Develop Reference

Adding a custom view multiple times in a layout

I have a custom XML file. I want to repeat this in a layout (say Relative) n number of times, dynamically (obviously).
I have seen many posts, but none helped. I am not looking for a ListView or Adapters or so. It's as simple as - A RelativeLayout. Inside it, adding the custom XML one above another. Any number of times.
With a static LinearLayout (Vertical orientation), adding the view dynamically results in rendering it once, not one below another. Don't know why. Although a TextView or so do repeat one below the other in a loop inside a LinearLayout (Vertical).
Then I dynamically created the layout (Relative), and inflated the custom XML. Displayed one. When I tried for another below the first it told me to remove child's parent first (Exception). If I do that and add again, its as good as removing the first rendered view and adding it again.
So how can I get multiple views in same layout?
A rough presentation of what I've attempted:
mainLayout = (RelativeLayout)findViewById(R.id.mainlay); //Mainlayout containing some views already
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.BELOW,R.id.sideLayout); //sideLayout is an existing LinearLayout within the main layout.
View child = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
RelativeLayout r1 = new RelativeLayout(this);
r1.setLayoutParams(params);
r1.addView(child);
mainLayout.addView(r1);
mainLayout.setLayoutParams(params);
mainLayout.addView( child);
/* r2 = new RelativeLayout(this);
r2.setLayoutParams(params);
r2.addView(contentLayout); [Gives exception] */

This is how it worked out for me...
Before that, the issue with android is:
If you add dynamic views inside a LinearLayout (Horizontal), they will appear horizontally with new created instances, added to the view.
However, shockingly, it's not the same in case of LinearLayout (Vertical orientation). Hence the whole mess.
Solution:
The RelativeLayout layout file was binded with the variable, somewhat like this:
customLay = (RelativeLayout) mainLay.findViewById(R.id.dynamicCustomLayout);
Then, a Dynamic RelativeLayout was created within which the former variable is added/wrapped.
customLayout = new RelativeLayout(this);
customLayout.addView(customLay);
Every layout is assigned an id:
customLayout.setId(i);
And then a loop is run (2 if conditions for i=0 and i>0)
for i>0 (indicates the 2nd dynamic layout, to be added below the first), LayoutParameter is created:
params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
And then for i>0, using the ids of dynamic views, they are added one below the other:
//Following code below used id to place these views below each other to attain list type arrangement of views//
// i==0 for first view on top//
if (i == 0) {
params.addRule(RelativeLayout.BELOW, R.id.sideLayout);
customLayout.setLayoutParams(params);
}
// i>0 for views that will follow the first top//
else {
params.addRule(RelativeLayout.BELOW, i - 1);
customLayout.setLayoutParams(params);
}
Then added to main root layout, where all these views or cards need to be displayed:
includeLayout.addView(customLayout);
Ofcourse, the code is not just this. I have written the essential points that helped me achieve the target and that may help others in future.
So the main essence was ---
using a Dynamic RelativeLayout, to
bind the static RelativeLayout, and
assigning ids to the Dynamic RelativeLayout wrappers, and
on basis of ids use RelativeLayoutParameters to place the following
ids below the previous ones.

You have to instanciate every child by itself
View child = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
r1.addView(child);
View child2 = getLayoutInflater().inflate(R.layout.dynamiccustomlayout,null);
r1.addView(child2);
//ok, i do a analog thing in obne of my apps. here is the code:
public class FlxForm extends LinearLayout {
public FlxForm(Context context) {
super(context);
inflater = LayoutInflater.from(context);
inflater.inflate(R.layout.flxform, this);
this.setPadding(0, 0, 0, 0);
container = (LinearLayout) this.findViewById(R.id.flxform);
this.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
//here is my funtion to calculate the items i want to add, its a little bit too complicated, but in the end it works like:
for(int i=0;i<10;i++){
View x = inflater.inflate(R.layout.dynamiccustomlayout,null);
container.addview(x);
}
}
}
XML for the Form
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/flxform"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:background="#android:color/transparent"
android:orientation="vertical" >
</LinearLayout>
Then you can instantiate a "Form" Objekt and add it into a ScrollView

For doing this You would have to nest your RelativeLayout inside a ScrollView and Manage all the Scrolling, items adding, memory management, etc manually.
So the simple solution for adding n Number of Custom Views is to use a RecyclerView, ListView, GridView, etc with a neat CustomAdapter and Your Custom View.
Here is a nice example of using RecyclerView with custom Adapter :
http://code.tutsplus.com/tutorials/getting-started-with-recyclerview-and-cardview-on-android--cms-23465
I hope this Helps.

Android - How to create a NxN layout dynamically, like Tic Tac Toe?

How can I make a layout dynamically like tic tac toe?
It must be dynamical because I want to make 3x3 squares, or 4x4 squares, or nxn squares.
I think I need 2 for-loops to do it, but what exactly and how to do it?

GridView seems to be the best option. It will work well even if the number of items change during runtime.
However, if you want to avoid GridView, Use a RelativeLayout as a parent and position the views of the child layouts as a grid using LEFT_OFF and BELOW similar properties.
A RelativeLayout would be better than hierarchy of LinearLayout as nesting of views may be bad. (Ref)

You can either use GridView which is simple to use but available only from api 14, or you can place n LinearLayouts in each n LinearLayouts which you can do in any api.
Here is a sample I made for nXn layouts should work(just replace the big_layout with the view you want this attached to).
public void createNxNLayouts(int n,int width,int height){
LinearLayout[] main_layouts = new LinearLayout[n];
for(int i=0;i<main_layouts.length;i++){
main_layouts[i] = new LinearLayout(this);
main_layouts[i].setOrientation(LinearLayout.HORIZONTAL);
main_layouts[i].setLayoutParams(new LinearLayout.LayoutParams(width,height/n));
bigLayout.addView(main_layouts[i]);
}
LinearLayout[][] secondary_layouts = new LinearLayout[n][n];
for(int i=0;i<secondary_layouts.length;i++){
for(int j=0;j<secondary_layouts[i].length;j++){
secondary_layouts[i][j] = new LinearLayout(this);
secondary_layouts[i][j].setOrientation(LinearLayout.HORIZONTAL);
secondary_layouts[i][j].setLayoutParams(new LinearLayout.LayoutParams(width/n,height/n));
main_layouts[i].addView(secondary_layouts[i][j]);
}
}
}

Handling an EditText that was added programatically

I've been making all of my views dynamically, and now I've come to the point where I want to add an EditText for people to write in.
I've been able to accomplish this for the most part, but it doesn't look right. I have a linear layout that I'm adding a relative layout to. I'm making the relative layout have a white background, then adding the EditText. Problem is, it always adds it to the direct center of the relative layout, and options to align it vertically to the top have so far failed.
I also need to be able to pull the text from it later when a separate button was pressed (I know how to make the button work, it's the pulling text from it part I'm a bit iffy on). Here's my code so far:
public void addEditText(LinearLayout L){
EditText myEditText = new EditText(c);
myEditText.setSingleLine(false);
RelativeLayout l1 = new RelativeLayout(c);
LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(scWidth1, 300);
lp.gravity=Gravity.CENTER;
l1.setLayoutParams(lp);
l1.setBackgroundColor(Color.WHITE);
l1.setGravity(Gravity.CENTER_VERTICAL);
l1.addView(myEditText);
L.addView(l1);
}

l1.setGravity(Gravity.CENTER_VERTICAL); places the EditText in center vertical of the parent container i.e RelativeLayout, remove that line.

Android Overlapping Image Views

I want to create this sort of a view where the cross should be separate image view as I want it to be clickable. How can I achieve this ?
It would be great If I can create this view programatically as I am a dynamic list of images and I am programatically creating the image Views. All I need now is to add the overlapping imageview as well.
Thanks in advance

Use FrameLayout and you can overlay views on top of each other
Ex:
FrameLayout frame = (FrameLayout) findViewById(R.id.frame);
ImageView image = new ImageView(this);
iv.setImageResource(R.drawable.image);
ImageView cross = new ImageView(this);
i.setImageResource(R.drawable.cross);
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
layoutParams.gravity = Gravity.RIGHT | Gravity.TOP;
i.setLayoutParams(layoutParams);
frame.addView(image);
frame.addView(cross);

Create a RelativeLayout programmatically, which contains two ImageViews. Place your image in the first one, and your second image in the second one. Adjust the margins accordingly to place it in the top right corner.

First create a completely new layout to use as an placeholder for example "partial_layout.xml". Then in your code first make a LayoutInflater with something like this:
LayoutInflater mInflater = (LayoutInflater) this.getSystemService(this.LAYOUT_INFLATER_SERVICE);
then try to get a fresh copy of this layout with something like this:
View convertView = mInflater.inflate(R.layout.partial_layout, null);
now put your current data to this view, and finally add this view to your content view.

If you create a list of views, you can still use XML by inflating it only when needed - just watch the lecture "the world of listView" in order to do it correctly. Using ListView is much more efficient than creating as many views as the number of items to show (for example, if there are 100 images to show, only those that are on screen need to be created).
Anyway, the xml can contain either FrameLayout or RelativeLayout as the root view, and you just put the 2 imageViews according to the right position you wish to have. You can use the UI designer for this, or edit the XML itself by adding margin-top for the larger image. also, make sure the larger image is written there before the small one.
as for the clicking, you can use setOnClickListener on the small imaveView.
BTW, if it's just images, you should probably use GridView instead of ListView.

Android button in arbitrary position over RelativeLayout

I'm trying to build an android application that features a graphical display drawn within a RelativeLayout. I want to place "+" and "-" buttons next to several of the parameters, which are drawn at various points on the canvas. The positions are free-form don't seem to conform to any of the standard XML layouts.
I know how to create the buttons programmatically, but I don't know how to place them over the canvas where I need them to be. I'm assuming that this would be done in the view thread's doDraw() method, after all the graphics have been drawn, but how?

I struggled with the same problem, and found out great solution.
RelativeLayout rules like "leftOf" or "rightOf" can be implemented programmatically like this:
RelativeLayout container = new RelativeLayout(getApplicationContext());
Button weight = new Button(getApplicationContext());
final int WEIGHT_ID = 0;
weight.setId(WEIGHT_ID);
weight.setText("0.0");
LayoutParams wrapBoth =
new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
container.addView(weight, wrapBoth);
Button increaseWeight = new Button(getApplicationContext());
increaseWeight.setText("+");
// Note the difference: RelativeLayout.LayoutParams in spite of LayoutParams
RelativeLayout.LayoutParams toBeRightOfWeight =
new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
container.addView(parameter,wrapBoth);
// Sweet part
clearAirParams.addRule(RelativeLayout.RIGHT_OF, WEIGHT_ID);
container.addView(increaseWeight, toBeRightOfWeight);
So, in code you can create a 'container' RelativeLayout, then add several Views with unique ID's and, finally, create RelativeLayout.LayoutParams object to achieve sweet-like-sugar methods for alignment, like in XML.