Search code examples
androidandroid-layoutalignment

How to horizontally align some programmatically added views?


I have designed a layout as in the image below:

image

After entering text in the EditText, when I press the Add+ Button the TextView and Button will be added as shown in the image below:

image

I want to show the Button on the right side of the TextView. How should I do this? Another question, how should I remove corresponding View when user clicks a button? The code:

 public class ExampleActivity extends Activity {
    private LinearLayout mLayout;
    private EditText mEditText;
    private Button mButton;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mLayout = (LinearLayout) findViewById(R.id.linearLayout);
        mEditText = (EditText) findViewById(R.id.editText);
        mButton = (Button) findViewById(R.id.button);
        mButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                mLayout.addView(createNewTextView(mEditText.getText()
                        .toString()));
                mLayout.addView(createNewButton());
            }
        });

    }

    private TextView createNewTextView(String text) {
        final LayoutParams lparams = new LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        final TextView textView = new TextView(this);
        textView.setLayoutParams(lparams);
        textView.setText("New text: " + text);
        return textView;
    }

    private Button createNewButton() {
        final LayoutParams lparams = new LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        final Button button = new Button(this);
        button.setLayoutParams(lparams);
        button.setText(" - ");
        return button;
    }
  }

Solution

  • The TextViews and Buttons are stacked because you probably use a LinearLayout with the orientation vertical. You could wrap your TextView + Button into a LinearLayout and then add this LinearLayout to your own layout or you could use a TableLayout like below(I've added some ids so you can delete the rows you want):

    public class SomeActivity extends Activity {
    
        private EditText mInput;
            private TableLayout mTable;
            private static int sCount = 0;
    
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
                Button addButton = (Button) findViewById(R.id.add);
                mInput = (EditText) findViewById(R.id.editText1);
                mTable = (TableLayout) findViewById(R.id.table1);
                addButton.setOnClickListener(new OnClickListener() {
    
                    @Override
                    public void onClick(View v) {
                        mTable.addView(addRow(mInput.getText().toString()));
                    }
                });
            }
    
            private TableRow addRow(String s) {
                TableRow tr = new TableRow(this);
                tr.setId(1000 + sCount);
                tr.setLayoutParams(new TableLayout.LayoutParams(
                        TableLayout.LayoutParams.FILL_PARENT,
                        TableLayout.LayoutParams.WRAP_CONTENT));
                TableRow.LayoutParams tlparams = new TableRow.LayoutParams(
                        TableRow.LayoutParams.WRAP_CONTENT,
                        TableRow.LayoutParams.WRAP_CONTENT);
                TextView textView = new TextView(this);
                textView.setLayoutParams(tlparams);
                textView.setText("New text: " + s);
                tr.addView(textView);
                TableRow.LayoutParams blparams = new TableRow.LayoutParams(
                        TableRow.LayoutParams.WRAP_CONTENT,
                        TableRow.LayoutParams.WRAP_CONTENT);
                final Button button = new Button(this);
                button.setLayoutParams(blparams);
                button.setText(" - ");
                button.setId(2000 + sCount);
                button.setOnClickListener(new OnClickListener(){
    
                    @Override
                    public void onClick(View v) {               
                        mTable.removeView(findViewById(v.getId() - 1000));
                    }           
                });
                tr.addView(button);
                sCount++;
                return tr;
        }
    
    }
    

    where the main layout file is:

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    
        <LinearLayout
            android:id="@+id/parent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
    
            <EditText
                android:id="@+id/editText1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
    
            <Button
                android:id="@+id/add"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
    
            <TableLayout
                android:id="@+id/table1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </TableLayout>
        </LinearLayout>
    
    </ScrollView>
    

    If for some reason, you don't like the TableLayout use a LinearLayout to wrap you TextView and Button with the layout file above(and of course remove the TableLayout):

    //...
    ll = (LinearLayout) findViewById(R.id.parent);
            addButton.setOnClickListener(new OnClickListener() {
    
                @Override
                public void onClick(View v) {
                    //where ll is the LinearLayout with the id parent
                    ll.addView(addRow(mInput.getText().toString()));
                }
            });
        }
    
        private LinearLayout addRow(String s) {
            LinearLayout tr = new LinearLayout(this);
            tr.setId(1000 + sCount);
            tr.setLayoutParams(new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.FILL_PARENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT));
            LinearLayout.LayoutParams tlparams = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            TextView textView = new TextView(this);
            textView.setLayoutParams(tlparams);
            textView.setText("New text: " + s);
            tr.addView(textView);
            LinearLayout.LayoutParams blparams = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT,
                    LinearLayout.LayoutParams.WRAP_CONTENT);
            final Button button = new Button(this);
            button.setLayoutParams(blparams);
            button.setText(" - ");
            button.setId(2000 + sCount);
            button.setOnClickListener(new OnClickListener(){
    
                @Override
                public void onClick(View v) {               
                    ll.removeView(findViewById(v.getId() - 1000));
                }           
            });
            tr.addView(button);
            sCount++;
            return tr;
        }