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?

Could you please post the logcat of the `Exception` you are getting? — Xaver Kapeller, Apr 22 '14 at 00:40
see if this helps: http://stackoverflow.com/questions/2305395/laying-out-views-in-relativelayout-programmatically?rq=1 — Lazy Ninja, Apr 22 '14 at 00:42

score 1 · Answer 1 · answered Apr 22 '14 at 02:28

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);

    }
  }
}

Thanks for the tip, but this did not really end up solving my issue - the button would still end up below the images — Tore, Apr 22 '14 at 04:17
Actually no. We are using the HorizontalLayout. The children of a HorizontalLayout appear horizontally from left to right. Here is a screenshot of the result on a Nexus 7 (2013). [TestActivity](http://i.stack.imgur.com/t5PDZ.png). — itsben, Apr 22 '14 at 13:24
Hi Tore. Have you tested the solution? If so, would you please accept the answer? — itsben, Apr 23 '14 at 14:07
I have tested your solution, however I have not been able to get it to work for me - as I said in my previous comment, it is laying them out on top of eachother — Tore, Apr 23 '14 at 19:49
Tom, can you please post a screenshot? What device are you using? — itsben, Apr 23 '14 at 21:12

score 0 · Answer 2 · edited Apr 22 '14 at 07:39

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);

     }

}

Android use RelativeLayout Programmatically

2 Answers2

activity_test.xml

TestActivity.java