Post
Ask Question

Access and Display Instagram Feed In Xamarin.Forms

Let's start.

Step 1

Open Visual Studio.
 
Go to File >> New>> Project.
 
Select Templates >> Visual C#>> Cross Platform.
 
Select Cross Platform App (Xamarin.Forms or Native) and give your application a suitable name, such as - Instagram.
 
 Now, choose project location and click OK.



Step 2

Create Models folder; For that, go to Solution Explorer >> right click on Instagram (PCL) app >>  Add >> New Folder. Give the folder name such as Models.
 
Create a class named InstagramItems inside the Models folder. For that, go to Solution Explorer >> Instagram(PCL) >> right click and select new item. In the popup window, select Cross platform >> class. Give the class name Instagramitem. Double click to get into its design view and insert the code given below.

  1. namespace XamarinForms.Models  
  2. {  
  3.     public class InstagramItem  
  4.     {  
  5.   
  6.         public string UserName { get; set; }  
  7.   
  8.         public string FullName { get; set; }  
  9.   
  10.         public string ProfilePicture { get; set; }  
  11.   
  12.         public string LowResolutionUrl { get; set; }  
  13.   
  14.         public string ThumbnailUrl { get; set; }  
  15.   
  16.         public string StandardResolutionUrl { get; set; }  
  17.   
  18.         public string Text { get; set; }  
  19.   
  20.         public string CreatedTime { get; set; }  
  21.   
  22.         public int LikesCount { get; set; }object     
  23.   
  24.         public int CommentsCount { get; set; }  
  25.     }  
  26. } 

Step 3

Similarly, create a Views folder and Instagramviewpage class inside it. Here is the code for this class. This page is your application UI.

  1. using Xamarin.Forms;  
  2. using XamarinForms.ViewModels;  
  3.   
  4. namespace XamarinForms.Views  
  5. {  
  6.     public class InstagramViewPage : ContentPage  
  7.     {  
  8.   
  9.         public InstagramViewPage()  
  10.         {  
  11.   
  12.             BackgroundColor = Color.White;  
  13.   
  14.             var twitterViewModel = new InstagramViewModel();  
  15.   
  16.             BindingContext = twitterViewModel;  
  17.   
  18.             var label = new Label  
  19.             {  
  20.                 Text = "Instagram",  
  21.                 TextColor = Color.Gray,  
  22.                 FontSize = 24  
  23.             };  
  24.   
  25.             var dataTemplate = new DataTemplate(() =>  
  26.             {  
  27.                 var screenNameLabel = new Label  
  28.                 {  
  29.                     TextColor = Color.FromHex("#1c5380"),  
  30.                     FontSize = 22  
  31.                 };  
  32.                 var textLabel = new Label  
  33.                 {  
  34.                     TextColor = Color.Black,  
  35.                     FontSize = 14  
  36.                 };  
  37.                 var likesLabel = new Label  
  38.                 {  
  39.                     TextColor = Color.FromHex("#517fa4"),  
  40.                     FontSize = 14  
  41.                 };  
  42.                 var commentsLabel = new Label  
  43.                 {  
  44.                     TextColor = Color.FromHex("#517fa4"),  
  45.                     FontSize = 14  
  46.                 };  
  47.                 var profileImage = new Image  
  48.                 {  
  49.                     WidthRequest = 60,  
  50.                     HeightRequest = 60,  
  51.                     VerticalOptions = LayoutOptions.Start  
  52.                 };  
  53.                 var mediaImage = new Image  
  54.                 {  
  55.                     HeightRequest = 200  
  56.                 };  
  57.   
  58.                 screenNameLabel.SetBinding(Label.TextProperty, new Binding("UserName"));  
  59.                 textLabel.SetBinding(Label.TextProperty, new Binding("Text"));  
  60.                 profileImage.SetBinding(Image.SourceProperty, new Binding("ProfilePicture"));  
  61.                 mediaImage.SetBinding(Image.SourceProperty, new Binding("StandardResolutionUrl"));  
  62.                 likesLabel.SetBinding(Label.TextProperty, new Binding("LikesCount", BindingMode.Default, null, null, "{0:n0} likes |"));  
  63.                 commentsLabel.SetBinding(Label.TextProperty, new Binding("CommentsCount", BindingMode.Default, null, null, "{0:n0} likes"));  
  64.   
  65.                 return new ViewCell  
  66.                 {  
  67.                     View = new StackLayout  
  68.                     {  
  69.                         Orientation = StackOrientation.Horizontal,  
  70.                         Padding = new Thickness(0, 5),  
  71.                         Children =  
  72.                         {  
  73.                             profileImage,  
  74.                             new StackLayout  
  75.                             {  
  76.                                 Orientation = StackOrientation.Vertical,  
  77.                                 Children =  
  78.                                 {  
  79.                                     screenNameLabel,  
  80.                                     new StackLayout  
  81.                                     {  
  82.                                         Orientation = StackOrientation.Horizontal,  
  83.                                         Children =  
  84.                                         {  
  85.                                             likesLabel,  
  86.                                             commentsLabel,  
  87.                                         }  
  88.                                     },  
  89.                                     textLabel,  
  90.                                     mediaImage,  
  91.                                 }  
  92.                             }  
  93.                         }  
  94.                     }  
  95.                 };  
  96.             });  
  97.   
  98.             var listView = new ListView  
  99.             {  
  100.                 HasUnevenRows = true  
  101.             };  
  102.   
  103.             listView.SetBinding(ListView.ItemsSourceProperty, "InstagramItems");  
  104.   
  105.             listView.ItemTemplate = dataTemplate;  
  106.   
  107.             Content = new StackLayout  
  108.             {  
  109.                 Padding = new Thickness(5, 10),  
  110.                 Children =  
  111.                 {  
  112.                     label,  
  113.                     listView  
  114.                 }  
  115.             };  
  116.         }  
  117.     }  
  118. }  
Step 4.1

Create another folder named ViewModels and create InstagramViewModels class inside it. Here is the code.


  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel;  
  4. using System.Diagnostics;  
  5. using System.Net.Http;  
  6. using System.Runtime.CompilerServices;  
  7. using System.Threading.Tasks;  
  8. using Newtonsoft.Json;  
  9. using Newtonsoft.Json.Linq;  
  10. using XamarinForms.Models;  
  11.   
  12. namespace XamarinForms.ViewModels  
  13. {  
  14.     public class InstagramViewModel : INotifyPropertyChanged  
  15.     {  
  16.         private List<InstagramItem> _instagramItems;  
  17.   
  18.         public List<InstagramItem> InstagramItems  
  19.         {  
  20.             get { return _instagramItems; }  
  21.             set  
  22.             {  
  23.                 _instagramItems = value;  
  24.                 OnPropertyChanged();  
  25.             }  
  26.         }  
  27.   
  28.         public InstagramViewModel()  
  29.         {  
  30.              InitDataAsync();  
  31.         }  
  32.   
  33.         private async Task InitDataAsync()  
  34.         {  
  35.             var httpClient = new HttpClient();  
  36.   
  37.             var json = await httpClient.GetStringAsync(  
  38.                 "https://www.instagram.com/xamarinhq/media/"  
  39.                         //"https://api.instagram.com/v1/users/469744406/media/recent?client_id=88a92ed981d74235a5a2be3cf549cb59"  
  40.                         );  
  41.   
  42.             JObject response = JsonConvert.DeserializeObject<dynamic>(json);  
  43.   
  44.             var items = response.Value<JArray>("items");  
  45.   
  46.             try  
  47.             {  
  48.   
  49.                 var instagramItems = new List<InstagramItem>();  
  50.   
  51.                 foreach (var item in items)  
  52.                 {  
  53.                     var instagramItem = new InstagramItem  
  54.                     {  
  55.                         UserName = item.Value<JObject>("user").Value<string>("username"),  
  56.                         FullName = item.Value<JObject>("user").Value<string>("full_name"),  
  57.                         ProfilePicture = item.Value<JObject>("user").Value<string>("profile_picture"),  
  58.                         LowResolutionUrl = item.Value<JObject>("images").Value<JObject>("low_resolution").Value<string>("url"),  
  59.                         StandardResolutionUrl = item.Value<JObject>("images").Value<JObject>("standard_resolution").Value<string>("url"),  
  60.                         ThumbnailUrl = item.Value<JObject>("images").Value<JObject>("thumbnail").Value<string>("url"),  
  61.                         Text = item.Value<JObject>("caption").Value<string>("text"),  
  62.                         CreatedTime = item.Value<JObject>("caption").Value<string>("created_time"),  
  63.                         LikesCount = item.Value<JObject>("likes").Value<int>("count"),  
  64.                         CommentsCount = item.Value<JObject>("comments").Value<int>("count"),  
  65.                     };  
  66.   
  67.                     instagramItems.Add(instagramItem);  
  68.                 }  
  69.   
  70.                 InstagramItems = instagramItems;  
  71.             }  
  72.             catch (Exception exception)  
  73.             {  
  74.   
  75.             }  
  76.         }  
  77.   
  78.         public event PropertyChangedEventHandler PropertyChanged;  
  79.   
  80.         protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)  
  81.         {  
  82.             if (PropertyChanged != null)  
  83.             {  
  84.                 PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));  
  85.             }  
  86.         }  
  87.     }  
  88. } 
Step 4.2

Now, we need to add namespaces. For that, go to Solution Explorer >> Instagram(PCL) >> click open InstagramViewModels page design view and add the following namespaces.

 
  1. using System.Collections.Generic;  
  2. using System.ComponentModel;  
  3.   
  4. using System.Net.Http;  
  5. using System.Runtime.CompilerServices;  
  6. using System.Threading.Tasks;  
  7. using Newtonsoft.Json;  
  8. using Newtonsoft.Json.Linq;  
  9. using Instagram.Models;  
  10. using XamarinForms.Models; 
Step 5

Add References now. For that, go to Solution Explorer >> Instagram(PCL)app >> right click on References >> Add References. Add the given references.

 
  1. Newtonsoft.Json  
  2. System.Net.Http  
  3. System.Net.Http.Extensions  
  4. System.Net.Http.Primitivies 
Step 6

After design view creation, go to Solution Explorer >> Instagram(PCL) >> click open App.xaml.cs file and declare that the Main page is InstagramViewPage. The code is given below.

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5.   
  6. using Xamarin.Forms;  
  7. using XamarinForms.Views;  
  8.   
  9. using XamarinForms.Models;  
  10. using XamarinForms.ViewModels;  
  11.   
  12. namespace Instagram  
  13. {  
  14.     public partial class App : Application  
  15.     {  
  16.         public App()  
  17.         {  
  18.             InitializeComponent();  
  19.   
  20.             MainPage = new InstagramViewPage();  
  21.         }  
  22.   
  23.         protected override void OnStart()  
  24.         {  
  25.             // Handle when your app starts  
  26.         }  
  27.   
  28.         protected override void OnSleep()  
  29.         {  
  30.             // Handle when your app sleeps  
  31.         }  
  32.   
  33.         protected override void OnResume()  
  34.         {  
  35.             // Handle when your app resumes  
  36.         }  
  37.     }  
  38. } 
Step 7

Now, go to Build menu and click "Configure Manager". Here, you can configure your startup projects. Click F5 or start Build and Run your application.

Finally, we have successfully created a Xamarin.Forms Instagram application.
 
Conclusion

I hope you have learned how to create an Instagram application using MVVM pattern.


Similar Articles