Xamarin Android RecyclerView displaying images in opposite orientation

Question

I am working on a Xamarin app, specifically the Android implementation. I didn't build it originally. I am using a ModalDisplayImageAdapter class inheriting from RecyclerView.Adapter. Images are either taken by the device, uploaded via the app or uploaded through other sources (iOS app, accompanying web app) and uploaded to the API. All of this works with no issue.

The problem is that the Android app displays the image in an inverted orientation; it displays landscape images as if they were portrait and vice versa. If I take a photo using the Android device and upload it to the API, it is displayed correctly on the website. So I know the issue is not with the upload mechanism or the image itself. It's just the Android app which displays it incorrectly. If the image is landscape, the RecyclerView will stretch it into a portrait frame (example at the bottom of the post).

The image modal XML is here:

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="@color/black"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
    android:id="@+id/image_modal_recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
<ImageButton
    android:id="@+id/download_image_button"
    android:tint="@color/white"
    android:background="@android:color/transparent"
    android:layout_gravity="left"
    style="@style/BadgeableImageButton"
    android:src="@drawable/icon_of_download"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<ImageButton
    android:id="@+id/image_modal_close"
    android:tint="@color/white"
    android:background="@android:color/transparent"
    android:layout_gravity="right"
    style="@style/BadgeableImageButton"
    android:src="@drawable/icon_of_cross"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

The modal is populated by an ImageModal activity. OnCreate method is here:

protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        SetupView();
        ActionBar.Hide();
        DataModel dataModel = _dataUtil.GetSelectedItem();            

        if (dataModel == null || !dataModel.EntryDataObject.HasFiles())
        {
            throw new ArgumentException("Item has no files");
        }

        _files = dataModel.EntryDataObject.Files.Where(file => file.HasThumbnail).ToList();

        if (!_files.Any())
        {
            throw new ArgumentException("Item has no images to display");
        }

        _closeButton.Click += CloseButtonOnClick;
        _downloadButton.Click += DownloadButtonOnClick;

        int position = Intent.GetIntExtra(IntentConstants.IMAGE_MODAL_POSITION, 0);
        LinearSnapHelper snapHelper = new LinearSnapHelper();
        snapHelper.AttachToRecyclerView(_imageRecycler);            
        _layoutManager = new LinearLayoutManager(this, LinearLayoutManager.Horizontal, false);                        
        _imageRecycler.SetLayoutManager(_layoutManager);
        _imageRecycler.SetAdapter(new ModalDisplayImageAdapter(_files));
        _layoutManager.ScrollToPosition(position);
    }

During debugging, I looked at the DataModel and saw a property called EntryDataString which has the following value:

"{\"mobileId\":0,\"text\":\"landscape photo\",\"files\":[{\"IsMigrated\":false,\"mobileId\":0,\"Id\":5047,\"BlobId\":…"

So it looks as though the photo is being identified and saved onto the device correctly. I just can't figure out why the orientation is not correct.

Any ideas...? (NB: I am new to this technology and this app, so I may have missed something out. If I have, let me now and I will edit the question. Thanks).

EDIT: Picture 2

Answer 1

Do you want to achieve the result like following sceenshot?

If so, please open the inflater view in the RecyclerView.Adapter. You can see my following code about inflaterView, the value of android:layout_height was setted wrap_content in FrameLayout, the value of android:layout_height was setted in CardView, LinearLayout and ImageView

<FrameLayout xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardElevation="4dp"
        card_view:cardUseCompatPadding="true"
        card_view:cardCornerRadius="5dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="8dp">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/imageView"
                android:scaleType="centerCrop" />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#333333"
                android:text="Caption"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="4dp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</FrameLayout>