Dynamically created ImageView not respecting RelativeLayout rules

Question

I'm adding ImageViews dynamically to a RelativeLayout. I'm trying to align each image to the right of the last image. The initial image aligns correctly but when I set the next image to align to the right side of the last image, it displays at the top left of the screen, disregarding the alignment rules.

Hierarchy View in the Android Device Monitor is indicating that the IDs are correctly getting set and the ImageView is recognizing that it's supposed to align to the id of the last ImageView.

    List<String> image_urls = rally.getTransportationImgs();
    List<String> methods = rally.getTransportationStrs();
    ArrayList<ImageView> IMGS = new ArrayList<ImageView>();

    for(int i = 0; i < methods.size(); i++) {

        String method = methods.get(i);

        for(int j = 0; j < image_urls.size(); j++) {

            String img_url = image_urls.get(j);

            if(img_url.toLowerCase().contains(method.toLowerCase()) == true) {
                ImageView methodImage = new ImageView(this);

                methodImage.setId(j + 100);

                IMGS.add(methodImage);

                RelativeLayout detailsLayout = (RelativeLayout) findViewById(R.id.details_layout);
                TextView transportationText = (TextView) detailsLayout.findViewById(R.id.transportationText);
                RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);

                if (IMGS.size() > 1) {

                    params.addRule(RelativeLayout.RIGHT_OF, IMGS.get(IMGS.size() - 1).getId());
                    params.addRule(RelativeLayout.ALIGN_TOP, IMGS.get(IMGS.size() - 1).getId());
                    params.addRule(RelativeLayout.END_OF, IMGS.get(IMGS.size() - 1).getId());

                    params.height = 5000;
                    params.width = 65;
                } else {

                    params.addRule(RelativeLayout.RIGHT_OF, transportationText.getId());
                    params.addRule(RelativeLayout.ALIGN_TOP, transportationText.getId());
                    params.addRule(RelativeLayout.END_OF, transportationText.getId());

                    params.height = 65;
                    params.width = 65;
                }


                methodImage.setLayoutParams(params);

                detailsLayout.addView(methodImage);

                Picasso.with(getApplicationContext()).load(img_url).fit().centerCrop().placeholder(R.drawable.ic_launcher).into(methodImage);
            }
        }
    }

XML file

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:orientation="vertical"
android:weightSum="1"
android:id="@+id/details_layout">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="275dp"
    android:id="@+id/image" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Large Text"
        android:id="@+id/name2"
        android:layout_below="@id/image"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/date2"
        android:layout_below="@id/name2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/creator_name2"
        android:layout_below="@id/date2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/venues"
        android:layout_below="@id/creator_name2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/transportationText"
        android:layout_below="@id/venues"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Medium Text"
        android:id="@+id/categories"
        android:layout_below="@id/transportationText"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp" />

For debugging purposes, I set the image height obnoxiously large. The gray is part of an image that is supposed to go to the right side of the ImageView that correctly aligns next to "Transportation:"

However, how would I get the list of images to line up horizontally next to the Transportation TextView? @pskink — Faybian, Sep 20 '15 at 07:57

score 0 · Accepted Answer · edited May 23 '17 at 11:51

The problem is with this line:

methodImage.setId(j + 100);

If there's more than one Object in methods array there will be conflict in ImageViews ids. You're generating your ids based on only the index of the inner array (j).

For example if:

There are two items in methods
There are three items in image_urls

Your ImageViews would have ids: [101, 102, 103, 101, 102, 103]

Therefore you will add multiple Views with the same ids.

To solve the issue either generate ids based on both i and j, or generate them in more conventional way.

EDIT: Well, the other issue is that you're trying to set RelativeLayout Rules that are aligning a particular View to the same View.

Take a look at your code:

You're creating an ImageView, setting its id and immediately adding it to the IMGS list, with this:

IMGS.add(methodImage);

And then you're trying to set your RelativeLayout Rules, that should align your ImageView, but you're referencing to the last item of the IMGS list, with:

IMGS.get(IMGS.size() - 1)

And the last item in the array is the same View, you're trying to set up!

To solve the issue either:

a) Move IMGS.add(methodImage); after the if-else, and change the if condition to if (IMGS.size() > 0) {

or

b) Change the if body to:

params.addRule(RelativeLayout.RIGHT_OF, IMGS.get(IMGS.size() - 2).getId());
params.addRule(RelativeLayout.ALIGN_TOP, IMGS.get(IMGS.size() - 2).getId());
params.addRule(RelativeLayout.END_OF, IMGS.get(IMGS.size() - 2).getId());

I made the changes to my code by implementing the `generateViewId` into my project, however, this didn't solve my issue. The Hierarchy View in ADM is letting me know that the images know where they're supposed to go, i.e. to the right of(@id/transportationText), to the bottom of (@id/0x64), etc... they're just not going there — Faybian, Sep 20 '15 at 11:33

Dynamically created ImageView not respecting RelativeLayout rules

1 Answers1