Xamarin Android LinearLayout - Problem with 2 RecyclerViews on one page

Viewed 104

I'm having issues with the v7.widget.RecyclerView. I have a "post" from the app user, which displays any images they have previously added, as well as any other attachments (documents, videos etc.). There is an option to edit existing posts.

I have an EditPost xml file which embeds a file called attachment_item. This in turn embeds an xml file called EditAttachmentsLayout. I can post code from the first 2 files if needed, but I don't think the problem is in there.

The EditAttachmentsLayout page uses 2 RecyclerViews; one for images, and another for other files. Code is here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/edit_images_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <android.support.v7.widget.RecyclerView
        android:id="@+id/edit_attachments_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

The problem is that when the Attachments recyler has items to display, it places some sort of overlay over the first (and only the first) image, like so:

enter image description here

If I hit the Cross button over the thumbnail (or the cross button on the attachment itself), the attachment is removed and the image then appears, as such:

enter image description here

It's as if the recycler is placing an overlay of some sort over the first image in the list. I have tried all sorts of things to address it, such as adding spacing to try to force the two recyclers apart, and switching to a GridView, as below:

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" android:rowCount="4">
    <android.support.v7.widget.RecyclerView android:id="@+id/edit_images_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_row="0"
        android:scrollbars="none"/>
    <Space
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_row="1"
        android:layout_marginBottom="10dp"/>   
    <android.support.v7.widget.RecyclerView android:id="@+id/edit_attachments_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_row="2"
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"
        android:scrollbars="none"/>
</GridLayout>

Unfortunately, the issue persists. The image is always covered, until I remove the attachment.

Any ideas...? I am stumped with this one.

EDIT:

Here is the code which sets up the recycler views:

private void SetupRecycler()
    {
        RecyclerView imagesRecyclerView = FindViewById<RecyclerView>(Resource.Id.edit_images_recycler);
        RecyclerView attachmentsRecyclerView = FindViewById<RecyclerView>(Resource.Id.edit_attachments_recycler);
        LinearLayoutManager imagesLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.Horizontal, false);
        LinearLayoutManager attachmentsLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.Vertical, false);
        imagesRecyclerView.SetLayoutManager(imagesLayoutManager);
        attachmentsRecyclerView.SetLayoutManager(attachmentsLayoutManager);

        IList<DeviceFile> localFiles = _fileUtil.GetLocalFiles(_postEntry.MobileId);
        _editImageAdapter = new EditImageAdapter(_postEntry, localFiles.Where(file => file.IsThumbnail).ToList());
        _editAttachmentAdapter = new EditAttachmentAdapter(_postEntry, localFiles.Where(file => !file.IsThumbnail).ToList());

        imagesRecyclerView.SetAdapter(_editImageAdapter);
        attachmentsRecyclerView.SetAdapter(_editAttachmentAdapter);

        _editImageAdapter.LocalFileDeleted += LocalFileDeleted;
        _editImageAdapter.UploadedFileDeleted += UploadedFileDeleted;
        _editAttachmentAdapter.LocalAttachmentDeleted += LocalFileDeleted;
        _editAttachmentAdapter.UploadedAttachmentDeleted += UploadedFileDeleted;
    }

EDIT 2:

So here is the overlay which adds a removal button to the image when the post is in edit mode. Apologies for not including it earlier, I didn't build this app so don't know everything about it:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginRight="20dp"
android:layout_width="@dimen/edit_image_size"
android:layout_height="@dimen/edit_image_size">
<ImageView
    android:background="@drawable/image_background"
    android:id="@+id/attachment_image"
    android:scaleType="fitXY"
    android:layout_width="@dimen/edit_image_size"
    android:layout_height="@dimen/edit_image_size"/>
<ImageButton
    android:background="@drawable/rounded_button_secondary"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    android:layout_alignTop="@id/attachment_image"
    android:layout_alignRight="@id/attachment_image"
    android:id="@+id/delete_attachment_button"
    android:src="@drawable/icon_of_cross"
    android:tint="@color/white"
    android:padding="5dp"
    android:layout_margin="5dp"
    android:layout_width="25dp"
    android:layout_height="25dp" />

Just for a bit of clarity, I have included some more screenshots, with multiple images and attachments. If there are both images and attachments in the post, the first image to be loaded (the one firthest right) will have the overlay:

enter image description here

Once I click the cross button to remove the first attachment, the attachment is gone (as expected) and the image is visible again:

enter image description here

Very strange!

1 Answers

Suggestions: 1. Try to set parent linear layout height to match_parent

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"> // **this line here**
        <android.support.v7.widget.RecyclerView
            android:id="@+id/edit_images_recycler"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <android.support.v7.widget.RecyclerView
            android:id="@+id/edit_attachments_recycler"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
  1. Have you tried to see if you are having an issues with the main thread RunOnUIThread(() => {}) - to update the adapters

  2. Try notifying the recycler adapters for the changes by using:

    _editImageAdapter.NotifiyDatasetChanged() _editImageAdapter.NotifiyDatasetChanged()

Related