Populating a list of songs with Album Art - Not able to get Album art - xamarin

I'm currently building a music browser/player of the music on a the device. I sucessufully populated the a listview with the names of the songs and their artist but I'm not able to show the albumart associated with the song. I'm not quite sure what is the correct path to get the album art & also how to correlate it with the songs. The code builds but not album art is showed up. I guess that
albumArtUri is not good. Could you please help me to get the right albumart Uri?
Thank you for your help, it's appreciated :)
Julien
Here is my SongAdapter Code:
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Util;
using Android.Views;
using Android.Widget;
using Android.Provider;
using Android.Database;
using Android.Net;
namespace project
{
public class SongsAdapter:CursorAdapter
{
List<Song> songsList;
Activity context;
public SongsAdapter (Activity context, ICursor cursor, List<Song> theSongs): base(context,cursor)
{
this.context = context;
songsList = theSongs;
}
public override void BindView(View view, Context context, ICursor cursor)
{
var song_title = view.FindViewById<TextView> (Resource.Id.song_title);
var song_artist = view.FindViewById<TextView> (Resource.Id.song_artist);
var song_album_art = view.FindViewById<ImageView> (Resource.Id.song_album_art);
song_title.Text = songsList [cursor.Position].Title;
song_artist.Text = songsList [cursor.Position].Artist;
//If there is an image to display, it will display it. If not, it will use a default image
if (songsList [cursor.Position].AlbumId == null) {
song_album_art = view.FindViewById<ImageView> (Resource.Id.song_album_art);
song_album_art.SetImageResource (Resource.Drawable.ic_action_user); //Image needs to be set
} else {
var songUri = ContentUris.WithAppendedId (MediaStore.Audio.Media.ExternalContentUri, songsList [cursor.Position].Id);
var albumArtUri = Android.Net.Uri.WithAppendedPath(songUri,MediaStore.Audio.Albums.EntryContentType);
song_album_art.SetImageURI (albumArtUri);
}
}
public override View NewView(Context context, ICursor cursor, ViewGroup parent)
{
return this.context.LayoutInflater.Inflate(Resource.Layout.songslistitem, parent, false);
}
}
}
Here is how I call the SongAdapter:
ListView listView;
view = LayoutInflater.From (container.Context).Inflate (Resource.Layout.songlist, container, false);
listView = view.FindViewById<ListView> (Resource.Id.List);
List<Song> songsList;
var uri = MediaStore.Audio.Media.ExternalContentUri;
string[] projection = {
MediaStore.Audio.Media.InterfaceConsts.Id,
MediaStore.Audio.Media.InterfaceConsts.AlbumId,
MediaStore.Audio.Media.InterfaceConsts.Title,
MediaStore.Audio.Media.InterfaceConsts.Artist,
};
var loader = new CursorLoader (container.Context, uri, projection, null, null, null);
var cursor = (ICursor)loader.LoadInBackground ();
songsList = new List<Song> ();
if (cursor.MoveToFirst ()) {
do {
songsList.Add (new Song {
Id = cursor.GetLong (cursor.GetColumnIndex (projection [0])),
AlbumId = cursor.GetString (cursor.GetColumnIndex (projection [1])),
Title = cursor.GetString (cursor.GetColumnIndex (projection [2])),
Artist = cursor.GetString (cursor.GetColumnIndex (projection [3]))
});
} while (cursor.MoveToNext ());
}
listView.Adapter = new SongsAdapter (context,cursor,songsList);

I was able to solve my issue by doing this in the song adapter:
long album_id = cursor.GetLong(cursor.GetColumnIndex(MediaStore.Audio.Albums.InterfaceConsts.AlbumId));
var songCover = Android.Net.Uri.Parse ("content://media/external/audio/albumart");
var songAlbumArtUri = ContentUris.WithAppendedId (songCover, album_id);
song_artist.Text = songAlbumArtUri.ToString();
song_album_art.SetImageURI (songAlbumArtUri);
I found the answer thanks to this stackoverflow answer: Getting album art from the audio file Uri

Related

Change DisplayImage while playing Mp3 file using CrossMediaManager in Xamarin forms IOS

I am trying to change the Display Image while playing mp3 file using CrossMediaManager, but It seems it doesn't change the image. It does change the title, id and so on, but I don't know why it can't change the display image.
async Task ExecutePlayChapterCommand()
{
if (IsBusy) return;
IsBusy = true;
try
{
await Task.Delay(TimeSpan.FromMilliseconds(10));
var reciter = Reciters.FirstOrDefault();
Device.BeginInvokeOnMainThread(async() => {
var mediaItem = await CrossMediaManager.Current.Play(reciter.DownloadURL);
CrossMediaManager.Current.Queue.Current.IsMetadataExtracted = false;
mediaItem.Title = reciter.Name;
var image = new Image() { Source = ImageSource.FromUri(new Uri(reciter.ImagePath)) };
CrossMediaManager.Current.Queue.Current.Title = string.Format("{0} - {1} ({2})", "1", "ChName", "English");
CrossMediaManager.Current.Queue.Current.Album = reciter.Name;
CrossMediaManager.Current.Queue.Current.Artist = reciter.Name;
CrossMediaManager.Current.Queue.Current.AlbumImage = image;
CrossMediaManager.Current.Queue.Current.AlbumImageUri = reciter.ImagePath;
CrossMediaManager.Current.Queue.Current.DisplayImage = image;
CrossMediaManager.Current.Queue.Current.DisplayImageUri = reciter.ImagePath;
CrossMediaManager.Current.Queue.Current.Image = image;
CrossMediaManager.Current.Queue.Current.ImageUri = reciter.ImagePath;
CrossMediaManager.Current.Notification.UpdateNotification();
});
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
}
finally { IsBusy = false; }
}
}
A sample project is uploaded in here
This answer might be a little bit late, but it worked for me perfectly.
First, the "Image, DisplayImage" properties of the media items are objects, that contain native representations of the cover image (UIImage and Bitmap) in the platform specific projects, so do not assign them any value.
Create your media item like this, without assigning the properties mentioned above.
new MediaItem(chapter.MediaUrl)
{
ImageUri = item.ImageUrl,
DisplayImageUri = item.ImageUrl,
AlbumImageUri = item.ImageUrl,
DisplayTitle = item.Title,
Title = item.Title,
Artist = item.Author,
Author = item.Author,
};
Then, on iOS, after setting the Queue items of the media items, in the platform specific project, create a method that takes the media item. This method will be called from the shared project.
Here is the method.
public void SetMediaImages(IMediaManager mediaManager)
{
if (mediaManager.Queue != null && mediaManager.Queue.Any())
{
foreach (var mediaItem in mediaManager.Queue)
{
if (!string.IsNullOrEmpty(mediaItem.ImageUri))
{
mediaItem.Image = UIImage.LoadFromData(NSData.FromUrl(new NSUrl(mediaItem.ImageUri)));
mediaItem.AlbumImage = mediaItem.Image;
}
}
}
}
Call this method in your shared project using Xamarin.Form's dependency service.

How to select multiple picture from gallery using GMImagePicker in xamarin IOS?

I am following this blog for selecting multiple pictures from the gallery. For IOS I am Using GMImagePicker for selecting multiple pictures from the gallery.(In the blog suggesting elcimagepicker, but that is not available in Nuget Store now)
I go through the GMImagePicker usage part but didn't find how to add the selected images to List and pass that value in MessagingCenter(like the android implementation). In that usage part only telling about the picker settings. Anyone please give me any sample code for doing this feature?
Hi Lucas Zhang - MSFT, I tried your code but one question. Here you are passing only one file path through the messagecenter, so should I use a List for sending multiple file paths?
I am passing the picture paths as a string List from android. Please have a look at the android part code added below. Should I do like this in IOS?
protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
base.OnActivityResult(requestCode, resultCode, data);
if (resultCode == Result.Ok)
{
List<string> images = new List<string>();
if (data != null)
{
ClipData clipData = data.ClipData;
if (clipData != null)
{
for (int i = 0; i < clipData.ItemCount; i++)
{
ClipData.Item item = clipData.GetItemAt(i);
Android.Net.Uri uri = item.Uri;
var path = GetRealPathFromURI(uri);
if (path != null)
{
//Rotate Image
var imageRotated = ImageHelpers.RotateImage(path);
var newPath = ImageHelpers.SaveFile("TmpPictures", imageRotated, System.DateTime.Now.ToString("yyyyMMddHHmmssfff"));
images.Add(newPath);
}
}
}
else
{
Android.Net.Uri uri = data.Data;
var path = GetRealPathFromURI(uri);
if (path != null)
{
//Rotate Image
var imageRotated = ImageHelpers.RotateImage(path);
var newPath = ImageHelpers.SaveFile("TmpPictures", imageRotated, System.DateTime.Now.ToString("yyyyMMddHHmmssfff"));
images.Add(newPath);
}
}
MessagingCenter.Send<App, List<string>>((App)Xamarin.Forms.Application.Current, "ImagesSelected", images);
}
}
}
Also, I am getting an error, screenshot adding below:
GMImagePicker will return a list contains PHAsset .So you could firstly get the filePath of the images and then pass them to forms by using MessagingCenter and DependencyService.Refer the following code.
in Forms, create an interface
using System;
namespace app1
{
public interface ISelectMultiImage
{
void SelectedImage();
}
}
in iOS project
using System;
using Xamarin.Forms;
using UIKit;
using GMImagePicker;
using Photos;
using Foundation;
[assembly:Dependency(typeof(SelectMultiImageImplementation))]
namespace xxx.iOS
{
public class SelectMultiImageImplementation:ISelectMultiImage
{
public SelectMultiImageImplementation()
{
}
string Save(UIImage image, string name)
{
var documentsDirectory = Environment.GetFolderPath
(Environment.SpecialFolder.Personal);
string jpgFilename = System.IO.Path.Combine(documentsDirectory, name); // hardcoded filename, overwritten each time
NSData imgData = image.AsJPEG();
if (imgData.Save(jpgFilename, false, out NSError err))
{
return jpgFilename;
}
else
{
Console.WriteLine("NOT saved as " + jpgFilename + " because" + err.LocalizedDescription);
return null;
}
}
public void SelectedImage()
{
var picker = new GMImagePickerController();
picker.FinishedPickingAssets += (s, args) => {
PHAsset[] assets = args.Assets;
foreach (PHAsset asset in assets)
{
PHImageManager.DefaultManager.RequestImageData(asset, null, (NSData data, NSString dataUti, UIImageOrientation orientation, NSDictionary info) =>
{
NSUrl url = NSUrl.FromString(info.ValueForKey(new NSString("PHImageFileURLKey")).ToString());
string[] strs = url.Split("/");
UIImage image = UIImage.LoadFromData(data);
string file = Save(UIImage.LoadFromData(data), strs[strs.Length - 1]);
MessagingCenter.Send<Object, string>(this, "ImagesSelected", file);
}
);
}
};
UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(picker, true,null);
}
}
}
in your contentPages
...
List<string> selectedImages;
...
public MyPage()
{
selectedImages = new List<string>();
InitializeComponent();
MessagingCenter.Subscribe<Object,string>(this, "ImagesSelected",(object arg1,string arg2) =>
{
string source = arg2;
selectedImages.Add(source);
});
}
If you want to select the images ,call the method
DependencyService.Get<ISelectMultiImage>().SelectedImage();

How to load an Image from Assets in Xamarin.Forms on Android?

I am using the following code:
var baseUrl = DependencyService.Get<IBaseUrl> ().Get ();
var backgroundImage = new Image () {
Source = FileImageSource.FromFile (
System.IO.Path.Combine (baseUrl, "Content", "images", "background-2.jpg")
)
};
Where the DependencyServices for iOS and Androids are as below:
// iOS
[assembly: Xamarin.Forms.Dependency (typeof (BaseUrl_iOS))]
namespace TuneProtectApp.iOS
{
public class BaseUrl_iOS : IBaseUrl
{
public BaseUrl_iOS () { }
public string Get ()
{
return NSBundle.MainBundle.BundlePath;
}
}
}
// Android
[assembly: Xamarin.Forms.Dependency (typeof (BaseUrl_Droid))]
namespace TuneProtectApp.Droid
{
public class BaseUrl_Droid : IBaseUrl
{
public BaseUrl_Droid () {}
public string Get ()
{
return "file:///android_asset/";
}
}
}
The backgroundImage loads fine on iOS but not on Android. How to load an Image from Assets in Xamarin.Forms on Android?
In my Xamarin.forms (shared) app I have a registration-page, where the user also have to select an image for his avatar. Based on the sex of the user, I show a male or a female symbol-image as default (the user then can select another, if he want to do).
I have implemented it as follows:
First created a sub-directory \Embedded for all projects (iOS, Android and WP) (directly in the project-root of each project-type).
Then added the two .jpg’s to the new directories in all projects.
In my app I have a global variable (GV.cEmbeddedAblage)
This is filled in startup-code:
string cNameSpace = "";
switch (Device.OS)
{
case TargetPlatform.WinPhone:
cNameSpace = "MatrixGuide.WinPhone";
break;
case TargetPlatform.iOS:
cNameSpace = "MatrixGuide.iOS";
break;
case TargetPlatform.Android:
cNameSpace = "MatrixGuide.Droid";
break;
//
}
GV.cEmbeddedAblage = cNameSpace + ".Embedded.";
Further, I create a global byte-array for the images (example to male):
static Byte[] _SymbolMann;
public static Byte[] ByteSymbolMann
{
get { return _SymbolMann; }
set { _SymbolMann = value; }
}
I then easily can access the images from shared code (on the registration-page) with (e.g.):
Generate the path, load image in byte-array (if not already loaded):
string cFilename = "";
if (GV.ByteSymbolMann == null) // not yet loaded - only load one time
{
cFilename = GV.cEmbeddedAblage + "SymbolMann.jpg";
var assembly = this.GetType().GetTypeInfo().Assembly;
byte[] buffer;
using (Stream s = assembly.GetManifestResourceStream(cFilename))
{
long length = s.Length;
buffer = new byte[length];
s.Read(buffer, 0, (int)length);
GV.ByteSymbolMann = buffer;
}
}
Fill another byte.array (with selected (loaded) male- / female- image):
AvatarErfassung = GV.ByteSymbolMann;
create the image on the page:
var Avatar = new Image { HeightRequest = 70, WidthRequest = 70, HorizontalOptions = LayoutOptions.Start };
Overtake the selected image as Source to the Image:
Avatar.Source = ImageSource.FromStream(() => new MemoryStream(AvatarErfassung));
You should be able to do it similar...

Bind text with links to RichTextBox

I need to bind text which may contain hyperlinks to RichTextBox so it could show text as normal text and links as hyperlinks.
For example I have following text:
Join us on social networks
http://www.facebook.com/
I want that links in a text be hyperlinks so the result in RichTextBox would be like this:
Join us on social networks
http://www.facebook.com/
I implemented what I need
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Text.RegularExpressions;
using System.Windows.Media;
namespace NazarGrynko.UI.Controls
{
public class MyRichTextBox : RichTextBox
{
private const string UrlPattern = #"(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,#?^=%&:/~\+#]*[\w\-\#?^=%&/~\+#])?";
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof (string), typeof(MyRichTextBox ), new PropertyMetadata(default(string), TextPropertyChanged));
public string Text
{
get { return (string) GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
private static void TextPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
var richTextBox = (MyRichTextBox)dependencyObject;
var text = (string) dependencyPropertyChangedEventArgs.NewValue;
int textPosition = 0;
var paragraph = new Paragraph();
var urlMatches = Regex.Matches(text, UrlPattern);
foreach (Match urlMatch in urlMatches)
{
int urlOccurrenceIndex = text.IndexOf(urlMatch.Value, textPosition, StringComparison.Ordinal);
if (urlOccurrenceIndex == 0)
{
var hyperlink = new Hyperlink
{
NavigateUri = new Uri(urlMatch.Value),
TargetName = "_blank",
Foreground = Application.Current.Resources["PhoneAccentBrush"] as Brush
};
hyperlink.Inlines.Add(urlMatch.Value);
paragraph.Inlines.Add(hyperlink);
textPosition += urlMatch.Value.Length;
}
else
{
paragraph.Inlines.Add(text.Substring(textPosition, urlOccurrenceIndex - textPosition));
textPosition += urlOccurrenceIndex - textPosition;
var hyperlink = new Hyperlink
{
NavigateUri = new Uri(urlMatch.Value),
TargetName = "_blank",
Foreground = Application.Current.Resources["PhoneAccentBrush"] as Brush
};
hyperlink.Inlines.Add(urlMatch.Value);
paragraph.Inlines.Add(hyperlink);
textPosition += urlMatch.Value.Length;
}
}
if (urlMatches.Count == 0)
{
paragraph.Inlines.Add(text);
}
richTextBox.Blocks.Add(paragraph);
}
}
}
Using example:
<MyRichTextBox Text="{Binding Message}"/>
Parse the Hyperlink, and create following structure (With C#, of course):
<RichTextBlock>
<Run>Hello World!</Run>
<Hyperlink NavigateUri="http://www.stackoverflow.com">http://www.stackoverflow.com</Hyperlink>
Thanks for the solution!
One minor modification I made was right at the end, I replaced the check on the count, with a line that just adds a substring of the full text, this way it does not truncate everything after the last URL, all text is retained.
paragraph.Inlines.Add(text.Substring(textPosition, text.Length - textPosition));
//if (urlMatches.Count == 0)
//{
// paragraph.Inlines.Add(text);
//}

How can I populate more than one Silverlight Image from Bing Maps asynchronous calls?

I have the following code, which works fine if you just want to populate one Image with a response from Bing Maps. But if I try to do two then the variable _currentImage always ends up being "image1" because the calls are asynchronous. How can I pass the image variable along to the ImageryServiceGetMapUriCompleted method?
using System;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using BasicBingMapsImagerySvc.ImageryService;
namespace BasicBingMapsImagerySvc
{
public partial class MainPage : UserControl
{
private const string BingMapsKey = "my key";
private Image _currentImage;
public MainPage()
{
InitializeComponent();
GetMap(42.573377, -101.032251, image0, MapStyle.AerialWithLabels);
GetMap(42.573377, -101.032251, image1, MapStyle.Road_v1);
}
private void GetMap(double lat, double lon, Image image, MapStyle mapStyle)
{
var mapUriRequest = new MapUriRequest();
// Set credentials using a valid Bing Maps key
mapUriRequest.Credentials = new Credentials();
mapUriRequest.Credentials.ApplicationId = BingMapsKey;
// Set the location of the requested image
mapUriRequest.Center = new Location();
mapUriRequest.Center.Latitude = lat;
mapUriRequest.Center.Longitude = lon;
// Set the map style and zoom level
var mapUriOptions = new MapUriOptions();
mapUriOptions.Style = mapStyle;
mapUriOptions.ZoomLevel = 13;
// Set the size of the requested image to match the size of the image control
mapUriOptions.ImageSize = new SizeOfint();
mapUriOptions.ImageSize.Height = 256;
mapUriOptions.ImageSize.Width = 256;
mapUriRequest.Options = mapUriOptions;
var imageryService = new ImageryServiceClient("BasicHttpBinding_IImageryService");
imageryService.GetMapUriCompleted += ImageryServiceGetMapUriCompleted;
_currentImage = image;
imageryService.GetMapUriAsync(mapUriRequest);
}
private void ImageryServiceGetMapUriCompleted(object sender, GetMapUriCompletedEventArgs e)
{
// The result is an MapUriResponse Object
MapUriResponse mapUriResponse = e.Result;
var bmpImg = new BitmapImage(new Uri(mapUriResponse.Uri));
_currentImage.Source = bmpImg;
}
}
}
You could use a lambda expression / delegate for your event handler, which allows you to 'capture' the reference to the image:
var imageryService = new ImageryServiceClient("BasicHttpBinding_IImageryService");
imageryService.GetMapUriCompleted += (s,e) =>
{
// The result is an MapUriResponse Object
MapUriResponse mapUriResponse = e.Result;
var bmpImg = new BitmapImage(new Uri(mapUriResponse.Uri));
// set the image source
image.Source = bmpImg;
};

Resources