Dynamically added views are overlapping in the relativelayout

Question

I am developing an application in which I have a button and on the click of that button I am creating a button dynamically. But the buttons are overlapping. All I want is to avoid overlapping of dynamically created views.

And in my case, use of RelativeLayout is must as I have to add Drag and Drop functionality to these dynamically created views. So no LinearLayout per se.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/btnAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="AddButton"
        android:text="Button" />

    <RelativeLayout
        android:id="@+id/relative_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/btnAdd" >

    </RelativeLayout>

</RelativeLayout>

MainActivity class

    public class MainActivity extends FragmentActivity {
    Button btnAddButton;
    RelativeLayout rl1;
    int i = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btnAddButton = (Button) findViewById(R.id.btnAdd);
        final RelativeLayout.LayoutParams layoutParam = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rl1 = (RelativeLayout) findViewById(R.id.relative_layout);

        btnAddButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                i++;
                 Button btn = new Button(getApplicationContext());
                    btn.setId(i);

                    if(i>0){
                        layoutParam.addRule(RelativeLayout.RIGHT_OF, (i-1));
                    }
                    btn.setText("Button" + i);
                    rl1.addView(btn, layoutParam);


            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

Answer 1

You should add rule to your relative layout's parameters for that:

btnAddButton.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {
        i++;
        Button btn = new Button(getApplicationContext());
        btn.setId(i);
        if(i>0){
            layoutParam.addRule(RelativeLayout.RIGHT_OF, (i-1));
        }
        btn.setText("Button" + i);
        rl1.addView(btn, layoutParam);

    }
});

This way, your buttons will be laid out on right of last button.

Hope this helps.

EDIT:

Try to take your LayoutParams inside loop. This is working fine for me:

RelativeLayout rl1 = (RelativeLayout) findViewById(R.id.rl);
for (int i = 0; i < 4; i++) {

    Button btn = new Button(getApplicationContext());
    btn.setId(i);
    RelativeLayout.LayoutParams layoutParam = new RelativeLayout.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    if (i > 0) {
        layoutParam.addRule(RelativeLayout.RIGHT_OF, (i - 1));
    }

    btn.setText("Button" + i);
    rl1.addView(btn, layoutParam);  
}

Screenshot:

EDIT

Even if you don't use loop, and add in button click, it should work:

int i = 1;
//this is a method being called on button's click:
public void add(View v) {
    Button btn = new Button(getApplicationContext());
    btn.setId(i);
    RelativeLayout.LayoutParams layoutParam = new RelativeLayout.LayoutParams(
            LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    if (i > 1) {

        layoutParam.addRule(RelativeLayout.RIGHT_OF, (i - 1));
    }

    btn.setText("Button" + i);
    rl1.addView(btn, layoutParam);
    i++;
} 

Hope this helps.

Answer 2

There are multiple ways to solve the issue.

Hide button and show it on click

No need to add the button dynamically . Just add two button one is visible and other invisible. And on click of btnAddButton simply show it..

      otherBtn.setVisibility(View.GONE);
      otherBtn.setVisibility(View.VISIBLE);// you can also set it in xml by visiblity="true"

Use LinearLayout instead

Take a LinearLayout instead of RelativeLayout it automatically add it to the right after setting it orientation and if it is not set then addRule as suggested by @Dhruti