Search code examples
androidxamarinxamarin.androidmvvmcrossffimageloading

FFImageloading xamarin android fit to parent


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" />

Solution

  • 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.