Android - RelativeLayout - Side-by-Side Button

Question

I'm trying to display two buttons side by side in an RelativeLayout which is then added to a LinearLayout but the result is the two buttons on top of each other like this:

Here's my code:

DisplayMetrics displaymetrics = new DisplayMetrics();
        (getActivity()).getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        int height = displaymetrics.heightPixels;
        int width = displaymetrics.widthPixels;


        LinearLayout ll = (LinearLayout) getActivity().findViewById(R.id.music_layout);
        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

        lp.setMargins(Gravity.CENTER, 10, Gravity.CENTER, 10);

        JSONObject[] jsons = new JSONObject[arrays.size()];
        arrays.toArray(jsons);
        Button [] play = new Button[jsons.length];
        Button [] stop = new Button[jsons.length];
        Button [] song_name = new Button[jsons.length];

        for(int i =0; i < jsons.length; i++){
            play[i] = new Button(getActivity());
            stop[i] = new Button(getActivity());
            song_name[i] = new Button(getActivity());

            String track_name= "error", url= "error";
            try {
                track_name = jsons[i].getString("track_name");
                url = jsons[i].getString("track_link");
            } catch (JSONException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            song_name[i].setText(track_name);
            play[i].setText("Play");
            stop[i].setText("Stop");

            song_name[i].setGravity(Gravity.LEFT);
            play[i].setGravity(Gravity.CENTER);
            stop[i].setGravity(Gravity.CENTER);

            song_name[i].setTextColor(getActivity().getResources().getColor(R.color.white));
            play[i].setTextColor(getActivity().getResources().getColor(R.color.white));
            stop[i].setTextColor(getActivity().getResources().getColor(R.color.white));

            song_name[i].setBackgroundResource(R.drawable.button_shape);
            play[i].setBackgroundResource(R.drawable.button_shape);
            stop[i].setBackgroundResource(R.drawable.button_shape);

            ll = (LinearLayout) getActivity().findViewById(R.id.music_layout);

            lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
            lp.setMargins(Gravity.CENTER, 10, Gravity.CENTER, 10);
            ll.addView(song_name[i], lp);

            RelativeLayout rl2 = new RelativeLayout(getActivity());

            RelativeLayout.LayoutParams lp2 = new RelativeLayout.LayoutParams(
                    width/2,
                    RelativeLayout.LayoutParams.MATCH_PARENT);

            lp2.addRule(RelativeLayout.LEFT_OF, stop[i].getId());
            lp2.setMargins(0, 5, Gravity.CENTER, 10);
            rl2.addView(play[i], lp2);

            RelativeLayout.LayoutParams lp3 = new RelativeLayout.LayoutParams(
                    width/2,
                    RelativeLayout.LayoutParams.MATCH_PARENT);
            lp3.addRule(RelativeLayout.ALIGN_RIGHT);
            lp3.setMargins(0, 5, Gravity.CENTER, 10);
            rl2.addView(stop[i], lp3);

            ll.addView(rl2, lp);                
        }

Where am I going wrong please?

Answer 1

Take into account that "to the left" means that the start of one view is the left edge of the relative layout.. and the layouts are written from left to right so...

Instead of say "start the lp2 on the left edge of rl2"... which is what your are getting, say that "start the right view when the left view ends".

So instead of this:

lp2.addRule(RelativeLayout.LEFT_OF, stop[i].getId());

Say that right p 2 is on the right of left p 2:

 rl2.addRule(RelativeLayout.RIGHT_OF, id);

If you have a xml layout the next example shows the second text view on the right of the second.. maybe it helps:

<TextView
        android:id="@+id/characteristicDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_toRightOf="@id/characteristicImage"
        android:text="@string/no_description"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/characteristicUuid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/characteristicDescription"
        android:layout_marginLeft="8dp"
        android:layout_toRightOf="@id/characteristicImage"
        android:text="@string/_"
        android:textColor="#ffffff"
        android:textSize="14sp" />

Answer 2

You are using the same layout params object for both views lp2. You need to create a seperate layout params object when adding your play and stop buttons. For example, you should have lpPlay and lpStop.