1

I am creating a android app in Xamarin with the mvvmcross framework.

Am trying to display pictures from the server to our users(the pictures are Urls). But the pictures refuse to scale to fill their parent. How can I achieve the right fit for these images? , I use the FillParent on the Width tag. But the images refuse to scale to the size of the container.

My current setup

   <FFImageLoading.Cross.MvxImageLoadingView
    android:id="@+id/my_plannymap_listitem_title_picture"
    android:layout_width="fill_parent"
    android:layout_height="150dp"
    local:MvxBind="DataLocationUri ImageUrl; Click OpenDetailCommand" />

above code creates(sorry for the volume thing), As you can see the images do not fill, they remain their "original" size

other activity (same problem here)

    <FFImageLoading.Cross.MvxImageLoadingView
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:scaleType="fitCenter"
            android:id="@+id/overview_image"
            android:background="#580AB0"
            local:MvxBind="DataLocationUri ImageUrl"
            TransparencyEnabled="false"
            DownSampleToFit="true" />
Cœur
  • 37,241
  • 25
  • 195
  • 267
Thomas Billet
  • 2,381
  • 2
  • 13
  • 13
  • i dont have any experience of xamarin but in native android we set scaletype property to fitxy , so i guess there should be same property in xamarin – Adeel Turk Apr 20 '17 at 08:01
  • .. thank you so much, couldn't see the forest for the trees. – Thomas Billet Apr 20 '17 at 08:21
  • i provided you with the needed solution and you deleted your question :) https://stackoverflow.com/questions/49792222/how-to-place-a-picture-inside-a-png-image/49792667#49792667 – Temani Afif Apr 12 '18 at 09:26

1 Answers1

0

It sounds like you want to fix the height to 150dp, and fix the width to the width of the parent. If that is the case it can be done, but it will stretch any image that isn't the correct aspect ratio to begin with.

<FFImageLoading.Cross.MvxImageLoadingView
    android:id="@+id/my_plannymap_listitem_title_picture"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:scaleType="fitXY"
    local:MvxBind="DataLocationUri ImageUrl; Click OpenDetailCommand" />

(note I used match_parent since fill_parent is deprecated)

If you don't want your image to stretch in a strange way and you can't guarantee that the aspect ratio of incoming images matches that of your layout, you need to select one aspect (either width or height) to dictate the size of the other, in such a way that the ratio remains unchanged. You can do that with the following (in this case you're deciding the width, and calculating the height from it based on the image's aspect ratio):

<FFImageLoading.Cross.MvxImageLoadingView
    android:id="@+id/my_plannymap_listitem_title_picture"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    local:MvxBind="DataLocationUri ImageUrl; Click OpenDetailCommand" />

In almost all cases where you cannot guarantee the aspect ratio of the image you're scaling, the second option gives a better result than the first.

Luke Pothier
  • 1,030
  • 1
  • 7
  • 19
  • Isn't there a way I can crop/zoom the image to match the right aspect ratio for that 150 dp sized height? see the image below http://i.imgur.com/uDAiBVE.jpg – Thomas Billet Apr 20 '17 at 08:31
  • Yes there is - use the first option above, but replace the `"fitXY"` with `"center"` – Luke Pothier Apr 20 '17 at 08:34
  • 1
    No problem, [here](https://developer.android.com/reference/android/widget/ImageView.ScaleType.html)'s the Android documentation on image scaling for future reference :) – Luke Pothier Apr 20 '17 at 08:53