Book Image

Xamarin Blueprints

By : Michael Williams
Book Image

Xamarin Blueprints

By: Michael Williams

Overview of this book

Do you want to create powerful, efficient, and independent apps from scratch that will leverage the Xamarin framework and code with C#? Well, look no further; you’ve come to the right place! This is a learn-as-you-build practical guide to building eight full-fledged applications using Xamarin.Forms, Xamarin Android, and Xamarin iOS. Each chapter includes a project, takes you through the process of building applications (such as a gallery Application, a text-to-speech service app, a GPS locator app, and a stock market app), and will show you how to deploy the application’s source code to a Google Cloud Source Repository. Other practical projects include a chat and a media-editing app, as well as other examples fit to adorn any developer’s utility belt. In the course of building applications, this book will teach you how to design and prototype professional-grade applications implementing performance and security considerations.
Table of Contents (14 chapters)
Xamarin Blueprints
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

Adding the Android photo screen


Implementing a photo view for cell selections is very similar, although with Android we will be using an intent to create a new activity, which in turn will inflate a new view to display the image and details. Let's start by adding a new XML called photo_view.xml, and paste in the following code:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="4"> 
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_weight="1"> 
        <ImageView 
            android:id="@+id/image_photo" 
            android:scaleType="centerCrop" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:adjustViewBounds="true" /> 
    </LinearLayout> 
    <LinearLayout 
        android:orientation="vertical" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_weight="3" 
        android:weightSum="2"> 
        <TextView 
            android:id="@+id/title_photo" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" /> 
        <TextView 
            android:id="@+id/date_photo" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_weight="1" /> 
    </LinearLayout> 
</LinearLayout> 

The layout is very much the same as the custom_cell.xml sheet, although we are going to stack items vertically and set the following two properties to keep the correct image aspect ratio:

android:adjustViewBounds="true" 
android:scaleType="centerCrop" 

Note

Make sure XML sheets do not contain the same IDs as any other XML sheet.

Now that we have our user interface for the PhotoActivity, let's add the new activity:

[Activity (Label = "Gallery.Droid", Icon = "@mipmap/icon")] 
    public class PhotoActivity : Activity 
    { 
        /// <summary> 
        /// Raises the create event. 
        /// </summary> 
        /// <param name="savedInstanceState">Saved instance state.</param> 
        protected override void OnCreate (Bundle savedInstanceState) 
        { 
            base.OnCreate (savedInstanceState); 
 
            // Set our view from the "main" layout resource 
            SetContentView (Resource.Layout.Photo); 
 
            var imageData = Intent.GetByteArrayExtra ("ImageData"); 
            var title = Intent.GetStringExtra ("Title") ?? string.Empty; 
            var date = Intent.GetStringExtra ("Date") ?? string.Empty; 
 
            // set image 
            var imageView = FindViewById<ImageView> (Resource.Id.image_photo); 
            BitmapHelpers.CreateBitmap (imageView, imageData); 
 
            // set labels 
            var titleTextView = FindViewById<TextView> (Resource.Id.title_photo); 
            titleTextView.Text = title; 
            var dateTextView = FindViewById<TextView> (Resource.Id.date_photo); 
            dateTextView.Text = date; 
        } 
    } 

Looking at this new activity, what can we see? Notice the attributes at the top:

[Activity (Label = "Gallery.Droid", Icon = "@mipmap/icon")] 

There is no MainLauncher tag because this is not our starting activity. We then add the intent.GetExtras for the image data and strings required to display on our Photo interface.

Now we need to make one addition to the ListAdapter class:

public GalleryItem GetItemByPosition (int position) 
{ 
     return _items[position]; 
} 

When an item in the list is selected, we need to be able to access the selected GalleryItem. Our next step is to add the ItemClick delegate for the ListView. Open up the MainActivity class and add the following to the OnCreate function:

listView.ItemClick += (object sender, AdapterView.ItemClickEventArgs e) =>  
            { 
                var galleryItem = adapter.GetItemByPosition (e.Position); 
                var photoActivity = new Intent(this, typeof(PhotoActivity)); 
                photoActivity.PutExtra ("ImageData", galleryItem.ImageData); 
                photoActivity.PutExtra ("Title", galleryItem.Title); 
                photoActivity.PutExtra ("Date", galleryItem.Date); 
                StartActivity(photoActivity); 
            }; 

Place this after we set the list adapter. When an item is clicked, we simply pull out the gallery item from our adapter by the position passed from the ItemClickEventArgs. Once we have the gallery item, we create the new PhotoActivity intent and pass the extras.

That is all; run the application and play around selecting cells to display the PhotoActivity.