Dimitar Filipov
Dimitar Filipov

Reputation: 39

ImageCell not displaying image only on Android

I've been trying to get an ImageCell to show an image in a very basic ListView for some time now using the Shared library. The problem ONLY appears on Android, the iOS version is working as intended.

PS: I am having issues loading images from the internet as well, again only for Android. I'm certain the problem is the same. I have already added the Internet permission in the manifest, and have tried all of the different HttpClientImplementation and SSL/TLS implementation options.

My XAML is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TestXamarin.GreetPage">
    <ListView x:Name="listView">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ImageCell Text="{Binding Name}" Detail="{Binding Status}" ImageSource="{Binding ImageUrl}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
        
</ContentPage>

The code behind class is like this :

public partial class GreetPage : ContentPage
{
    public GreetPage()
    {
        On<iOS>().SetUseSafeArea(true);

        InitializeComponent();

        listView.ItemsSource = new List<Contact>
        {
            new Contact { Name="John", ImageUrl = "http://lorempixel.com/100/100/people/1" },
            new Contact { Name="Jack", ImageUrl = "http://lorempixel.com/100/100/people/2", Status="Hello guys" },
            new Contact { Name="Jill", ImageUrl = "http://lorempixel.com/100/100/people/3" }
        };
    }       
}

The Contact.cs class is this:

public class Contact
{
    public string Name { get; set; }
    public string Status { get; set; }
    public string ImageUrl { get; set; }
}

Upvotes: 1

Views: 914

Answers (1)

pinedax
pinedax

Reputation: 9346

Your issue is related with the restrictions on later Android versions with non secure (http) connections.

If you debug the app and look at the Output you will see a message like this:

Image Loading: Error getting stream for http://lorempixel.com/100/100/people/1: Java.IO.IOException: Cleartext HTTP traffic to lorempixel.com not permitted at Java.Interop.JniEnvironment+InstanceMethods.CallVoidMethod (Java.Interop.JniObjectReference instance, Java.Interop.JniMethodInfo method, Java.Interop.JniArgumentValue* args) [0x00069] in :0 at Java.Interop.JniPeerMembers+JniInstanceMethods.InvokeAbstractVoidMethod (System.String encodedMember, Java.Interop.IJavaPeerable self, Java.Interop.JniArgumentValue* parameters) [0x00014] in :0 at Java.Net.HttpURLConnectionInvoker.Connect () [0x0000a] in :0 at Xamarin.Android.Net.AndroidClientHandler+<>c__DisplayClass44_0.b__0 () [0x0005a] in :0 at System.Threading.Tasks.Task.InnerInvoke () [0x0000f] in :0 at System.Threading.Tasks.Task.Execute () [0x00000] in :0 --- End of stack trace from previous location where exception was thrown ---

As you can read there a message saying Cleartext HTTP traffic to lorempixel.com not permitted at

The quickest solution is to add the android:usesCleartextTraffic="true" at the application level in the Manifest.xml file:

<application android:label="MyApp.Android" android:usesCleartextTraffic="true">
    ...
</application>

But the above is not the recomended as it open a breach in terms of security. The best solution would be to use https in your Urls.

enter image description here

Hope this helps

Upvotes: 3

Related Questions