Android use RelativeLayout Programmatically

Question

I have a basic app working, but now I am focusing on formatting the app and running into difficulty laying things out as I want them.

I have a list of images that the user can switch from one to the next with using a next button. Both the images and the next button are added programmatically to the page (I clear out anything in the layout, and then add the ImageView and Button). Now, instead of laying them out one on top of the other, I am trying to lay them out next to each other, so the image will take up most of the space, and then the next button will be to its right.

Looking through the documentation I was leaning towards using a RelativeLayout to accomplish this. However, I ran into some questions while using RelativeLayouts programmatically.

Activity.xml

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true">


    <RelativeLayout
        android:orientation="vertical"
        android:id="@+id/activity_training_package_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:context="com.example.xxx.PackageActivity"
        tools:ignore="MergeRootFrame">
        </RelativeLayout>
</ScrollView>

Attempt to programmatically add the button:

public void addNextButton(final int currentFile, final RelativeLayout layout) {
    Button next = new Button(this);
    next.setWidth(100);

    int id = layout.getChildAt(0).getId(); // the image is the only thing there

RelativeLayout.LayoutParams lay = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);

lay.addRule(RelativeLayout.RIGHT_OF, id);
next.setLayoutParams(lay);
    next.setText("NEXT >>");
    next.setOnClickListener(new OnClickListener() {
        public void onClick(View arg0) {
            showNextFile(currentFile, layout);
        }
    //layout.setLayoutParams(lay);
    layout.addView(next);
...

I am just wondering which LayoutParams I am supposed to be setting for this, the LayoutParams of the layout, or of the view? When I try to set it to the layout, I get a cast exception (it is expecting a FrameLayout.LayoutParams, not a RelativeLayout.LayoutParams for some reason).

Could someone please point me in the right direction to figure out how layouts are used? I cannot seem to find resources that explain which LayoutParams I should be setting.

TL;DR How do you use RelativeLayouts and LayoutParams programmatically?

Answer 1

set Linear Layout weight Property in your XML file and assign weight to the imageview and button

main_activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="1" /> 

MainActivity.java

package com.example.stackoverflowdemos;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TableLayout;

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout container = (LinearLayout)findViewById(R.id.container);
        //Dynamically generate imageview and button
        ImageView imgView = new ImageView(this);
           imgView.setLayoutParams(new TableLayout.LayoutParams(0, LayoutParams.FILL_PARENT, .2f)); //set imageview height and width using weight
           imgView.setImageResource(R.drawable.ic_launcher);
           container.addView(imgView);

           Button button = new Button(this);
           button.setLayoutParams(new TableLayout.LayoutParams(0, LayoutParams.WRAP_CONTENT, .8f)); //set Button height and width using weight
           button.setText("next");
           container.addView(button);

     }

}

Answer 2

The simplest solution is to use the HorizontalSrollView with a LinearLayout.

activity_test.xml

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <LinearLayout
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal" />

</HorizontalScrollView>

TestActivity.java

public class TestActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);

    LinearLayout container = (LinearLayout)findViewById(R.id.container);

    ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    String next = getResources().getString(R.string.next);

    for(int i=0;i<5;i++){

       ImageView imgView = new ImageView(mActivity);
       imgView.setLayoutParams(params);
       imgView.setImageResource(R.drawable.photo);
       container.addView(imgView);

       Button button = new Button(mActivity);
       button.setLayoutParams(params);
       button.setText(next);
       container.addView(button);

    }
  }
}