Get Contact Image Xamarin Forms

Question

I am creating a hybrid mobile app using Xamarin Forms. I want to display list of all phone book contacts with the following details:

1. Name
2. Image

I have added the permission "READ_CONTACTS" in android manifest. Below is the code to get all contacts:

var contactList = new List < MContacts > ();

var ContactDetailURI = ContactsContract.Contacts.ContentUri;

string[] ContactDetailProjection = {
 ContactsContract.Contacts.InterfaceConsts.Id,
 ContactsContract.Contacts.InterfaceConsts.DisplayName,
 ContactsContract.ContactsColumns.ContactLastUpdatedTimestamp,
 ContactsContract.Contacts.InterfaceConsts.PhotoId,
 ContactsContract.Contacts.InterfaceConsts.PhotoUri,
 ContactsContract.Contacts.InterfaceConsts.PhotoFileId,
 ContactsContract.Contacts.InterfaceConsts.PhotoThumbnailUri
};

var ContactDetailCursor = Forms.Context.ContentResolver.Query(
 ContactDetailURI,
 ContactDetailProjection,
 null,
 null,
 null
);

if (ContactDetailCursor.MoveToFirst()) {
 do {
    var contact = new MContacts();
    contact.Id = ContactDetailCursor.GetLong(ContactDetailCursor.GetColumnIndex(ContactDetailProjection[0]));
    contact.DisplayName = ContactDetailCursor.GetString(ContactDetailCursor.GetColumnIndex(ContactDetailProjection[1]));
    contact.PhotoId = ContactDetailCursor.GetString(ContactDetailCursor.GetColumnIndex(ContactDetailProjection[6]));

    contactList.Add(contact);

 } while (ContactDetailCursor.MoveToNext());
}

return contactList;

I have a XAML page which will display the data. I am using Image Cell. Below is the XAML code:

<ContentPage.Content>
    <ListView x:Name="ContactList">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ImageCell
                    Text="{Binding DisplayName}"
                    ImageSource="{Binding PhotoId}">
                </ImageCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>

I am getting the contact name but in the image field I only get this:

content://com.android.contacts/contacts/1/photo

What should I do in order to display the image ? What am I missing here ?

P.S. I don't want to use Xamarin.Mobile component or any other component.

Answer 1

Android gets access to files from other apps through Content Providers and Content Resolvers. So you will first have to convert that content:// scheme URL to a filestream. You can do it like this:

// convert uri to stream (Android code, ContentResolver is a property of the Activity class):
var stream = ContentResolver.OpenInputStream(uri);

// or when not in an activity (e.g. a service):
var otherStream = Android.App.Application.Context.ContentResolver.OpenInputStream(uri);

// eventually convert the stream to imagesource for consumption in Xamarin Forms:
var imagesource = Xamarin.Forms.ImageSource.FromStream(() => stream);

See the following resources for more information:

• https://developer.xamarin.com/guides/android/platform_features/intro_to_content_providers/
• https://developer.android.com/guide/topics/providers/content-providers.html